nicht angemeldet
Linkbündige Ausrichtung von ul und p nach span mit 'float:left'
Gunnar Bittersmannp und ul untereinander werden korrekt linksbündig angezeigt. Sobald beide aber hinter einem
<span ... style="float:left; ...
erscheinen, sind die Punkte der ul-Aufzählung nicht mehr linksbündig mit dem p-Block (IE 8) - s. Screenshot:
Was muss im Quellcode geändert werden, um dies zu erreichen?
Im folgenden die betroffenen html- und css-Befehle - beispielhaft zusammengebaut in eine selbständige html-Datei.
Anmerkung: Der html-Code wird aus einer Programmierung heraus automatisch generiert, also könnten innerhalb der Programmierung nur ALLE p oder ul geändert werden, da es kein Unterscheidungsmerkmal für ein ul gibt, dass zufällig neben einem Bild "landet". Die width-Angabe wird ebenfalls automatisch an allen Stellen generiert in Abhängigkeit vom im jeweiligen Fall vorliegenden Bild.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css" media="all">
span.fliesstext-image-mit-untertitel-float {
margin-right: 20px !important;
margin-bottom: 10px !important;
}
img.fliesstext-image-float {
margin-bottom: 5px;
}
span.fliesstext-image-untertitel-float {
margin:0px;
color: #999;
font-size:12px;
}
#MainContent ul {
list-style-image: url(grafiken/ul-li.gif);
margin-left:15px;
}
#MainContent ul li {
}
</style>
</head>
<body>
<div id="MainContent">
<p>text:</p>
<ul><li>text text text text text text text text text text</li><li>text text text text text text text text</li></ul>
<p>text.</p>
<p><span class="fliesstext-image-mit-untertitel-float" style="float:left;width:150px;"><img src="bild.jpg" alt="bild" title="bild" class="fliesstext-image-float" width="150" height="100" /><br><span class="fliesstext-image-untertitel-float">text text</span><br></span></p>
<p>text</p>
<ul><li>text text</li><li>text text text text text text text text text text text text</li><li>text</li><li>text</li><li>text</li><li>text</li><li>text</li></ul>
<p>text text text text</p>
<ul><li>text</li><li>text</li></ul></div>
</body>
</html>
Die Hinweise im Forum zum Thema (auf die ich nicht mehr antworten konnte, da archiviert) z.B. http://forum.de.selfhtml.org/archiv/2009/10/t191593/#m1277673 helfen in meinem Fall nicht weiter.
Herzlichen Dank für eine helfende Antwort!
-
Om nah hoo pez nyeetz, bird!
Wenn ich dich richtig verstehe, möchtest du, dass die ul erst unter dem Bild angezeigt wird:
clear: left;Matthias
--
-
@@apsel:
nuqneH
Wenn ich dich richtig verstehe, möchtest du, dass die ul erst unter dem Bild angezeigt wird:
clear: left;Das würde die Frage aufwerfen, warum 'float: left' gesetzt wird, wenn kein Floating erwünscht ist.
Vielleicht soll die Liste ja auch komplett daneben stehen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Danke für die bisherigen Anmerkungen - zur Klärung des von mir benötigten Ergebnisses:
Die Liste soll neben der Grafik (inkl. Grafikuntertitel) stehen und, wenn das Grafikende erreicht ist, automatisch darunter fortgeführt werden; Ergebnis soll sein (s. Grafik):
Die "SPIEGELSTRICHE" sollen also an der blauen Linie (hier nur erläuternd eingezeichnet, diese soll auf der Webseite natürlich nicht erscheinen) linksbündig angeordnet sein und nicht der Beginn des TEXTES (was bedeutet, dass die Spiegelstriche links von der blauen Linie erscheinen) wie s. in der Grafik innerhalb meiner ersten Nachricht dieses Threads, die das erreichte, aber unerwünschte Ergebnis zeigt.Vielleicht soll die Liste ja auch komplett daneben stehen.
-> Die im Link genannten Hinweise zu
ullösen das Problem nicht:
wederoverflow: hidden;
nochlist-style-position:inside;-
Om nah hoo pez nyeetz, bird!
also bei mir (XP, FF3.6) sieht die Seite im Originalquelltext so aus:
mit overflow: hidden so:
Matthias--
-
Danke für deinen weiteren Vorschlag, apsel!
overflow:hidden;inul
Im FF 3.6.9 ist dadurch zwar erreicht, dass die Spiegelstrich nicht mehr links aus dem darüberliegenden Absatz herauskragen (neben der Grafik), sie können aber mittels margin-left danach leider nicht korrekt nach linksbündig angeordnet werden, da das margin-left nur Auswirkungen auf die normalen ul hat, nicht auf die neben der Grafik...
Unterschied ist auch, dass damit die ul komplett neben der Grafik gelistet wird und nicht mehr von rechts daneben nach darunter floated.
Der IE 8.0.6 reagiert gar nicht darauf - egal, ob mit oder ohne margin-left... (Der Screenshot beinhaltet hiermargin-left:1em;, das aber nur Auswirkungen auf die normalen ul hatte).-
Hi,
Im FF 3.6.9 ist dadurch zwar erreicht, dass die Spiegelstrich nicht mehr links aus dem darüberliegenden Absatz herauskragen (neben der Grafik), sie können aber mittels margin-left danach leider nicht korrekt nach linksbündig angeordnet werden, da das margin-left nur Auswirkungen auf die normalen ul hat, nicht auf die neben der Grafik...
Doch, margin für UL wirkt - aber anders, als du dir das vorstellst.
Das UL-Element befindet sich als Block-Element nach wie vor unterhalb der Fläche des gefloateten Bildes - lediglich die inline-Inhalte fließen neben dem Bild her.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Om nah hoo pez nyeetz, bird!
für dieses Ergebnis
verwende man
ul {list-style-position: inside;das bewirkt, dass die rechts neben den Bildern stehenden li-Elemente am ggf. ebenfalls rechts neben dem Bild stehenden Absatz linksbündig ausgerichtet werden.
und
margin-left: -2.5em;}das sorgt dafür, dass die anderen passen.
Ggf müssen für andere Browser andere Werte verwendet, oder die Listen normalisiert werden, da die Einrückung möglicherweise im Browserstylesheet anders realisiert wird.
Matthias
--
-
Om nah hoo pez nyeetz, apsel :-)
ul {list-style-position: inside;
das bewirkt, dass die rechts neben den Bildern stehenden li-Elemente am ggf. ebenfalls rechts neben dem Bild stehenden Absatz linksbündig ausgerichtet werden.Super, genau dieses Verhalten wäre das angestrebte. Leider hat genau dieses inside aber ja die Auswirkung, dass längere Zeilen umgebrochen werden so, dass die zweite Zeile linksbündig des Spiegelstriches und nicht linksbündig zum Text darüber ausgerichtet wird, was hier ja nicht gewünscht ist (deshalb in meinem Beispiel der li-Eintrag mit viel text neben der Grafik).
margin-left: -2.5em;}Bewirkt nur eine Änderung bei den normalen ul, das ul neben der Grafik reagiert nicht darauf, was für FF 3.6.9 zum (bis auf die erwähnten langen li-Einträge) korrekten Endergebnis führt (s. Screenshot hierüber) :-), da das nebenstehende ul alleine mittels o.g. inside schon korrekt ausgerichtet war.
Aber im IE 8.0.6 war es noch nicht korrekt, somit kann mit dem margin-left mit -0.5em - das sich auch hier nur auf die normalen ul auswirkt - kein korrektes Endergebnis erzeugt werden bei mir :-( (s. Screenshot hierunter):
-
Om nah hoo pez nyeetz, bird!
margin-left: -2.5em;}Bewirkt nur eine Änderung bei den normalen ul, das ul neben der Grafik reagiert nicht darauf, was für FF 3.6.9 zum (bis auf die erwähnten langen li-Einträge) korrekten Endergebnis führtDas ist korrekt, da die anderen ja auf das float "reagieren" müssen.
Aber im IE 8.0.6 war es noch nicht korrekt, somit kann mit dem margin-left mit -0.5em - das sich auch hier nur auf die normalen ul auswirkt - kein korrektes Endergebnis erzeugt werden bei mir :-(
s.o. und
Ggf müssen für andere Browser ...
Matthias
--
-
Hi,
ul {list-style-position: inside;Super, genau dieses Verhalten wäre das angestrebte. Leider hat genau dieses inside aber ja die Auswirkung, dass längere Zeilen umgebrochen werden so, dass die zweite Zeile linksbündig des Spiegelstriches und nicht linksbündig zum Text darüber ausgerichtet wird, was hier ja nicht gewünscht ist (deshalb in meinem Beispiel der li-Eintrag mit viel text neben der Grafik).
Vielleicht ist es einfacher, wenn du auf list-style-image verzichtest, und stattdessen mit einem positionierten Hintergrundbild für die LI arbeitest.
Abstand des Textes regelst du dann über padding-left.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Das würde die Frage aufwerfen, warum 'float: left' gesetzt wird, wenn kein Floating erwünscht ist.
Weil möglicherweise die Absätze neben dem Bild stehen sollen, die Listen aber nicht?
Matthias
--
-
-