Druckbare Version
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 ?
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
Hi Harry,
das dachte ich auch, aber es funkt nich.
Arbeite online: http://pixelgenau.dyndns.org/ausstattung-gerlos.html
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:
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 ul
{
display:table;
margin:0;
padding:9px 0;
}
.ce_text li
{
margin-left:20px;
}
*html .ce_text li
{
zoom:100%;
}
GrußCode:.ce_text li
{
padding-left:16px;
background:url("tl_files/boldt_media/layout/bullet.gif") left top no-repeat;
list-style-type:none;
}
Harry
Genau floats sind Links davon, ok wollte eh ein Bild statt der "Disc" nehmen, danke Dir werd das morgen testen !
Danke !!
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!). ;)
Prima! Wie groß soll's denn sein? So groß wie dieses Bild hier? Oder vielleicht doch besser so groß wie ein anderes Bild?Zitat:
Das margin-left muss ziemlich groß sein, da sich die ul ja auch unter dem Float erstreckt (nur der Text weicht dem Float aus!).
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.
Was ist los?Zitat:
Zitat von Harry
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. ;)
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.Zitat:
Zitat von Harry
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. ;)
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
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 :)
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... :D
Es sollte sich schon dem linken DIV anpassen...
So fertig, der ul nen overflow: hidden, und alles wird gut, hoffe ich :)
http://pixelgenau.dyndns.org/winter-westendorf.html
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;}
Hi, danke für deinen Tipp, hab ich noch garnicht entdeckt :)
Danke !
Gerne xkoy.
Auch im IE 8, Chrome 8 und Safari 5 (alle WIN 7) sieht es gut aus :)
Ah Perfekt :)
IE6 las ich mal außen vor :P
Danke !
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
Ja genau, aber ich nehm eigentlich eh immer "Bilder". Die sind so winzig, passt gut :)
Danke trotzdem für eure Ansätze !