Tabellenlayout mit <div>s

[Mike]

Hallo zusammen,

ich will folgendes Layout mit divs realisieren:

+----------------+
| Box1           |
+------+---------+
|      |         |
| Box2 |   Box3  |
|      |         |
+------+---------+

Dabei habe ich die Probleme:

1. Zwischen Box 2 und 3 ist ein Abstand von ein paar Pixel.
2. Wie kann ich es erreichen, dass Box2 mit nach unten wächst, wenn der Text in Box3 diese "aufdrückt"?

Im Moment verwende ich folgenden Code:

<div style="width:300; height: 25; background-color: red;">Überschrift</div>
 <div style="width:100; height: 25; background-color: green; float: left;">Bild</div>
 <div style="width:200; height: 25; background-color: blue;">Text Text Text</div>

PS: Absolute Positionierung kann ich nicht verwenden, da die Boxen dynamisch generiert werden.

Danke für eure Hilfe,

Mike

PS: Ich habe im Archiv einiges dazu gefunden, aber ich komme einfach nicht weiter.

[Orlando]

Hi Mike,

ich will folgendes Layout mit divs realisieren:

trenne dich vom Denken in Kasten, äh... Kästchen ;)

+----------------+
| Box1           |
+------+---------+
|      |         |
| Box2 |   Box3  |
|      |         |
+------+---------+

1. Zwischen Box 2 und 3 ist ein Abstand von ein paar Pixel.

#box2 { margin:0 }
 #box3 { margin:0 }

Du kannst auch negative Werte angeben, sollte dies notwendig sein.

2. Wie kann ich es erreichen, dass Box2 mit nach unten wächst, wenn der Text in Box3 diese "aufdrückt"?

Gar nicht, aber du kannst dieses Layout auch anders umsetzen: Definiere eine Hintergrundfarbe für die Seite und weise Box2 *keine* zu (background:transparent oder inherit). Egal, wie lang diese Box wird, es wird dann immer der gesamte Hintergrund plus dem Abstand bis zum Seitenende in der Hintergrundfarbe erscheinen.

LG Roland

[Mike]

Hi Roland,

+----------------+
| Box1           |
+------+---------+
|      |         |
| Box2 |   Box3  |
|      |         |
+------+---------+

1. Zwischen Box 2 und 3 ist ein Abstand von ein paar Pixel.

#box2 { margin:0 }
 #box3 { margin:0 }

Du kannst auch negative Werte angeben, sollte dies notwendig sein.

Stimmt mit #box2 { margin-right:-3 )
           #box3 { margin-left:-3 )
klappt es im IE aber nicht im Netscape.

Vielen Dank für die Hilfe, aber wir machen es jetzt einfach mit Tabellen, nicht so schön aber es funktioniert.

Mike

[Ole]

hi

Stimmt mit #box2 { margin-right:-3 )
           #box3 { margin-left:-3 )
klappt es im IE aber nicht im Netscape.

"-3" was? gurken? zweibeln? oder gar kartoffeln?  ich denke die angabe einer maßeinheit dürfte kein fehler sein: px, mm, pt etc.

so long
ole
(8-)>

[Orlando]

Hi Ole,

#box2 { margin-right:-3 )
#box3 { margin-left:-3 )

"-3" was? gurken? zweibeln? oder gar kartoffeln?  ich denke die angabe einer maßeinheit dürfte kein fehler sein: px, mm, pt etc.

Stimmt, habe ich übersehen. Nur beim Wert Null darf die Einheit weggelassen werden. Der Tipp mit dem Doctype kann trotzdem hilfreich sein.

LG Roland

[Mike]

Hi Ole,

die Angabe auf 3px zu ändern bewirkt keinen Unterscheid.

Mike

Stimmt mit #box2 { margin-right:-3 )
           #box3 { margin-left:-3 )
klappt es im IE aber nicht im Netscape.

"-3" was? gurken? zweibeln? oder gar kartoffeln?  ich denke die angabe einer maßeinheit dürfte kein fehler sein: px, mm, pt etc.

[Orlando]

Hi Mike,

Du kannst auch negative Werte angeben, sollte dies notwendig sein.

Stimmt mit #box2 { margin-right:-3 )
           #box3 { margin-left:-3 )
klappt es im IE aber nicht im Netscape.

Das liegt wahrscheinlich daran, dass der M$IE bei Angabe eines falschen bzw. unvollständigen Doctypes oder bei Angabe der XML-Deklaration falsch rendert (er zählt die Abstände und Rahmen nicht zur Breite dazu, sondern zieht sie davon ab). Mit dem Suchbegriff "doctype switching" findest du weitere Information zu diesem Thema im Archiv (http://selfsuche.teamone.de/). Auch Google gibt sich damit redselig ;)

Vielen Dank für die Hilfe, aber wir machen es jetzt einfach mit Tabellen, nicht so schön aber es funktioniert.

Das tut es auch ohne Tabellen, so schnell würde ich nicht aufgeben.

LG Roland

[uepselon]

Hallo,

Hi Mike,

ich will folgendes Layout mit divs realisieren:

trenne dich vom Denken in Kasten, äh... Kästchen ;)

Warum sollte man?
Ich findes es recht praktisch in "Kästchen" zu denken.
Bei einfachen Layouts mag sowas nicht nötig sein, was aber wenn man sehr viele Bereiche hat, deren Größe sich mit dem Inhalt anpassen muss? div's passen sich eben nicht an, wie ein Tabelle, das ist IMHO ein Problem.

Gruß,
ueps

[Orlando]

Hi uepselon,

trenne dich vom Denken in Kasten, äh... Kästchen ;)

Warum sollte man?

damit der Gag noch funktioniert?

Ich findes es recht praktisch in "Kästchen" zu denken.

Nur, solange das Layout nicht so weit skalieren muss, dass 'Zeilenwechsel' erforderlich werden.

Bei einfachen Layouts mag sowas nicht nötig sein, was aber wenn man sehr viele Bereiche hat, deren Größe sich mit dem Inhalt anpassen muss? div's passen sich eben nicht an, wie ein Tabelle, das ist IMHO ein Problem.

Ganz im Gegenteil, denn DIVs können fließen, eine Tabelle ist dagegen starr und viel zu oft nicht linearisiert. Wie willst du denn zB eine große Tabelle auf einem Handheld darstellen? Ich behaupte ja nicht, dass ein CSS-Layout keine Probleme aufwirft, aber sie sind in Summe geringer als bei Tabellen. Man muss nur aufhören, 'in Tabellen zu denken', was beim Umstieg oft nicht leicht fällt.

LG Roland

[uepselon]

Hallo,

Ganz im Gegenteil, denn DIVs können fließen, eine Tabelle ist dagegen starr und viel zu oft nicht linearisiert.

Eben da sehe ich die Schwachstelle von div's. Unter umständen ist es von nöten das ein Bereich sowohl seinen festen "starren" Platz haben muss, aber seine größe sich dynamisch anderen Bereichen anpassen sollte. Das geht mit div's nicht. Ich habe mal versucht meine Seite nur mit div's zu lösen. Je nach Fenstergröße haben sich die Bereiche so verschoben das die Seite extrem hässlich wurde. Geschweige denn die erheblichen Unterschiede in _jedem_ Browser.

Bei schnöden "ich formatiere Text" Seiten, mag CSS Layout zu 100% einsetzbar sein, nicht jedoch bei mit Grafiken-gestylten Seiten.
Ich bin daher wieder auf Tabellen zurückgekommen.

Desweiteren schauen bestimmt mehr Leute eine Seite bit N4.x an als mit einem Handheld. Daher muss man ja fast Tabellen nehmen, da N4.x CSS auf den Müll wirft.

Wie willst du denn zB eine große Tabelle auf einem Handheld darstellen?

Die Tabellen bekommen keine feste breite, sie dienen lediglich der Platzierung der Elemente. d.h. wenn ich zwei Bereiche nebeneinander haben will, müssen die auch so da stehen. Mit div's wären Sie evtl. auf dem Handheld untereinader obwohl das gar nicht Sinnig wäre. Daher ist mir ein Scrollbalken lieber als ein zerhacktes Layout.

Gruß,
ueps

[Henning]

Hallo,

Gar nicht, aber du kannst dieses Layout auch anders umsetzen: Definiere eine Hintergrundfarbe für die Seite und weise Box2 *keine* zu (background:transparent oder inherit). Egal, wie lang diese Box wird, es wird dann immer der gesamte Hintergrund plus dem Abstand bis zum Seitenende in der Hintergrundfarbe erscheinen.

Das geht, habe ich auf http://www.feuerwehr-timmerlah.de gemacht. Der linke Navigations-div wird mit der Größe des Inhalts-div verlängert.
Gruß,
Henning

[Mike]

Hallo Henning,

Das geht, habe ich auf http://www.feuerwehr-timmerlah.de gemacht. Der linke Navigations-div wird mit der Größe des Inhalts-div verlängert.

Ich habe mir Deine Seite angesehen:

div#navi {
  [...]
  width:150px;
  height:100%;
  float:left;
  [...]
}

Und auf mein Beispiel angewandt:

<div style="width:300;">
   <div style="width:300; height: 25; background-color: red;">Überschrift</div>
   <div style="width:100; height:100%; background-color: green; float: left; margin-right:-3px">Bild</div>
   <div style="width:200; height: 25; background-color: blue; margin-left:-3px">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
</div>

Leider wird der "Grüne Kasten" nicht vergrößert? Ich habe jetzt mal nur in IE6.0 getestet.

Any Idea?

Mike

[Thomas J.]

Tag auch

Leider wird der "Grüne Kasten" nicht vergrößert?

Es geht z.B. auch so:

+--------------------------+
| navi 1  +---------------+|
| navi 2  |    viel Text  ||
| etc.    |               ||
|         |               ||
|         |               ||
|         |               ||
|         +---------------+|
+--------------------------+

Der Fantasie sind (fast) keine Grenzen gesetzt.

Thomas J.

[Mike]

Tag!

Es geht z.B. auch so:

+--------------------------+
| navi 1  +---------------+|
| navi 2  |    viel Text  ||
| etc.    |               ||
|         |               ||
|         |               ||
|         |               ||
|         +---------------+|
+--------------------------+

Leider interpretiert der Netscape 6.2 "float: left;" irgendwie nicht so wie ich will. Baue ich es nach Deinem Vorschlag auf, beginnt der Kasten "viel Text" an der linken Kante des äußeren divs.

Code:
<div style="width:300px; background-color: green;">
   <span style="float: left; width: 100px; margin-right:-3px">Bild</span>
   <div style="width:200px; height: 100%; background-color: blue;">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
</div>

Mike

[Thomas J.]

Ich nochmal

Code:
<div style="width:300px; background-color: green;">
   <span style="float: left; width: 100px; margin-right:-3px">Bild</span>

Das ist schon mal falsch. <span> ist ein Inline-Element. Da sind keine Breitenangaben erlaubt.

<div style="width:200px; height: 100%; background-color: blue;">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
</div>

Außerdem hast Du mich etwas falsch verstanden. Du brauchst nur zwei divs.

So z.B.:

<div style="width:300px; background:blue">
 <div style="width:200px;float:right;background:red">
  <p style="margin:0;">Text Text Text Text Text Text<br>
  Text Text Text Text Text Text<br>
  Text Text Text Text Text Text<br>
  Text Text Text Text Text Text</p>
 </div>
 Wenig Text
 <div style="clear:right"></div>
</div>

Ich habe das jetzt nur auf die Schnelle mit Opera getestet. Es sollte aber auch mit Mozilla klappen.
Was der IE daraus macht, möchte ich gar nicht erst wissen ;) Möglicherweise mußt Du "Wenig Text" noch extra formatieren, z.B. <p style="width:100px;margin:0;float:left">Wenig Text</p>

Thomas J.

[Mike]

Hi Thomas,

das sieht jetzt schon wirklich gut aus! Es gibt nur noch ein kleines Problem:
Das Div mit wenig Text wird in Netscape nicht aufgezogen. Alle Versuche mit Hennings 100% Trick funktionieren nicht mehr.

Warum hast Du dieses Div im Beispiel? Ohne sieht es bei mir genauso aus?

<div style="clear:right"></div>

Du kannst Dir das ganze unter https://kher428a.khe.siemens.de/test/layer.htm ansehen.

Mike

[Thomas J.]

Ich nochmal

Das Div mit wenig Text wird in Netscape nicht aufgezogen.

Doch das geht ...

Warum hast Du dieses Div im Beispiel? Ohne sieht es bei mir genauso aus?

<div style="clear:right"></div>

... und zwar damit. Durch clear:right (bzw. clear:both) wird der Status "umfließend" aufgehoben. Damit erzwingst Du, daß dieser Div unterhalb der beiden ersten positioniert wird.
Somit wird der blaue Div dann auch tatsächlich in der Höhe angepaßt.

Das Dumme ist nur, daß Netscape/Mozilla darauf nicht reagiert, weil der Div leer ist.

Du mußt also <div style="clear:both"> </div> schreiben.
Damit bekommst Du erstmal unterhalb des Bereiches mit viel Text noch einen blauen Rand - eben genauso hoch wie ein unformatiertes   ist.
Mit etwas Geduld und Trickserei (<div style="clear:both; font-size:10px; margin-top:-12px"> </div>) oder so ähnlich, bekommst Du den dann auch noch weg.

Thomas J.

[Mike]

YES!!!!!

Das Dumme ist nur, daß Netscape/Mozilla darauf nicht reagiert, weil der Div leer ist.

Das war es! Es klappt! Vielen, vielen Dank!

Hier der komplette Code:
<div style="width:300px; height: 25px; background-color: red;">Überschrift</div>
<div style="width:300px; background:blue">
   <div style="width:200px;float:right;background:green">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
   Wenig Text
   <div style="clear:both; font-size:10px; margin-top:-12px"> </div>
</div>

Mike

[Sabina]

Guten Tag,
Ich möcht mich herzlich für die gemachten Hinweise bedanken. Sowas suche ich schon lange, allerdings habe ich festgestellt, dass Mozilla und Opera es nicht ganz so darstellen wie ich es möchte. Bei height:100%; in allen divs, brechen sie die divs nach genau einer Bildschirmlänge ab, während IE height auf die Größe des Eltern-div bezieht. Nehme ich height aus dem Eltern-div wird es noch schlimmer und jeder der drei reagiert anders, aber alle nicht wie ich es möchte und das margin-top:-xpx; hilft auch nicht mit clear:both;.

<div style="height:100% ;width:100%; background-color: fuchsia;">
 <div style="float:left; clear: left; width:30px; height:100%; background: purple url(left.png);">l1</div>
 <div style=" height:100%; width:40px; background:aqua url(right.png); clear: right; float: right;">l2</div>
 <div style="">text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text
</div></div>

[Henning]

Hallo,

Man muss Inhalts- und Navi-div in ein weiteres div legen (hier 'haupt'). haupt und navi müssen height:100% haben. Das ist der Trick.

div#haupt {
  height:100%;
}

div#navi {
  padding:5px;
  background-color:#FFFF00;
  width:150px;
  height:100%;
  float:left;
  position:fixed;
  top:100px;
  left:0px;
   [...]
}

div#inhalt {
  padding:0px;
  margin-left:170px;
  [...]
}

Gruß,
Henning

[Mike]

Hi Henning!

Man muss Inhalts- und Navi-div in ein weiteres div legen (hier 'haupt'). haupt und navi müssen height:100% haben. Das ist der Trick.

Dann habe ich mit Netscape 6.2 das Problem, dass der rechte Kasten an der linken und nicht der rechten Kante des vorhergehenden divs beginnt.

???

Mike

Code:
<div style="width:300; height:100%">
   <div style="width:300; height: 25; background-color: red;">Überschrift</div>
   <div style="width:100; height:100%; background-color: green; float: left; margin-right:-3px">Bild</div>
   <div style="width:200; height:100%; background-color: blue;">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
</div>

[Henning]

Hallo,

Code:
<div style="width:300; height:100%">
   <div style="width:300; height: 25; background-color: red;">Überschrift</div>
   <div style="width:100; height:100%; background-color: green; float: left; margin-right:-3px">Bild</div>
   <div style="width:200; height:100%; background-color: blue;">
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
      Text Text Text Text Text Text
   </div>
</div>

Nur das Div das sich an die Größe des anderen anpassen soll, darf height:100%, nicht beide. Ich benutze position:fixed, vielleicht macht das auch einen Unterschied.
Gruß,
Henning

[Mike]

Hi Henning,

Nur das Div das sich an die Größe des anderen anpassen soll, darf height:100%, nicht beide. Ich benutze position:fixed, vielleicht macht das auch einen Unterschied.

Hilft leider alles nichts. Ich habe immer das "float" Problem wie im Post Netscape Probleme mit "float" / Tabellenlayout mit <div>s beschrieben.

Trotzdem danke

Mike

[Cyx23]

Hallo,

1. Zwischen Box 2 und 3 ist ein Abstand von ein paar Pixel.
2. Wie kann ich es erreichen, dass Box2 mit nach unten wächst, wenn der Text in Box3 diese "aufdrückt"?

Im Moment verwende ich folgenden Code:

<div style="width:300; height: 25; background-color: red;">Überschrift</div>
 <div style="width:100; height: 25; background-color: green; float: left;">Bild</div>
 <div style="width:200; height: 25; background-color: blue;">Text Text Text</div>

PS: Absolute Positionierung kann ich nicht verwenden, da die Boxen dynamisch generiert werden.

1:
besonders ohne absolute Positionierung empfiehlt sich eigentlich ein
toleranter Aufbau
2:
Angabe von Höhe oder Margin
1/2:
wenn du die Styleanweisungen im head schreibst ist es einfacher CSS
browserspezifisch anzupassen, und z.B. notfalls für den IE mit margin
zu arbeiten usw., dann lassen sich auch die 3 Pixel korrigieren.

Grüsse

Cyx23

[Mike]

OK, dank eurer Hilfe sieht das Ganze schon ganz gut aus. Nur bei Netscape (6.2) gibt es noch Probleme. Er interpretiert das Style Attribut "float" nicht so wie er soll.

Meines Auffassung nach sollte dieser Code, zwei Kästen nebeneinander darstellen:

<div style="width:100px; height: 100px; background-color: red; float: left;">Hallo</div>
   <div style="width:100px; height: 100px; background-color: green;">Hallo</div>

Im Netscape verdeckt das rote Div jedoch das grüne.

Was mache ich falsch?

Mike

[Jan]

Hallo,

<div style="width:100px; height: 100px; background-color: red; float: left;">Hallo</div>
   <div style="width:100px; height: 100px; background-color: green;">Hallo</div>

gib dem zweiten div (green) noch die angabe: margin-left:....px;
und sie werden nebeneinander liegen. auch im ie obwohl man nun denken
könnte, er liegt weiter rechts, tut er aber nicht.

Gruss, Jan aus Dresden