nicht angemeldet
Margin und Float
Hallo,
ich habe ein Problem mit dem Abstand einer Liste, die rechts neben einem Bild liegen soll.
Ich habe also das Bild mit der Eigenschaft float:left versehen, gleichzeitig hat es ein margin-right von 1 em. Rechts neben dem Bild steht nun ein Absatz und darunter eine Liste. Der Text hat also einen Abstand von 1 em zum Bild. Die darunterliegende Liste ebenfalls, aber nicht die Aufzählungspunkte, sondern der erste Buchstabe.
Wenn ich den Abstand der Liste zum Bild vergrößern möchte, muss sie einen sehr großen margin-left zugewiesen bekommen, da sich diese Anweisung nicht auf den rechten Rand des Bildes, sondern auf den linken Rand des Containers bezieht.
Wie kann ich also den Abstand der Liste zum Bild vergrößern, ohne auch den Abstand des Absatzes zu vergrößern?
Auch SELFHTML und Google haben mich nichts finden lassen.
Dabei möchte ich der Liste eben nicht wie oben genannt den sehr großen Abstand nach links zuweisen, da das Bild ja eine feste Breite in Pixeln hat, alles andere aber in em ist.
Ich hoffe, dass ich mich einigermaßen verständlich ausgedrückt habe, sonst versuche ich gerne das zu konkretisieren ;)
Danke,
Christian
-
Hallo,
Wie kann ich also den Abstand der Liste zum Bild vergrößern, ohne auch den Abstand des Absatzes zu vergrößern?
Auch SELFHTML und Google haben mich nichts finden lassen.
Hmmm, glaub ich nicht.
Dabei möchte ich der Liste eben nicht wie oben genannt den sehr großen Abstand nach links zuweisen, da das Bild ja eine feste Breite in Pixeln hat, alles andere aber in em ist.
Ich hoffe, dass ich mich einigermaßen verständlich ausgedrückt habe, sonst versuche ich gerne das zu konkretisieren ;)
Quellcode
html und css bitteso schwer kann das nicht sein ;)
-
Okay, dann hier der Quellcode:
HTML:
<div id="content">
<h2>ÜBERSCHRIFT</h2>
<p />
<div class="imgleft"><img src="bild.jpg" alt="Bild" /></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus malesuada. Nulla ut turpis. Donec massa enim, vestibulum et, egestas sed, feugiat id, purus. Phasellus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum tincidunt malesuada risus. Ut sem metus, porttitor tempor, gravida ut, tincidunt sit amet, velit. Vestibulum vel dolor. Donec at libero eget odio tincidunt adipiscing. Phasellus congue felis quis risus. Mauris imperdiet, nulla suscipit volutpat lobortis, libero lorem lobortis felis, non bibendum eros mauris interdum purus. Cras quis arcu. Morbi faucibus. Nulla eros dui, viverra sit amet, rhoncus eget, consequat sit amet, est. Aenean ac libero. Vestibulum arcu leo, aliquet id, dictum eget, laoreet a, dolor. Phasellus odio. Vivamus gravida velit et libero. Etiam interdum tincidunt justo. Nulla ac magna.
</p><ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>
</div>CSS: (relevante Stellen)
p {display:block; margin: 1em 0 1em 0;}
li {margin-bottom: .3em;}
div.imgleft{float:left; border: none; padding: .3em; margin: .5em 1em 0 0;}So hat der Text im <p> den Abstand von 1 em zum Bild, die Liste aber mit dem ersten Buchstaben, nicht dem Punkt.
Danke,
Christian-
p {display:block; margin: 1em 0 1em 0;}
li {margin-bottom: .3em;}
div.imgleft{float:left; border: none; padding: .3em; margin: .5em 1em 0 0;}So hat der Text im <p> den Abstand von 1 em zum Bild, die Liste aber mit dem ersten Buchstaben, nicht dem Punkt.
Also wenn du den Abstand der Liste an sich verändern willst und nicht den der Listenelemente musst du das ul verändern
ul {margin-top: 1em;}
Oder lieg ich da falsch i´m Verständnis?
-
Hi!
i´m Verständnis?
Nice to meet you - I'm Peter!
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Hi!
i´m Verständnis?
Nice to meet you - I'm Peter!
Wie nice to meet you, das ist ein klarer Syntaxfehler - Ich hatte jetzt schon ne Fehlermeldung erwartet
-
Hi!
Hi!
i´m Verständnis?
Nice to meet you - I'm Peter!
Wie nice to meet you, das ist ein klarer Syntaxfehler - Ich hatte jetzt schon ne Fehlermeldung erwartet
Ich bin kein Parser[1] - Fehlermeldungen bekommst Du von mir nicht;)
off:PP
[1] Obwohl ich äußerlich Ähnlichkeit mit einem Perser habe.
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
-
-
Oder lieg ich da falsch i´m Verständnis?
Ja, das li hab ich nur so mit reinkopiert, das ist nur um den Zeilenabstand zwischen den einzelnen Punkten etwas zu erhöhen. Ich möchte etwas, das das tut, was margin-left bei <ul> eigentlich tun sollte, nämlich den Abstand zum Bild, welches links ist, zu erhöhen. Aber irgendwie bezieht sich das margin, welches ich ausprobiert habe, sich nicht auf das div mit dem Bild, sondern auf den übergeordneten Container. Eigentlich sollte margin ja den Abstand zum benachbarten Objekt angeben, aber irgendwie funktioniert das nicht richtig. Hängt das damit zusammen, dass das div mit dem Bild floatet? Bezieht sich margin nicht auf floatende Elemente? Und wie kann man dafür sorgen, dass es dies tut?
Trotzdem danke,
Christian
-
Hi,
Hängt das damit zusammen, dass das div mit dem Bild floatet? Bezieht sich margin nicht auf floatende Elemente?
gut erkannt. Auch mit Float nimmst Du Elemente aus dem Fluss - lediglich deren Inhalte werden "umflossen". Das erkennst Du sehr gut http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell@title=hier.
freundliche Grüße
Ingo
-
-
-
-