ul - display:inline mit Aufzählungszeichen

[aquasonic]

Dein Beispiel von gestern, mit dem eingefügten Hintergrundbild sieht wie folgt aus (im Anhang). Hier die beiden Probleme:

- Zweite Zeile wird nicht eingerückt
- Hintergrund wird eingerückt

ul {
list-style: none;
}

li {
background-image: url(all_spacer_dot_blue_hor.gif);
background-repeat: repeat-x;
background-position: top;
}

ul,li {
margin: 0;
padding: 0;
}

li a {
background: url(all_nav_main_arrow_blue.gif) no-repeat 0 50%;
padding-left: 12px; /* entspricht Grafikbreite */
}

ul li ul {
margin-left: 12px; /* entspricht Grafikbreite */
}

Ich habe noch den Hintergrund und den Pfeil angehängt, damit du das mal testen kannst.

 

[Maik]

Daß bei Dir die gepunktete Hintergrundgrafik eingerückt wird, liegt (noch immer) an diesem Selektor:

ul li ul {
margin-left: 12px; /* entspricht Grafikbreite */
}

Wenn ich das a-Element in dem Selektor hinzufüge, wird die gepunktete Hintergrundgrafik nicht eingerückt:

ul li ul li a {
margin-left: 12px; /* entspricht Grafikbreite */
}

Und daß der Submenü-Link so weit eingerückt wird, liegt einfach daran, daß in der Grafik links vom Pfeil ein weißer Freiraum ist, was man auch an den (eingerückten) Links der oberen Menüebene erkennt.

Spoiler

.

 

[aquasonic]

Trotz deinen Punktes am Schluss...

// EDIT: Das mit der zweiten Ebene (Punkt 1) konnte ich lösen, indem ich das Padding des li auf der 2. Ebene auf 20 oder so stelle. Habe den Code oben angepasst. Das Problem mit mehreren Zeilen besteht weiterhin.

Das Einrücken dieser beiden Ebene dass es auch mit dem Hintergrund klappt, habe ich wie gesagt schon lösen können. Aber das Problem mit der 2. Zeile nicht Ich glaube wir reden aneinander vorbei...

Das Padding left hier:

li a {
background: url(all_nav_main_arrow_blue.gif) no-repeat 0 50%;
padding-left: 12px; /* entspricht Grafikbreite */
}

wird nur auf die erste Zeile angewendet. Wenn ich also folgenden Listeneintrag habe:

<li>Hallo<br>dies<br>ist<br>ein<br>Test</li>

dann hat nur das "Hallo" das padding von 12px. die unteren drei Zeilen ("dies", "ist", "ein", "test") verhalten sich wie sie ein padding von 0px hätten.

Dies möchte ich aber nicht. Ich möchte dass sich die Aufzählungsliste auch verhaltet wie eine Aufzählungsliste, auch wenn wir das Aufzählungszeichen entfernt haben (list-style: none) und dies durch die Hintergrundgrafik des Links "simulieren".

Ich hoffe, du weisst nun was ich meine. Deine Lösungsvorschläge lösen alle das Problem mit dem Hintergrund, also diese Linie, nicht aber dieses...

 

[Maik]

Sorry, aber für das zweite Problem fällt mir keine Lösung ein. Ansonsten hätte ich sie schon verkündet

 

[aquasonic]

Wenn du dies vorher gesagt hättest, hättest du hier schon lange closen können

Vielen Dank für deine Zeit und deine Lösungen Und wenn dir doch noch etwas einfällt, dann melde dich doch

 

[Maik]

Es gibt zwar die list-style-position-Eigenschaft, nur funktioniert sie in diesem Konstrukt nicht.

 

[aquasonic]

Nein geht auch nicht. Eine Möglichkeit wäre das Verschachteln von zwei Divs. Im ersten Div setzt du das Hintergrundbild und im 2. (welches ein margin-left hat) dann der Link.

Aber ich weiss nicht wie sauber diese Lösung ist? Naja, werds übergangsmässig wohl mal so machen.

Danke für Hilfe


PS: Habe übrigens die ID durch eine Klasse ersetzt