|
|||
Listen-Problem mit list-style-position:outside
Hallo,
ich bin langsam echt am verzweifeln, hab schon einiges im Internet gegooglet und auch hier im Forum gesucht, vielleicht findet sich ja dennoch eine Lösung (da ich nicht so bewandert in Web-Design bin, will ich nicht ausschließen, dass ich evtl. auch was übersehen habe): Also ich habe eine nummerierte Liste und möchte diese rechts neben einem div-Container in einem gewissen Abstand (z.B. 16 Pixel) darstellen, d.h. der Container wird mit float:left gefloatet. Das ganze sähe z.B. so aus (auszugsweise): HTML-Code:
<html> <head> <title>asdf</title> <style type="text/css"> .fullsection{ width:560px; margin-bottom:16px; } ol.test { list-style-type:decimal; list-style-position:outside; margin-left: 16px; /*bewirkt nichts*/ } </style> </head> <body> <div class="fullsection"> <div style="float:left; padding-right:16px; width:236px; height:355px;"> </div> <p style="margin:0px 0px 16px 0px; line-height:14px;">Das ist ein Test.... </p> <ol class="test"> <li>N1</li> <li>N2</li> </ol> </div> </body> </html> Wenn ich list-style-position auf inside ändere, dann verhält es sich wie gewünscht, d.h. der Abstand wird korrekt eingehalten. Bei outside scheint es aber so, als würde er das glatt ignorieren... Wäre super, wenn mir da jemand weiterhelfen könnte. Oder vielleicht geht das auch einfach prinzipiell nicht (warum auch immer)? Das wäre natürlich auch eine wertvolle Info! P.S. Mein Zielbrowser ist (leider) ausschließlich der IE6, deswegen, falls es hierfür einen Hack oder sowas gibt, ist das auch wunderbar. P.P.S: Das ganze findet in einer dynamischen Umgebung ab, das ist nur ein kleines statisches Beispiel. Geändert von Freecastle (17.02.2009 um 15:51 Uhr) |
Sponsored Links |
|
|||
Bin mir nicht sicher, aber vermutlich wird der linke "Rand" der Liste am Text ausgerichtet und nicht an den Zahlen. Also quasi so, als würdest du keine Liste benutzen. Keine Ahnung, ob das nur beim IE6 so ist. Müsstest du mal in anderen Browsern testen. Ansonsten setze einfach die margin auf einen höheren Wert. Allerdings wird dann auch normaler Text etwas weiter rechts stehen.
Edit: Zitat:
|
Sponsored Links |
|
|||
Ja die Texte sind gleich ausgerichtet, stehen also bündig untereinander.
Es ist so, dass das margin-left (und auch padding-left) gar nicht berücksichtigt wird, egal was da steht... ich kann auch 100px nehmen und es bleibt genau gleich (ebenso bei padding). Verhält sich übrigens im FF3 ebenso. Oder um das Problem andersherum anzugehen: Der Text innerhalb einer Nummerierung soll auch umbrochen werden können, und eben so, dass der Text immer bündig ist, und nicht mit der Nummerierung an sich bündig ist - deswegen auch list-style-positionutside. Wenn ich das auf inside setze dann klappt es wunderbar mit dem Abstand (d.h. margin-left wird berücksichtigt). Wenn man es irgendwie hinkriegen kann, dass man dasselbe Verhalten wie bei outside erreicht, wäre das ebenso ok. P.S. Obiges HTML-Fragment kann man auch bequem direkt per Copy&Paste im Browser ausführen. |
|
|||
Zitat:
BTW: "//" ist kein CSS-Kommentar.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Naja - Outside heißt nunmal, dass die Nummerierung oder die Anstriche außerhalb des Textbereiches sind. Und dann bricht er natürlich auch bündig um.
Und was ist mit padding für die <li> ? Klappt auch nicht? Aber eigentlich müsstest du mit margin eine Liste verschieben können *confused* padding-right im fullsection zu erhöhen, wird nicht gehen oder? dann rutscht ja auch der absatz mit rein. |
|
||||
Hi
Ich habe vor kurzem diesbezüglich in unserem Blog was geschrieben. So grob überflogen sollte das das gleiche Problem betreffen... > zum Eintrag |
|
|||
Upsa, ja sry bin eigtl Java-Entwickler und hatte das noch kurz in den Forumbeitrag reingeschrieben.
Wegen den 300 px, was im Prinzip dasselbe wie hier ist: Zitat:
Zitat:
Zitat:
Vielen vielen Dank! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE 5.5 Listen Problem bei Floating Left | cyshift | CSS | 5 | 19.02.2005 23:04 |
Nochmal Listen Problem | mightym | CSS | 3 | 25.11.2004 15:37 |
IE Problem mit Listen | mightym | CSS | 2 | 18.11.2004 14:56 |
Listen Problem | mightym | CSS | 0 | 15.11.2004 15:57 |
Kleines list Problem | Cane | CSS | 3 | 28.01.2004 00:02 |