nicht angemeldet
Hallo,
Wie bekomme ich denn meinen restlichen Text nun neben das Bild und nicht darunter?!? listenexperiment
Wozu Du die line-height von ul#Buchliste auf 19em gesetzt hast, will mir nicht so recht einleuchten.
Du hast eine solche Grundstruktur:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
* { margin:0; padding:0; }
html { background-color:#00AFFF; padding:1%; }
body { border:1px solid; width:600px; margin:auto; background-color:#EFEFEF; }
h1 { background-color:#FF7F7F; text-align:center; }
p#fusszeile { background-color:#FF7F7F; text-align:center; }
ul#navi { float:left; width:20ex; margin:1ex; list-style-type:none; background-color:#00AFAF; }
ul#buecherliste { list-style-type:none; margin:1ex; margin-left:22ex; background-color:#00FFAF; }
ul#buecherliste li { }
ul#buecherliste li img { width:100px; height:150px; }
</style>
<!--[if IE]>
<style>
ul#navi { display:inline; } /*gegen double margin bug*/
ul#buecherliste { height:1px; } /*hasLayout gegen 3px-bug*/
</style>
<![endif]-->
</head>
<body>
<h1>Verlag</h1>
<ul id="navi">
<li>Navi 01</li>
<li>Navi 02</li>
<li>Navi 03</li>
<li>Navi 04</li>
</ul>
<h2>Buecherliste</h2>
<ul id="buecherliste">
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger und auch mal noch laenger</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger und auch mal noch laenger und noch laenger noch laenger noch laenger</li>
</ul>
<p id="fusszeile">Fußzeile</p>
</body>
</html>
Nun soll der Text neben den Bildern offensichtlich mehrzeilig neben dem jeweiligen Bild stehen. Das heißt, das Bild muss aus dem Textkontext heraus, in dem es wie ein Buchstabe auf der Textzeile betrachtet wird. Das Vergrößern der Zeilenhöhe bringt da nichts.
Wie bekommt man das Bild heraus? Normalerweise mit float. Allerdings haben wir float ja schon für die UL#navi gesetzt. Ein float nun auch noch für die Bilder ergibt Probleme mit dem clear, da dieses auch float in der Navigation aufheben würde (clear nur für _ein bestimmtes_ float gibt es nicht). Man könnte zwar extra Elemente für clear einfügen, aber das ist Pfusch. Außerdem müsste das erste clear-Element nach dem ersten Bildtext stehen, um das nächste Bild nach unten zu zwingen. Was aber, wenn die Navigation mal höher als das erste Bild wird? Dann fängt das zweite Bild erst unter der Navigation an. Richtig gut bekommt man es also mit noch einem float nicht hin.
Was könnte man noch tun? Absolute Positionierung der Bilder wäre möglich. Hierzu müsste man ein Element haben, an welchem sich diese absolute Positionierung ausrichten könnte. Im Beispiel wären das die LI-Elemente der UL#buecherliste.
Wir ergänzen also das CSS vom obigen Beispiel um:
ul#buecherliste li { position:relative; height:150px; padding-left:100px; }
ul#buecherliste li img { width:100px; height:150px; position:absolute; top:0; left:0; }
Erläuterung:
Die LI-Elemente der UL#buecherliste werden durch position:relative in die Lage versetzt, als Bezugsboxen für position:absolute zu fungieren. Sie werden mindestens so hoch wie die Bilder und der Textinhalt wird über padding-left mindestens um die Breite der Bilder eingezogen. Die Bilder werden dann links oben in den LI-Boxen platziert.
Das funktioniert natürlich nur, wenn die Bilder in etwa alle gleich groß sind. Das scheint ja bei Dir so zu sein.
Eine andere Variante wäre, float für die Bilder und clear für die LI-Elemente der UL#buecherliste zu nutzen und dann aber die Navigation absolut zu positionieren. Dazu müsste BODY mit position:relative als Bezugsbox vorbereitet werden. Diese Variante ist aber meiner Meinung nach schlechter, weil sie spezielle Berechnungen für den top-Wert der absolut positionierten Navigation voraussetzt, die wiederum nicht für alle Browser gleich gelten werden.
viele Grüße
Axel
Gunnar Bittersmann
MudGuard
Der Martin