✔ CSS Design Umsetzungsfrage

[tequila slammer]

Seit einigen Tagen stehe ich nun schon vor dem Problem, wie ich meinen Contentcontainer mit 2 nebeneinander angeordneten divs hinbekomme.

Meine Frage ist nun, geht dies nur über absolute Positionierung? Das kann ich eigentlich nicht glauben, denn auf den weiter oben geposteten Links hat der Mache es auch hinbekommen nur ich eben nicht.

In dem Zusammenhang stellt sich mir auch die Frage, wie ich den grau eingefärbten Bereich so lang wie den roten Bereich bekomme.

Bitte noch einmal um Hilfe.

Ich habe es durch weiteres Ausprobieren und belesen hinbekommen. Float war die Lösung.

Mir ist aufgefallen, das die Höhe Submenüs nicht passt. Wie bekomme ich es hin, das die graue Hintergrundfarbe auch wirklich die volle Höhe hat wie die des Contents und auch das graue dies annimmt?

 

[Maik]

Wie bekomme ich es hin, das die graue Hintergrundfarbe auch wirklich die volle Höhe hat wie die des Contents und auch das graue dies annimmt?

Ich empfehle dir die "Faux-Columns-Technik", damit die beiden Spalten unabhängig von ihrem Inhalt immer die gleiche Höhe besitzen.

Zudem muß in deinem aktuellen Layout nach den floatenden Boxen mit der clear-Eigenschaft wieder der normale Textfluss im Dokument hergestellt werden, da derzeit in den modernen Browsern der Inhalt des DIV #content über den Footer "hinausläuft":

.clear {
clear: both;
font-size: 1px;
}

<div id="container">
<div id="header"><div><img src="header_splash.jpg" border="0" alt="header_splash" /></div></div>
<div id="menue"><ul><li><a href="index.html">Start</a></li><li>Unternehmen</li><li>Dienstleistungen</li><li>Kontakt</li></ul></div>
<div id="contentcontainer">
<div id="submenue"><ul><li>News</li><li>test</li></ul></p></div>
<div id="content">ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p>ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p>ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p>ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p>ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p>ajldjslkdal dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.<p>dies ist ein fülltext, der aus wörtern besteht. dies ist ein fülltext, der aus wörtern besteht.dies ist ein fülltext, der aus wörtern besteht.</p></div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer"></div>
</div>

 

[tequila slammer]

Hallo michaelsinterface,

ich habe den Inhalt der Klasse clear direkt in den Footer geschrieben. Das geht doch auch oder?

Des Weiteren habe ich deinen Vorschlag einmal versucht umzusetzen. Dazu habe ich ein Bild mit der gewünschten Breite und 1px Höhe als Hintergrund gesetzt. Aber anders als im Text, wird mein Submenü nur nach Contentlänge farbig hinterlegt.

 

[Maik]

Abgesehen davon, dass du float:both anstatt clear:both für den Footer deklariert hast, würde der linke und rechte Rahmen auf diese Weise nicht nach unten weitergeführt werden.

Die Hintergrundgrafik sub_hint.gif musst du in dem übergeordneten DIV #contentcontainer einbinden.

 

[tequila slammer]

So, nun ist es so wie ich es haben wollte. Ich danke dir und stelle meine letzte Frage für heute.

Im IE ist mir aufgefallen, dass mein Hauptcontainer manchmal direkt ganz oben anfängt. Drücke ich F5 oder auf einen Link sitzt es an der richtigen Position. Was kann man dagegen tun?

 

[Maik]

Vielleicht hängt es mit dem prozentualen padding-top-Wert für das DIV #container zusammen?

 

[tequila slammer]

Ich habe es nun durch eine feste Angabe ersetzt und werde das beobachten.