Layout mit 3 Hintergrundgrafiken

[lisali]

Okay, vielen vielen Dank schonmal!

Nee, ich gehe jetzt dann wohl erstmal an die frische Luft, was essen.

Danke!

Lisa

 

[Maik]

Sodele, die Strickstunde ist beendet

Ich hoffe, dass du mit meinem Konzept zurechtkommst, und damit etwas anfangen kannst.

mfg Maik

 

[Maik]

Update-Time

In dieser Variante hab ich der Grafik "2colsBottom.gif" anstelle des weißen Hintergrunds einen transparenten gegönnt.

mfg Maik

 

[Maik]

Aller guten Dinge sind drei

Bislang hatte ich in der Grafik "2colsBottom.gif" den gewünschten vertikalen Versatz zwischen dem unteren Ende des Menüs und Inhalts nicht beachtet.

*fixed*

mfg Maik

 

[lisali]

Hey, vielen Dank, Maik!

Also, das dritte ist echt gut. Ich müsste es jetzt nur noch linksbündig machen.

Aber ich will es jetzt noch nicht als erledigt markieren, weil ich erstmal den Rest hinzufügen möchte und gucke, ob ich auf weitere Probleme oder so stoße.

Eins fällt mir dabei jetzt schon ein. Also, ich möchte gaanz unten im Menü (jedoch noch vor der Menü-unten-Grafik) so nen kleinen Text hinmachen, dass zwar auch "im Inhalt" drin ist, jedoch irgendwie eher wie unten angeheftet ist und sich vom eigentlich Inhalt (darüber) trennt. Wie kriege ich das hin? Ich denke immernoch in Tabellen... leider.

 

[Maik]

Das Layout bekommst du linksbündig ausgerichtet, indem die margin:auto-Deklaration für #wrapper entfernt wird, mit der ich das Layout im Fenster horizontal zentriert hatte.

Was den Text am Ende des Menüs betrifft, so gibt es hierfür zwar eine CSS-Positionierungstechnik (siehe hierzu
meinen Webmaster FAQ-Artikel Wie richte ich eine Box am unteren Rand der Elternbox aus?), blos wird der Text in seiner Ausgangsposition verharren, wenn der Inhalt im benachbarten Block #content zunimmt, und den Inhaltsumfang (Zeilenanzahl) in der Menüleiste überschreitet.

Da aber das Footer-Hintergrundbild "2colsBottom.gif" bedingt durch den vertikalen Versatz für das Menü gegenüber dem Inhalt einen gewissen Bereich des senkrechten Rahmens enthält, hast du aber die Möglichkeit, den Text im Footerbereich einzubetten

Das erweiterte Demo lad ich hier wie gewohnt hoch.

mfg Maik

 

[lisali]

Hey, also das ist jetzt echt fast perfekt!

Ich hätte gerade nur noch das Problem, dass der Header etwa 104px groß ist und ich gern so nen kleines Space hätte sozusagen zwischen Head und Menü-Bereich.

Ich hab das so:

#header {
height:111px;
background:#eee;
background:url(img/head.jpg) no-repeat;
}

Aber das sieht dann so aus wie im Anhang.

 

[Maik]

Normalerweise wäre hier eine margin-top-Deklaration für das Menü und den Inhalt die Lösung.

Da aber deren mittleres Hintergrundbild "2colsMiddle.gif" im DIV #wrapper genutzt wird, käme es an dieser Stelle zum Vorschein.

Also hab ich in "v5" das Markup um einen weiteren DIV-Block namens #innerwrapper ergänzt, der die beiden Spaltenblöcke in sich aufnimmt, sowie das angesprochene Hintergundbild erhält. Diesen Block hab ich dann mit margin-top:10px formatiert.

Damit es nun in den standardkonformen Browsern wegen der beiden umfliessenden Spaltenblöcke zu keinem Darstellungsfehler führt, bei dem die Box bzw. deren Hintergrundbild nicht in der vollen Höhe angezeigt wird, habe ich desweiteren die Klasse .clearfix eingeführt (siehe Warum passt sich die Boxenhöhe nicht dem Inhalt an?), die im DIV-Block #innerwrapper aufgerufen wird.

mfg Maik

 

[lisali]

Dankeschön! Ich hab jetzt mal etwas weitergemacht und bin an zwei weitere Fragen gestoßen, die sich vielleicht in dem Bild klären?

http://s8.directupload.net/images/091211/w7p7uuff.png

Und dazu hätte ich vielleicht noch die Frage: Man sieht ja ein Suchfeld dort. Da kann ich ja dann einfach ein fixed div mit Form+Inputfeld später reinmachen, genauso wie für das schwarze Feld für den Navigations-Inhalt der Seite, oder?


Edit: Ohh... noch was ganz wichtiges... ist mir gar nicht aufgefallen.... ach, ich zeig einfach die Grafik der Seite... Moment.

 

[Maik]

Ich kann dem Bild gerade nicht so recht folgen

Soll sich das graue Hintergrundbild nach rechts "strecken", oder wiederholen?

"Unendlich" wird aber nicht funktionieren, da ja #outerwrapper (ehemals #wrapper) eine feste Breite besitzt.

Wie lautet denn dein dazugehöriger HTML-/CSS-Code?

mfg Maik