nicht angemeldet
<ul> neben floatendem <img>
Hallo alle,
ich möchte meine Listen so formatieren, dass die Bullets links nicht so weit eingerückt sind wie es die Browser standardmäßig tun. Deshalb habe ich margin und padding entsprechend angepasst. Nun habe ich aber ein Problem, wenn diese Liste neben einem links floatenden Bild steht:
-----------
<p>Normaler Text.</p>
<ul style="margin: 0px; padding: 0px; margin-left: 15px; list-style-type: square;">
<li>Soweit</li>
<li>OK</li>
</ul>
<img src="http://de.selfhtml.org/src/logo.gif" style="float: left; border: 1px solid black;">
<ul style="margin: 0px; padding: 0px; margin-left: 15px; list-style-type: square;">
<li>Bullets</li>
<li>im</li>
<li>Bild</li>
</ul>
-----------
Die erste Liste ist da, wo ich sie haben will: Auf Linie mit normalem Text. Die zweite Liste steht neben dem Bild -- und die Bullets hängen im Bild. Und zwar in FF, IE und Opera, es muss also an mir liegen :-)
Wie muss ich margin, padding und evtl. andere Attribute setzen, damit das nicht passiert?
Danke für alle Tipps,
-- snorri
-
Hallo snorri,
füg doch mal in Deinem 'img'-Element ein margin-right ein:
<img src="http://de.selfhtml.org/src/logo.gif" style=" margin-right:25px; float: left; border: 1px solid black;">
Katharina
-
Hallo Katharina,
das wäre natürlich ein guter Workaround für Einzelfälle. Ich habe nur das Problem, dass diese Seiten (viele) mit Typo3's HTML-Editor erstellt werden, und zwar von jemandem, der sich nicht mit HTML / CSS auskennt und dem ich nicht zumuten kann, ständig rechte Abstände einzugeben. Ich muss das Problem irgenwie mit CSS in den Griff bekommen.
Da alle drei Browser sich gleich verhalten, kann es ja eigentlich kein Bug sein, oder? Dann muss es da doch einen Weg geben ...
-- snorri
-
Hallo Snorri,
Ich muss das Problem irgenwie mit CSS in den Griff bekommen.
dann gib dem Img eine CSS Klasse und schreib das 'margin-right' direkt ins CSS:
<img class="bildNebenBullets" .../>
.bildNebenBullets {
margin-right:25px;
}oder versteh ich Dich irgendwie falsch?
Katharina
-
Hallo Snorri,
das ist ein bekanntes Problem, ich hatte das glaub ich mal gelöst in dem ich für die modernen Browser die Liste noch dies Eigenschaft Tabe gegeben habe und der Liste im IE meine ich die Eigenschaft Zoom.
Finde aber jetzt nicht auf dieschnelle das CSS.
Aber Du findest auch genug dazu im Internet als auch hier im Forum.
Liebe Grüße,
Bernd
-
Hallo Snorri
jetzt habe ich es wieder:
IE:
ul {zoom: 100%;}Firefox
ul{ display: table;}Liebe grüße,
Bernd
-
Ah, das bringt mich schon mal einen Schritt weiter! Im FF gehts jetzt nämlich.
...
OK, im IE hab ich es jetzt auch: Man muss zusätzlich statt "margin-left: 15px;" "padding-left: 15px;" nehmen, sonst verschwinden im IE die Bullets.
Mysteriöse Sache ...
Danke @alle für die sachdienlichen Hinweise!
-- snorri
-
Hallo,
du kannst auch bei der zweiten Liste mit float experimentieren:
ul#zwei {float:left;margin-left:1px;padding-left:15px;}
Grüsse
Cyx23
-
-
-
-
Hallo Katharina!
Daran habe ich auch gedacht, nur sind nicht alle Bilder linksfloatend. Manche floaten auch rechts. Und die haben alle die gleiche CSS-Klasse, d.h. wenn ich denen per Klasse einen rechten margin gebe, verrutschen auch die, die rechts floaten. Und ich bekomme Typo3 anscheinend nicht dazu, den linken eine andere Klasse zu geben als den rechten ...
Ist das denn wirklich ein CSS-Bug, den man anders nicht unter Kontrolle bekommt?
-- snorri
-
Hallo,
Ist das denn wirklich ein CSS-Bug, den man anders nicht unter Kontrolle bekommt?
Du musste der Box neben dem Bild overflow:auto (Browser), sowie HasLayout (IE) geben. Das geht so.
mfg. Daniel
-
-
-
-