Bild zeigen soweit Platz ist

[Encoder]

Hallo, ich schon wieder :-)
Ich hab da ein div (Navigationsspalte, gefloatet), unter dem ich noch ein Bild anbringen will. Dieses Bild soll die Navispalte nach unten sozusagen abschließen, ist aber nur Deko.
Dieses Bild soll NICHT die Seitenhöhe beeinflussen und evtl. einen Scrollbalken beeinflussen.
Soll heißen, das Bild soll sichtbar sein soweit eben möglich. Wenn es unter die vom Rest der Seite bestimmte Höhe rutscht, soll das ignoriert werden.
Geht denn sowas?

[dedlfix]

Hi!

Ich hab da ein div (Navigationsspalte, gefloatet), unter dem ich noch ein Bild anbringen will. Dieses Bild soll die Navispalte nach unten sozusagen abschließen, ist aber nur Deko.

Ein Fall für ein Hintergrundbild.

Soll heißen, das Bild soll sichtbar sein soweit eben möglich. Wenn es unter die vom Rest der Seite bestimmte Höhe rutscht, soll das ignoriert werden.
Geht denn sowas?

Ja, mit den CSS-Optionen für Hintergrundbilder sollte das möglich sein.

Lo!

[Gunnar Bittersmann]

@@dedlfix:

nuqneH

Ja, mit den CSS-Optionen für Hintergrundbilder sollte das möglich sein.

Wie?

Qapla'

[Encoder]

Und wie stell ich das an?
Dazu müsste ich ja erst mal ein Element haben das dieses Hintergrundbild gesetzt bekommt. Das muss so groß sein dass das Bild rein passt. Und damit hätte ich wieder etwas das den Platz auf der Seite auf jeden Fall anfordert.

[dedlfix]

Hi!

Dazu müsste ich ja erst mal ein Element haben das dieses Hintergrundbild gesetzt bekommt.

Das hast du doch, du willst doch eins damit abschließen.

Das muss so groß sein dass das Bild rein passt. Und damit hätte ich wieder etwas das den Platz auf der Seite auf jeden Fall anfordert.

Nein, Hintergrundbilder haben die Eigenschaft, dass sie, wenn sie zu groß sind, nur den vorhandenen Raum ausfüllen und dann abgeschnitten werden.

Lo!

[Encoder]

Nee nicht ganz. Ich wollte das Bild unterhalb der Navigation haben. Also praktisch wenn unter der Navi noch Platz bis zum unteren Rand des Fensters ist, soll da das Bild soweit angezeigt werden wie möglich.

[ChrisB]

Hi,

Nee nicht ganz. Ich wollte das Bild unterhalb der Navigation haben. Also praktisch wenn unter der Navi noch Platz bis zum unteren Rand des Fensters ist, soll da das Bild soweit angezeigt werden wie möglich.

Konkrete Vorschläge gibt's ggf. bei konkretem Code.

MfG ChrisB

[Encoder]

Konkrete Vorschläge gibt's ggf. bei konkretem Code.

Das ist schwer, ich hab nicht mal ne Idee für einen aussichtsreichen Ansatz.
Mal ein runtergebrochenes Beispiel vom Aufbau der Seite, wer damit rumspielen will.

<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.

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.

[ChrisB]

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

[Encoder]

Ja das scheint also wirklich nicht ganz so trivial zu sein. Ich scheine ein Talent für solche Ideen zu haben.
Danke für die Ansätze, da arbeite ich mich mal ein.
Paralell dazu lass ich mal den Gedanken zu, obs wirklich so schlimm aussehen würde wenn dieses Bild dann halt doch immer sichtbar wäre :-)

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Konkrete Vorschläge gibt's ggf. bei konkretem Code.

?? Ich fand die Aufgabenstellung konkret genug: Ein Element (wenn es dazu Codes bedarf: <foo>Lorem ipsum dolor sit amet.</foo>) soll unterhalb seines Inhalts ein Hintergrundbild bekommen wie bei
foo { background: url(bar) no-repeat left bottom; padding-bottom: 42px }

Das aber nur, wenn es der Platz zulässt. Es soll deswegen keinen Scrollbalken erzeugen, wenn es sonst nichts zu scrollen gibt. Damit fällt die Lösung mit padding-bottom aus.

Ohne zusätzliches Markup sehe ich auch (noch?) nicht, wie das allein mit CSS ginge.

Qapla'

[ChrisB]

Hi,

Das aber nur, wenn es der Platz zulässt. Es soll deswegen keinen Scrollbalken erzeugen, wenn es sonst nichts zu scrollen gibt. Damit fällt die Lösung mit padding-bottom aus.

Womit sich absolute Positionierung empfiehlt.

Ohne zusätzliches Markup sehe ich auch (noch?) nicht, wie das allein mit CSS ginge.

Siehe mein Vorschlag - mit den Einschränkungen (bzw. der - Höhe des letzten Navigationselements) dürfte man in der Praxis vermutlich leben können; bei absolut positioniertem Footer bspw. hat man ja idR. genau das gleiche Problem auszumerzen.

MfG ChrisB

[dedlfix]

Hi!

Nee nicht ganz.

Das bezieht sich jetzt auf welche Aussage genau? Unnsinnig viel zu zitieren ist genausowenig hilfreich wie der Komplettverzicht.

Ich wollte das Bild unterhalb der Navigation haben. Also praktisch wenn unter der Navi noch Platz bis zum unteren Rand des Fensters ist, soll da das Bild soweit angezeigt werden wie möglich.

Ja. Dann mach mit padding-bottom Platz im Navigationselement und platziere das Hintergrundbild an ebendiesen Platz. Hätte ich jetzt gesagt.

Aber jetzt wird mir dein Problem deutlicher als ich es aus dem Ausgangsposting herausgelesen habe. Der Fensterrand soll das Bild "clippen". Dafür weiß ich keine alleinige CSS-Lösung, nur eine, die mit Javascript den Platz berechnet und dann die CSS-Werte setzt.

Lo!

[dedlfix]

Hi!

Der Fensterrand soll das Bild "clippen". Dafür weiß ich keine alleinige CSS-Lösung, nur eine, die mit Javascript den Platz berechnet und dann die CSS-Werte setzt.

Positionierung war ein gutes Stichwort. Basierend auf ChrisBs HTML-Code biete ich dieses CSS an:

* {  
  margin: 0;  
  padding: 0;  
}  
#container {  
  position: relative;  
  background: black;  
}  
#menu {  
  width: 200px;  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  background: url(http://de.selfhtml.org/grafik/anzeige/fotos/foto4.jpg) no-repeat bottom;  
}  
#menu li {  
  background: yellow;  
}  
#content {  
  margin-left: 200px;  
  background: lime;  
}

Lo!