Div - CSS Layout Problem

...komplette Frage anzeigen Vorlage - (html, CSS, Layout)

4 Antworten

Natürlich erstellt man CSS und DIVs. Wie sonst? Versuch es mal damit.

PS: Tausche die runden Klammern "()" gegen eckige aus "<>".

(html)
(head)
(meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /)

(style type="text/css")
  div.container {
      width:800px;
  }
  div.ebene1 {
      width:600px;
      height:200px;
      float:left;
      background-color:#F00;
  }
  div.ebene2 {
      width:200px;
      height:200px;
      float:left;
      background-color:#F30;
  }
  div.ebene3 {
      width:600px;
      height:150px;
      float:left;
      background-color:#F60;
  }
  div.ebene4 {
      width:200px;
      height:600px;
      float:right;
      background-color:#F90;
  }
  div.ebene5 {
      width:600px;
      height:450px;
      float:left;
      background-color:#FC0;
  } 
  div.ebene6 {
      width:800px;
      height:75px;
      clear:both;
      background-color:#FF0;
  }
(/style)

(/head)

(body)
(div class="container")
  (div class="ebene1")(/div)
  (div class="ebene2")(/div)
  (div class="ebene3")(/div) 
  (div class="ebene4")(/div)
  (div class="ebene5")(/div) 
  (div class="ebene6")(/div)
  (div style="clear:both;")(/div)
(/div)
(/body)
(/html)

Du erstellts kein CSS Layout sondern ein Div Layout.

Divs sind aber nicht dazu da um ein Layout zu erstellen. Lies dir das mal durch: http://webstandard.kulando.de/post/2005/11/04/div_wahnsinn_div_suppe_oder_div_chaos_-_wie_kann_man_es_vermeiden

ZU deinem Problem: Ja ist ein ziemlich häufiges Problem und recht einfach zu lösen. Da ich hier aber nur einen Link posten darf solltest du mal nach sticky footer googeln.

Naja, in dem Artikel wird ja nicht von Divs für die Layouterstellung abgeraten, sondern lediglich darüber philosophiert, wie man Divs einsparen kann. In meinem Fall wären es ja lediglich 6, vllt sogar weniger, wenn man den Header mit dem Logo in eines packt. Sagen wir einfach mal, es wäre in diesem Fall okay.

Und zu dem Footer: Da habe ich mcih wohl falsch ausgedrückt: der soll nicht immer am unteren Bildschirmrand hängen, sondern an der Unetrseite des längsten Divs (5 oder 6). Bei mir rutscht er immer in einen Zwischenraum, wenn beispielsweise 6 länger ist, legt er sich unter 5 und ist somit links neben der 6 ... oder umgekehrt.

0
@fragdochmalnach

Da müsste ich den Quelltext (HTML und CSS) sehen um etwas geaues sagen zu können.

Bei dem verlinkten Artikel hast du wohl das überlesen:

Das heisst wiederum nicht, das das einzelne Div als Layout missbraucht werden soll, um nun die Aufgaben zu erfüllen die vorher die Layouttabelle übernahm.

Divs sind dazu da um mehrere Elemente zu gruppieren. Wenn das nicht der Fall ist sind sie fehl am Platz.

0
@jowi75

ich kann elroy nur beipflichten. Unsinn ist das nicht.

0

Das macht man mit "float und clear".

Beispiel:

<style type="text/css">
#header,#grafik,#inhalt { float:left; width:70% }
#logo,#liste { float:right; width:30% }
#unten { clear:both }
</style>
<div id="header">1 Header</div>
<div id="logo">2 Logo</div>
<div id="liste">4 Listennavigation</div>
<div id="grafik">3 grafische Navigation</div>
<div id="inhalt">5 Inhalt</div>
<div id="unten">6 Fußzeile</div>

Vielen Dank! Ich war so verplant, dass ich nicht an den clear Befehl gedacht habe! Genau der hat mir im Footer gefehlt um alles richtig zu haben! Den Rest hatte ich soweit richtig ... oh man, mit sowas kann man echt seine Zeit vergeuden :-P

Was möchtest Du wissen?