Listen-Problem mit list-style-position:outside

Freecastle · #1 (**permalink**) 17.02.2009, 12:55

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>

Das Problem ist schlicht und ergreifend, dass die Nummerierung viel zu weit links (quasi im div-Container selbst dargestellt wird). Margin und/oder Padding helfen hier leider gar nichts

Beim normalen <p>-Absatz wiederrum verhält es sich normal.
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.

regloh · #2 (**permalink**) 17.02.2009, 13:18

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:

Beim normalen <p>-Absatz wiederrum verhält es sich normal.

Hatte ich gerade übersehen. Steht denn der Text im Absatz und der aus der Liste untereinander?

Freecastle · #3 (**permalink**) 17.02.2009, 14:03

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-position

utside. 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.

fricca · #4 (**permalink**) 17.02.2009, 14:11

Zitat:

Zitat von Freecastle

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

Dann nimm doch mal 300px.

BTW: "//" ist kein CSS-Kommentar.

regloh · #5 (**permalink**) 17.02.2009, 14:14

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.

Hasso · #6 (**permalink**) 17.02.2009, 14:16

Dein linkes div hat eine Breite von 236px. Wenn du jetzt deiner Liste margin-left:236px; gibst, ragt diese auch nicht mehr in das div.

Getestet.

Reynhard B. · #7 (**permalink**) 17.02.2009, 14:17

Hi

Ich habe vor kurzem diesbezüglich in unserem Blog was geschrieben. So grob überflogen sollte das das gleiche Problem betreffen...
> zum Eintrag

Freecastle · #8 (**permalink**) 17.02.2009, 16:12

Zitat:

Zitat von fricca

Dann nimm doch mal 300px.
BTW: "//" ist kein CSS-Kommentar.

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 von Hasso

Dein linkes div hat eine Breite von 236px. Wenn du jetzt deiner Liste margin-left:236px; gibst, ragt diese auch nicht mehr in das div.

Hatte ich auch schon mal bei mir getestet. Das stimmt auch, sobald die Größe des Abstandes die Größe des Containers überschreitet kann man es wieder entsprechend einrücken durch Ausprobieren. Wäre für mich auch ein benutzbarer Workaround, wenn das alles statisch wäre. Das ist es aber leider nicht, das ganze Ding ist eine hochgradig dynamische Angelegenheit, deswegen kann ich das nicht benutzen (spielt sich letztlich alles in den Templates eines CMS ab).

Zitat:

Zitat von regloh

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.

Ja, das ist ja auch das Verhalten das ich will, deswegen outside. Deswegen sollte man aber doch dennoch die Liste ganz normal via margin verschieben können oder? padding innerhalb von li bringt auch nichts (alles schon probiert). Die fullsection-Klasse ist eigentlich relativ belanglos was das angeht

Zitat:

Zitat von Reynhard B.

Hi
Ich habe vor kurzem diesbezüglich in unserem Blog was geschrieben. So grob überflogen sollte das das gleiche Problem betreffen...

Super!!! Genau das wars und hat geholfen, v.a. auch den IE6 betreffend.
Vielen vielen Dank!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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