Mehrere DIVs schachteln

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich habe die folgenden zwei DIVs:

hier kommen jetzt Text, tabelle, listen, bilder; teilweise in weiteren block-elementen....

CSS:

.startseite { position:absolute; margin-top:0px; margin-left:41px; padding: 0px; }

Im inneren DIV wird also der Inhalt der Seite angezeigt, das äußere DIV soll links davon einen senkrechten Balken bis zum Ende des inneren DIVs wiederholen.
Leider wird das Bild nur 720px lang wiederholt (min-height), dann ist Schluss.

Was mach ich falsch? Wie krieg ichs hin? Wer kann mir helfen? Danke!

Viele Grüße,
Klaus

#2

Hallo Klaus,

.startseite { position:absolute; margin-top:0px;
margin-left:41px; padding: 0px; }

Leider wird das Bild nur 720px lang wiederholt (min-height),
dann ist Schluss.

Was mach ich falsch? Wie krieg ichs hin? Wer kann mir helfen?
Danke!

Du positionierst das innere DIV absolut, nimmst es damit also aus dem Textfluss und wunderst dich allen Ernstes, warum es das äußere DIV-Element nicht mehr aufspannt?

Verzichte auf die absolute Positionierung des inneren DIV-Elements!

Gruß Gernot

#3

Hallo Gernot,
ok, mein Fehler. Vielen Dank!
Die absolute Position habe ich eigentlich nur ins IE 6 CSS reingenommen.

Wenn ich sie rausnehme stehe ich nämlich vor einem anderen Problem:
Links der bereits genannten DIVs wird noch ein Menü in folgendem DIV angezeigt:

- Menu
- Menu

IE 6 kommt aber mit dem float:left nicht klar, weshalb ich das andere DIV absolut possitionieren musste. Gibt es hierfür eine andere Lösung?

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hallo Gernot,

  • Menu
  • Menu

vertical-align, padding:0px, border-spacing, und border:0px sind bei DIV-Elementen vollkommen überflüssig, weil sie entweder sowieso nicht anwendbar bzw. Default-Werte sind.

IE 6 kommt aber mit dem float:left nicht klar, weshalb ich das
andere DIV absolut possitionieren musste. Gibt es hierfür eine
andere Lösung?

Es gibt einige Bugs, die im Zusammenhang mit float im IE6 auftreten (Doubled-Margin-Bug, 3-Pixel-Text-Jog, etc.) aber keinen, dem man nicht wirksam begegnen könnte.

http://www.positioniseverything.net/explorer/doubled…
http://www.positioniseverything.net/explorer/threepx…

Einfachste Lösung wäre: Lass dein DIV mit der Klasse „startseite“ auch mit einer bestimmten Weite neben deinem Menü floaten und verpasse dem beides umschließenden Container mit dem Hintergrundbild eine Weite sowie overflow:hidden, damit er vom floatenden Inhalt auch aufgespannt wird. Als letztes Element hinter die beiden floatenden DIV-Elemente legst du auch noch sicherheitshalber ein BR-Element mit der CSS-Eigenschaft clear:both und line-height:0 in den Container mit dem Hintergrundbild.

Gruß Gernot