Einrückung und Rand bei Listen

[Jan]

Hallo,

Ich möchte auf einer Seite, dass das "Bullet" einer Liste genauso weit vom Rand entfernt ist wie der Text in <p>...</p>-Bereichen. Ich habe also z. B. sowas hier:

<div id="content">
<p>Dies ist ein Zeile.</p>
<ul>
   <li>Listenpunkt 1</li>
   <li>Listenpunkt 2</li>
</ul>
</div>

Für <p> habe ich mit margin-left und margin-right einen Rand festgelegt. Wenn ich denselben für ul festlege und padding dort auf 0 setze, ist zwar der Listentext in <li>...</li> genauso weit vom Rand entfernt wie bei <p>, aber das "Bullet"-Zeichen steht links daneben.

Wenn ich hingegen list-style-position:inside wähle, habe ich im Prinzip genau das was ich will, nur ist der Text nach einem Zeilenumbruch eines über mehrere Zeilen gehenden Textes in <li>...</li> unterhalb des "Bullets".

Wer kann mir da helfen?

Jan

PS: Eigentlich hätte ich gedacht, das das Verhalten, das ich haben will, die Voreinstellung ist, da ich es für recht üblich halte.

[Joerg Peschke]

Tach,

<div id="content">
<p>Dies ist ein Zeile.</p>
<ul>
   <li>Listenpunkt 1</li>
   <li>Listenpunkt 2</li>
</ul>
</div>

li {margin-left: -5px;}

oder sowas müsste klappen (ist aber nicht 100%tig W3C-konform, afaik)Joerg

[Jan]

Warum sollte das nicht W3C-konform sein? Aber woher weiß ich, wie groß in unterschiedlichen Browsern das Bulletsymbol ist? Was wenn es hier oder dort von 5px abweicht? Das ist sicher nur eine Notlösung. Ich habe mir sowas ähnliches mit text-indent gedacht, würde es aber nur im Notfall so machen.

[schwarze Piste]

Tachchen!

Tipp:
Mache einen Rahmen um die Liste und sorge zunächst dafür, dass sich die
Darstellungen von IE und anderen Browsern ausreichend ähneln.
Anschließend positionierst du die so gestaltete Liste nach Wunsch.

Gruß

Die schwarze Piste

[schwarze Piste]

Tachchen!

Nachtrag:
Ich glaube mich zu erinnern, dass IE 5.0 ein "Restrand" links nicht
abzugewöhnen war. Dort müsstest du evetuell über einen hinreichend
geeigneten Selektor etwas nachjustieren.

Gruß

Die schwarze Piste

[Jan]

So würde ich es nur im Notfall machen. Ich habe es ja durchaus schon so, dass der Listentext genauso weit vom Rand entfernt ist, wie der p-Text. Natürlich könnte ich einfach einen anderen margin-left für ul wählen als für p. Da hätte ich aber wieder das Problem, dass ich nicht weiß, wie groß das Bullet in den einzelnen Browsern ist.

Im Prinzip suche ich eine Lösung, die für die erste Zeile so arbeitet wie bei inline, für die folgenden Zeilen aber wie für outline.

Sowas muss es doch geben? So sieht doch in allen PDFs oder Büchern eine Liste aus? Das muss doch irgendwie auch in HTML gehen?

[Ingo Turski]

Hi,

Da hätte ich aber wieder das Problem, dass ich nicht weiß, wie groß das Bullet in den einzelnen Browsern ist.

ul {  
  margin: 0 0 0 1em;  
  padding-left:0;  
}

klappt prima. Natürlich muß dann der Randabstand für p und ul als padding des umschließenden Containers definiert werden. Oder Du defienerst für p 1em weniger margin-left als für ul.

freundliche Grüße
Ingo

[schwarze Piste]

Tachchen!

So würde ich es nur im Notfall machen.

Du kannst das machen, wie du magst ... und ich kann nur Tipps geben.

Gerade bei Listen sind Standardanzeigewerte füe Ul und LI von Browser zu
Browser sehr unterschiedlich. Dennoch sind sie durchaus auf einen Nenner
zu bringen.
Dann die Liste wie gewünscht einzurücken, sollte das geringste Problem sein!?

Gruß

Die schwarze Piste

[Jan]

Kann es sein, dass das "Bullet" genau 1em breit ist? Wenn ich für p margin-left:3em und für ul margin-left:4em nehme, scheint es in IE, FF und Opera richtig auszusehen.