listenelemente nicht einrücken

[bjoern]

hi!

ich habe ine unordered list <ul> und möchte nun dass die einzelnen einträge <li> nicht eingerückt werden, aber die punkte erscheinen.

Bei padding + margin 0px sind die punkte weg. wie gehe ich dies mit css richtig an? die punkte sollen zwar erscheinen, aber nicht eingerückt, sondern bündig am text.

lg bjoern

[wahsaga]

hi,

die punkte sollen zwar erscheinen, aber nicht eingerückt, sondern bündig am text.

list-style-position:inside

gruß,
wahsaga

[bjoern]

list-style-position:inside

vielen dank, funktioniert bei mir aber nicht. kann es sien, dass die nur bei geordneten listen <ol> funktioniert?

ich habe eine ungeordnete <ul>

lg bjoern

[David]

list-style-position:inside

Ich glaube, er will die keineswegs im Text fließen, sondern einfach nur am Rand "kleben" haben. Den Margin entsprechend in Pixeln zu definieren, würde wahrscheinlich in jedem Brauser andere Auswirkungen haben. Ist das auch sauber möglich?

David

[Olaf Schneider]

Hallo bjoern,

Ich setze immer global margin und padding auf 0.

Für die Listen setze ich dann

li: padding-left auf die gewünschte Einrückung des Textes (in em)
ul: list-style auf none, um die Punkte zu entfernen
li: background url(..), um einen Blickfangpunkt meiner Wahl als Hintergrundbild einzublenden.

Nachteil: Bei Vergrößerung des Textes durch den User vergrößert sich der Blickfangpunkt nicht mit.

Gruß
Olaf

[bjoern]

li: padding-left auf die gewünschte Einrückung des Textes (in em)
ul: list-style auf none, um die Punkte zu entfernen

Ich will die blöden Punkte ja behalten! Sie sollen nur nicht so weit eingerückt sein.
Stelle ich margin und padding auf 0 sind die Punkte WEG!!! Genau das ist ja das Problem!!

Wie kann ich also die Aufzählungspunkte anzeigen lassen, ohne das diese eingerückt werden??

lg bjoern

[MudGuard]

Hi,

Ich will die blöden Punkte ja behalten! Sie sollen nur nicht so weit eingerückt sein.
Stelle ich margin und padding auf 0 sind die Punkte WEG!!! Genau das ist ja das Problem!!

margin und padding erlauben auch andere Werte als 0 ...

cu,
Andreas

[Olaf Schneider]

Die Hintergrundsgrafik nehme ich auch genau dafür, um den Punkt wieder darzustellen; z. B. so:

  
li {  
    background: url(img/bullet.gif) no-repeat 0.3em auto;  
    padding: 0 0 0 1em;  
}  

Alleine mit margin und padding eine Formatierung des Punktes zu erreichen, die auf allen Browsern gleich dargestellt wird, habe ich (noch) nicht geschafft. Daher dieser Workaround.

Gruß
Olaf

[Ingo Turski]

Hi,

Alleine mit margin und padding eine Formatierung des Punktes zu erreichen, die auf allen Browsern gleich dargestellt wird, habe ich (noch) nicht geschafft.

Dann probiere mal:

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

freundliche Grüße
Ingo

[Olaf Schneider]

Hallo Ingo,

habe ich (schon) probiert: Beispiel Firefox 1.5 Mac OS X:

bei kleiner Schrift müsste ich margin-left: 0.8em; schreiben, je größer die Schrift, desto mehr geht die Tendenz zu margin-left: 0.4em;.

Gruß Olaf

[Ingo Turski]

Hi,

bei kleiner Schrift müsste ich margin-left: 0.8em; schreiben, je größer die Schrift, desto mehr geht die Tendenz zu margin-left: 0.4em;.

schau Dir mal http://beratungscentrum-monheim.de/Presse.html an - siehst Du in der Positionierung der Listenpunke in Bezug zur Überschrift wirklich so große Abweichungen?

freundliche Grüße
Ingo