nicht angemeldet
Hi,
<div style="float:left; width:200px;">
<div style="background:yellow;">
Navigation A<br />Navigation B<br />NavigationC
</div>
<div style="background:red;">Hier stelle man<br />sich das Bild vor<br />...<br />...<br /></div>
</div><div style="margin-left:200px; background:lime;">
Hier<br />steht<br />der<br />Inhalt<br />der<br />Seite
</div>Auf die Höhe der Seite sollen sich allerdings nur der gelbe und grüne Bereich auswirken. Vom roten soll so viel sichtbar sein wie sowieso noch übrig ist.
Wenn die „Navigation“ - die du natürlich vernünftig als Liste umsetzen willst, eine feste Höhe hätte, wär's ja gar kein Problem - wird sie aber vermutlich nicht haben.
Wenn wenigstens die Höhe einer Zeile in dieser Navigation (bzw. genauer der letzten) bekannt wäre - ggf. auch in einer relativen Einheit wie em - dann könnte man in dieses letzte Navigations-Item einfach ein Element reinsetzen, das man absolut positioniert ... „und fertig ist das Gartenhäuschen“:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0; }
#container { overflow:hidden; width:40em; margin:1em auto; background:black; }
#menu { float:left; width:200px; background:yellow; line-height:1.25; }
#menu li:last-child { position:relative; }
#menu li:last-child:after { content:" "; position:absolute; top:1.25em; left:0; right:0; background:red;
height:500px; /* ggf. anpassen */
background:url(http://example.com/your/image/goes.here) no-repeat; /* ANPASSEN*/ }
#content { margin-left: 200px; background:lime; }
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>Navigation A</li><li>Navigation B</li><li>NavigationC</li>
</ul>
<div id="content">
<p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong>
consectetur adipisicing elit, <abbr title="">abbreviated text</abbr> sed do eiusmod tempor
<acronym title="">acronym text</acronym> incididunt ut labore et dolore magna aliqua. Ut
<q>quoted text</q> enim ad minim veniam, quis nostrud exercitation <a href="/">link text</a>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <del>deleted text</del>
<ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Ich habe hier mit :last-child und :after gearbeitet, damit das Zusatzelement, das ja nur optischen Zwecken dient, nicht im Markup stehen muss.
Wenn rückständige Browser ein concern sein sollten, dann kann :last-child natürlich auch durch eine entsprechende Klasse für das letzte LI und :after durch in in diesem platziertes leeres SPAN-Element o.ä. umgesetzt werden.
overflow:hidden bringt hier sowohl den Container „auf Höhe“, falls der Inhalt kürzer als die Navigation sein sollte (dann siehst du seinen schwarzen Hintergrund), als dass es auch dafür sorgt, dass das Pseudo-Element, welches das Hintergrundbild enthält, am unteren Rand „abgeschnitten“ wird. (Die 500px Höhe für dieses Element ggf. noch vergrößern, falls das ganze noch höher werden kann.)
Und die top-Positionierung des Pseudoelementes habe ich wie du siehst korrespondierend zur Zeilenhöhe des LI-Elementes, in dem es positioniert wird, gewählt (line-height:1.25 bei 1em Default-Schriftgröße entspricht also top:1.25em, damit es genau unten bündig mit diesem LI anfängt).
Wie gesagt, sollte der Text in diesem LI mehrzeilig werden, funktioniert das ganze so nicht mehr wirklich korrekt.
Entweder unterbindest du das ganz (Eigenschaft white-space), oder du sorgst für diesen Fall, so er unwahrscheinlich, aber nicht vollkommen ausgeschlossen sein sollte, vor, in dem du das Pseudoelement per z-index hinter dem eigentlichen Inhalt des LI platzierst - dann wird ggf. oben noch ein Stückchen vom Hintergrundbild abgeschnitten - ob das zu verschmerzen ist, hängt vom konkreten Bild ab.
Aber genau dieser Wunsch ist meinem Verständnis nach weder mit einem <img> noch mit einem style=background umsetzbar, denn beide erfordern dass ich dem jeweiligen Element eine gerade passende Höhe gebe.
„Nichts ist unmöglich - wenn man es sich nur vorstellen kann ...“
(Aus welchem Film war das noch gleich? Irgendso ein Animations-Ding glaube ich ...)
MfG ChrisB
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Gunnar Bittersmann