CSS: Position vom Listenelement

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich moechte meine Navigation mit einer Liste und CSS darstellen:
[ul]
[li]A[/li]
[li]B[/li]
[li]C[/li]
[/ul]
Nun positioniere ich die Liste links (style=„left: 0; margin-left: 30px; padding-left:10px;“) und ersetze das Listensymbol durch eine Graphik (style=„list-style-image: url(bullet.png);“).
Mein Problem ist, die Graphik auszurichten. Ich moechte, dass sie 10 Pixel links vom Text entfernt ist (halt das ‚padding-left‘ von oben) und habe in CSS nichts gefunden, um das Listensymbol auszurichten.
Bisher zeigen der mozilla firefox, opera und konqueror die Graphik an unterschiedlichen x-Positionen an, wenn ich ‚style=„list-style-position: inside;“‘ nutze ist der Abstand zum Text unterschiedlich.

Gruss
Diether

#2

Hallo,

vielleicht verstehe ich dich nicht richtig, aber padding ist das richtige Stichwort. Du kannst selbstverständlich das Padding separat für oben, unten, links und rechts festlegen. Das machst du entweder, indem du direkt Werte vergibst (padding-top: 10px), oder alles auf einmal im Uhrzeigersinn (padding: 0 10px 0 10px).

Hilft das weiter?

Daniel

#3

vielleicht verstehe ich dich nicht richtig, aber
padding ist das richtige Stichwort. Du kannst
selbstverständlich das Padding separat für oben, unten, links
und rechts festlegen. Das machst du entweder, indem du direkt
Werte vergibst (padding-top: 10px), oder alles auf
einmal im Uhrzeigersinn (padding: 0 10px 0 10px).

Hilft das weiter?

Leider nicht, das padding bezieht sich auf den Text, nicht auf die Graphik vor dem Listentext. Was ich brauche ist der Abstand zwischen dem Bullet und dem eigentlichen Text des Listenelements.

Ddiether

#4

vielleicht verstehe ich dich nicht richtig, aber
padding ist das richtige Stichwort. Du kannst
selbstverständlich das Padding separat für oben, unten, links
und rechts festlegen. Das machst du entweder, indem du direkt
Werte vergibst (padding-top: 10px), oder alles auf
einmal im Uhrzeigersinn (padding: 0 10px 0 10px).

Ich habe jetzt unter http://www-computerlabor.math.uni-kiel.de/~dknof/Tes… eine Testseite gestellt. Dort moechte ich fuer alle Browser (= mozilla firefox, opera, konqueror), dass die Punkte der Liste links oben genau 10 Pixel vom Text entfernt sind.

#5

Hallo,

du könntest alternativ das Bullet ganz weglassen (list-style-image: none:wink: und ein normales Hintergrundbild einsetzen (background: url(meinbild.gif) left no-repeat:wink: und dann noch mit padding-left: 10px; den Text nach rechts rücken. Das sollte auf jeden Fall gehen.

Daniel

#6

Hallo Daniel,

du könntest alternativ das Bullet ganz weglassen
(list-style-image: none:wink: und ein normales
Hintergrundbild einsetzen (background: url(meinbild.gif)
left no-repeat:wink: und dann noch mit padding-left:
10px; den Text nach rechts rücken. Das sollte auf jeden
Fall gehen.

Bisher habe ich es so ohne Liste (nur mit span) gemacht, nun wollte ich gerne die Eigenschaft einer Aufzaehlungsliste verwenden, denn inhaltlich ist die Graphik schliesslich keine Hintergrundgraphik sondern halt die Aufzaehlungsgraphik.

Trotzdem Danke

Diether

#7

Hi Diether,

mit „text-indent“ kann man den Text nach links (-) oder rechts(+)
verschieben (unabhängig vom Bullet/von der Graphik).
Problem: MSIE und Opera scheinen es nicht / nicht korrekt zu interpretieren…
…Mozilla dagegen machts.

CU (M)ike

#8

Hallo Mike,

mit „text-indent“ kann man den Text nach links (-) oder
rechts(+)
verschieben (unabhängig vom Bullet/von der Graphik).

Das hilft mir leider nicht. Ich möchte den Abstand zur Graphik verändern. Das Problem ist, daß die verschiedenen Browser einen unterschiedlichen Standardabstand haben und ich den nicht erändert bekomme.

Gruß
Diether

#9

Hi Diether,

ein einheitliches Aussehen in allen Browsern hinzukriegen ist wie ein perpetuum mobile zu erfinden…
Selbst die gleiche Render-Engine auf unterschiedlichen Betriebssystemen erzeugt immer was anderes.
Vielleicht solltest Du statt CSS doch wieder HTML benutzen („blinde Tabelle“ :wink:
Oder Du versuchst es mit absoluter Positionierung, in etwa so:

TEXT

sieht aber in alten Browsern evtl. etwas merkwürdig aus.
Vielleicht geht das ja auch mit
/ - ?
(hab’ ich noch nicht probiert)

Sonst mußt Du eben mit der Unvollkommenheit der (Browser-)Welt leben - oder per (Browsertyp-)Abfrage vom Server die entsprechende CSS-Datei ausliefern lassen.

CU (M)ike

#10

Hallo (M)ike,

ein einheitliches Aussehen in allen Browsern
hinzukriegen ist wie ein perpetuum mobile zu erfinden…
Selbst die gleiche Render-Engine auf unterschiedlichen
Betriebssystemen erzeugt immer was anderes.

Ich meine natürlich in allen Browsern, die CSS2 verstehen.

Vielleicht solltest Du statt CSS doch wieder HTML benutzen
(„blinde Tabelle“ :wink:

Nix da, dafür gibt es doch gerade CSS.

Oder Du versuchst es mit absoluter Positionierung, in etwa so:
[…]
sieht aber in alten Browsern evtl. etwas merkwürdig aus.

so mache ich es bisher, das sieht in allen CSS2-Browsern (mozilla, opera, konqueror) auch gleich aus.

Vielleicht geht das ja auch mit
/ - ?
(hab’ ich noch nicht probiert)

Mit den ‚list-style-*‘-Eigenschaften kriege ich die Liste auch linksbündig und so hin. Was ich aber möchte, ist das ‚bullet‘-Zeichen ersetzen, und der Abstand zwischen dem ‚bullet‘ und dem nachfolgenden Text ist in den verschienden Browsern unterschiedlich. Eine CSS-Eigenschaft, um den zu ändern, suche ich hier.

Sonst mußt Du eben mit der Unvollkommenheit der (Browser-)Welt
leben - oder per (Browsertyp-)Abfrage vom Server die
entsprechende CSS-Datei ausliefern lassen.

Es geht gerade nicht um die Browser sondern um CSS. Es kann sein, daß CSS mir da nichts bietet, dann finde ich aber CSS an der Stelle mangelhaft.

Gruß
Diether