List-style: outside Problem

**xkoy** · 29.12.2010, 12:54

Servus,

irgendwie steh ich aufm Schlauch, schaut mal das Bild im Anhang.

mit "inside" schmeisst es mir ja den text drunter, weil die "Disc also der Punkt" eingerückt wird, das ist aber Mist da der Text nicht mehr bündig ist.

Wenn ich "outside" nehme, ist der punkt Links komplett raus. margin und padding helfen da auch nicht...

Wo ist der haken ?

**Harry** · 29.12.2010, 13:16

Hallo xkoy,

die list-style-position muss im Normalfall nicht explizit angegeben werden. Mit dem Standard outside und entsprechenden margins für die Liste bzw. paddings für die Listenpunkte sollten Listen so wie Du es wünschst darstellbar sein.

Um Deinen Fall genauer zu untersuchen, wäre es hilfreich, einen Blick auf die Umgebung zu werfen, aber wahrscheinlich arbeitest Du lokal.

Gruß
Harry

**xkoy** · 29.12.2010, 13:55

Hi Harry,

das dachte ich auch, aber es funkt nich.

Arbeite online: http://pixelgenau.dyndns.org/ausstattung-gerlos.html

**Harry** · 30.12.2010, 13:32

Ah, ein Spezialfall: Listen neben einem gefloateten Bild.

Damit nicht nur der Text sondern auch die Listenzeichen bündig zum Text neben das Bild platziert werden, kannst Du für die Liste display:table einstellen. Dies kennt auch der IE6, sofern die Eigenschaft hasLayout gegeben ist, was man z. B. durch zoom:100% erreicht. Stelle mal für die Liste und die Listenpunkte folgendes ein:

Code:

.ce_text ul
{
	display:table;
	margin:0;
	padding:9px 0;
}

.ce_text li
{
	margin-left:20px;
}

*html .ce_text li
{
	zoom:100%;
}

Der Nachteil dieser Methode ist, dass unsortierte Listen, die nicht neben gefloateten Bildern platziert sind, eingerückt werden. Diese hier nicht, weil durch das margin-left des Listenpunktes lediglich der Abstand zum Bild hergestellt wird. Das Problem ließe sich duch eine extra Klasse aufheben, oder man definiert ein Hintergrundbild für die Listenpunkte. Auf meiner Website ist der Listenpunkt als Grafik angegeben:

Code:

.ce_text li
{
	padding-left:16px;
	background:url("tl_files/boldt_media/layout/bullet.gif") left top no-repeat;
	list-style-type:none;
}

Gruß
Harry

**xkoy** · 30.12.2010, 22:13

Genau floats sind Links davon, ok wollte eh ein Bild statt der "Disc" nehmen, danke Dir werd das morgen testen !

Danke !!

**wotank** · 31.12.2010, 11:43

Moin,

Listenzeichen funktionieren browserübergreifend nur zuverlässig, wenn das Listenzeichen als HG-Grafik dem li gegeben wird.
list-style-image z.B. hat auch die Nachteile des automat. Listenzeichens.

Eine Liste mit HG-Grafiken als Listenpunkte nebem einem gefloateten Bild ist kein Problem.
display:table; braucht man da wirklich nicht.

man sollte nur drauf achten bei einem z.B. links gefloateten Bild das erforderliche margin-left der ul und nicht li zu geben (wg dem FF 2 !).
Das margin-left muss ziemlich groß sein, da sich die ul ja auch unter dem Float erstreckt (nur der Text weicht dem Float aus!).

**Harry** · 31.12.2010, 12:22

Das margin-left muss ziemlich groß sein, da sich die ul ja auch unter dem Float erstreckt (nur der Text weicht dem Float aus!).

Prima! Wie groß soll's denn sein? So groß wie dieses Bild hier? Oder vielleicht doch besser so groß wie ein anderes Bild?

Dass es leichter ist, Hintergrundgrafiken zu verwenden, habe ich bereits erwähnt. Aber vielleicht will das nicht jeder. Außerdem gibt es auch nummerierte Listen. Spätestens dann wird man sich nach einer entsprechenden Lösung umsehen müssen.

**wotank** · 31.12.2010, 15:49

Zitat von Harry

Prima! Wie groß soll's denn sein? So groß wie dieses Bild hier? Oder vielleicht doch besser so groß wie ein anderes Bild?

Was ist los?
Schlecht drauf?

Die Lösung mit display:table; ist suboptimal für Fragende die sich nicht so gut auskennen, weil Sie zu viele Haken hat.
Dein Codeschnipsel zum CSS-Tabellenmodell war leider auch unvollständig.

Das mit der HG-Grafik funktioniert problemlos bis inkl. IE6 und ist relativ easy. Ob ein Bild daneben ist oder nicht ist für die Umsetzung wurscht.

**Harry** · 31.12.2010, 16:21

Lieber wotank,

hier geht es um die Darstellung von Listen inkl. Listenzeichen neben einem gefloateten Bild. Natürlich unabhängig davon, wie breit das Bild ist. Deine CSS-Lösung per margin-left ist daher unbrauchbar. Wie so oft gibt es auch hier mehrere Lösungen, wenn Dir display:table nicht gefällt.

Gruß
Harry

**wotank** · 31.12.2010, 18:12

Zitat von Harry

Lieber wotank,
hier geht es um die Darstellung von Listen inkl. Listenzeichen neben einem gefloateten Bild. Natürlich unabhängig davon, wie breit das Bild ist. Deine CSS-Lösung per margin-left ist daher unbrauchbar. Wie so oft gibt es auch hier mehrere Lösungen, wenn Dir display:table nicht gefällt.

Gruß
Harry

äh.....*hüstel.... die Breite des Bildes ist bekannt. Warum sollte auch jemand ein Bild mit unbekannter Breite auf seine Site hieven? Es ist auch nirgendwo gepostet worden das sie nicht bekannt ist.

Deshalb ist das mit den margin-left sehr wohl brauchbar.
Es ist sogar oft ein nützlicher Hinweis, weil die nicht so Erfahrenen ein margin neben einem Float definieren und sich dann wundern warum nix passiert.

Das mir display:table nicht gefällt habe ich auch nirgendwo gepostet, höchstens das die Lösung für die nicht so Erfahrenen nicht zu empfehlen ist.
Mit unvollständigen Codeschnipseln, wie in deiner display:table-Variante ist dem Fragenden sicher nicht gedient.

**Harry** · 01.01.2011, 14:32

Lieber wotank,

bevor wir uns weiter im Kreis drehen, lassen wir es dabei bewenden. xkoy hat nun zwei Lösungsansätze und hat die Wahl. Vielleicht schreibe ich mal ein ausführlicheres Tutorial für diesen, wie ich finde, interessanten und gar nicht mal so exotischen Fall.

Gruß
Harry

**xkoy** · 02.01.2011, 12:04

Kein Streit :P

Ja margin-left greift ja, doch was ist dann mit den LI die KEIN Bild links haben ? margin-left: 300px kanns ja auch nicht sein.

Ich muss das jetzt mal testen

**xkoy** · 02.01.2011, 13:08

Also nen großen margin-left zu setzen ist ja irgendwie total Sinnlos, schaut mal in den link.

Die Bilder sind ja ab und an immer unterschiedlich groß, von den normalen listen mal abgesehen, die haben jetzt alle ein margin-left von ca 300px...

Es sollte sich schon dem linken DIV anpassen...

**xkoy** · 02.01.2011, 13:18

So fertig, der ul nen overflow: hidden, und alles wird gut, hoffe ich

http://pixelgenau.dyndns.org/winter-westendorf.html

**planepix** · 02.01.2011, 13:27

Hallo xkoy,

solange einzeilig ja, bei 2 Zeilen hängt der Auflistungspunkt "mittendrin", wie in der Seite weiter oben zu sehen ist:
http://pixelgenau.dyndns.org/ausstattung-gerlos.html

Temporär diese Zeile geändert, dann sitzt es auch bei 2-zeiligen Zeilen:

Code:

#main li {background: url(../img/point.jpg) no-repeat 0 6px; padding-left: 14px; margin-bottom: 3px;}

**xkoy** · 02.01.2011, 14:01

Hi, danke für deinen Tipp, hab ich noch garnicht entdeckt

Danke !

**planepix** · 02.01.2011, 14:06

Gerne xkoy.

Auch im IE 8, Chrome 8 und Safari 5 (alle WIN 7) sieht es gut aus

**xkoy** · 02.01.2011, 14:07

Ah Perfekt

IE6 las ich mal außen vor :P

Danke !

**Harry** · 02.01.2011, 15:55

Hallo xkoy,
schön, dass die Sache für Dich gelöst ist. Solange Du unnummerierte Listen mit Hintergrundbildern verwendest, funktioniert auch ul {overflow: hidden}. Ohne Hintergrundbilder bzw. bei nummerierten Listen wird's dann etwas kniffliger.

Gruß
Harry