DIV Anordnung als Tabellenersatz?

Status
Nicht offen für weitere Antworten.
HammerHe@rt

HammerHe@rt

Erfahrenes Mitglied
Gibt es eine möglichkeit das typische 3 spalten design von zbsp http://www.diablo2.de oder vielen anderen gamesites oder siehe auch meiner jetzigen site http://www.es-weisswasser.de in ein design mit divs umzuwandeln bzw zu bauen?

Problem dabei ist, das die tabelle jetzt aus 2 zeilen und 3 spalten besteht. Obere Zeile wird zusammengefasst und der header reingepackt....die unteren 3 spalten sind links die navi und rechts noch ne infospalte (beide mit fester breite) und der contentbereich in der Mitte nimmt den Rest (je nach Browserbreite).

Habe mir mal das hier angeschaut....
http://www.css4you.de/wslayout1/ex0010.htm

aber da verschiebt er die divs immer untereinander wenn man das browserfenster verkleinert......

hat wer noch Tipps? oder ist es nicht möglich?
 
Hi!

Natürlich ist es möglich.
Zum Beispiel so:
Code: 
<html>
 <head>
  <style type="text/css">
  #head{position:absolute;top:0px;left:0px;background:green;height:20px;width:100%}
  #holder{position:absolute;top:21px;left:0px;width:100%}
  #left{position:absolute;top:0px;left:0px;width:50px}
  #right{position:absolute;top:0px;right:50px;width:50px}
  #body{position:absolute;top:0px;left:0px;margin-left:51px;margin-right:51px}
  </style>
 </head>
 <body>
  <div id="head">
   Head
  </div>
  <div id="holder">
   <div id="left">
    Links
   </div>
   <div id="right">
    Rechts
   </div>
   <div id="body">
   Body
   </div>
  </div>
 </body>
</html>

Wenn es sich nicht ganz von selbst erklähren sollte, so Sage bitte bescheid, ich werde es dann Kommentieren.
 
Ich lege deswegen immer das komplette Layout in einen DIV-Container, der die komplette Seite umfasst. Ob das auch bei Variablen breiten funktioniert, musst du einfach mal ausprobieren. Pack halt alles mal in ein DIV, dass die Breite 100% hat!
 
k und wie kann ich nun nnoch verhindern das beim zusammenschieben des browserfensters sich die divs übereinander schieben ?

mfG
Hammerhe@rt
 
hinzu kommt folgendes....pack ich in den head div ein pic mit zbsp 800pixel breite.....und schiebe dann das browserfenster zusammen dann rückt der rechte div am rechten rand mit....soweit so gut.....is das bild dann größer als die browserbreite gibts unten im browser ein scrollbalken.....das menü rechts rückt trotzdem weiter mit....wenn man nun nach rechts scrollt mit dem scrollbalken ist da ne leere weisse fläche und das rechte menü nichtmehr rechts.....
 
Hi!

Die CSS eigenschaften die du suchst sind:

margin und over-flow

Mit dem Margin kannst verhindern, dass sie sich übereinander schieben, und mit dem over-flow kannst du bestimmen, was passiert, wenn der Inhalt größer als der benötigte Platz ist.

Näheres auf: http://selfhtml.net/css
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück