# ul - display:inline mit Aufzählungszeichen



## aquasonic (12. Oktober 2006)

Hallo zusammen

Ich bin gerade dran eine Navigation zu machen. Dies sollte in etwa gleich aussehen wie folgende --> http://www.sk.zh.ch

Mein Problem ist nun, wie mache ich dass mit einer Aufzählungsliste, damit ich die Pünktchen (als background-image) im Browser linksbündig machen kann?

Mache ich einfach eine ul und setzte als bg-image das Bild, so sieht dass so aus wie im Bild im Anhang. Ich möchte den Background aber bis links an den Rand? Wenn ich mit display:inline arbeite geht dies, aber dann kann ich kein Aufzählungszeichen mehr setzten?

Wie kann ich dies kombinieren?

Danke schonmal für die Hilfe 

PS: Ich habe keinen Code angehängt habe, weil ich eigentlich keinen habe, ausser welchen den ich gerade beschrieben habe


----------



## Maik (12. Oktober 2006)

Mein Vorschlag: Die vorgesehene Bullet-Grafik als Hintergrundbild für die Links verwenden 


```
ul {
list-style: none;
}

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

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

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


```
<ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a>
        <ul>
            <li><a href="#">test</a></li>
        </ul>
    </li>
</ul>
```


----------



## aquasonic (13. Oktober 2006)

Dies funktioniert im grossen und ganzen. Es gibt nur noch zwei Probleme:

1. Mache ich für die Liste zweiter Ebene ein margin-left, wird auch das Hintergrundbild für die Liste (die blauen Punkte) eingerückt, was nicht sein sollte.

2. Das mit dem Hintergrundbild für den Link funktioniert zwar, aber wenn ein Menüpunkt zweizeilig ist, beginnt der Text wieder vorne (und nicht so wie bei einer Aufzählung.

Im Anhang ein Bild  Und mein nun ja vorhandener Quellcode.


```
ul#Navigation {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#Navigation li {
	background-image: url(all_spacer_dot_blue_hor.gif);
	background-repeat: repeat-x;
	background-position: top;
	margin: 0;
	padding: 0;
}

ul#Navigation li a {
	background: url(all_nav_main_arrow_blue.gif) no-repeat 0 50%;
	padding-left: 17px; /* entspricht Grafikbreite */
	line-height: 18px;
}

ul#Navigation li ul li {
	padding-left: 20px;
}
```


```
<ul id="Navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">Direktion</a></li>
	<li><a href="#">Personalwesen</a></li>
	<li><a href="#">LFC</a></li>
	<li><a href="#">Ämter</a>
		<ul id="Navigation"><li><a href="#">untermenüsiech</a></li></ul>
	</li>
	<li><a href="#">Intranet des Kantons Zürich</a></li>
</ul>
```

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


----------



## Maik (13. Oktober 2006)

Ich möchte Dich an dieser Stelle darauf hinweisen, daß eine ID in einem Dokument eindeutig sein muß, sprich nur einmal vergeben werden darf.

Wenn das Submenü nicht eingerückt sein soll, dann entfällt in meinem Beispiel der Selektor ul li ul.


----------



## aquasonic (13. Oktober 2006)

Das weiss ich doch, ist auch nur ein Test  Eingerückt werden soll es, wird es nun auch nach meinem edit.

Aber wie mache ich dass mit dem Zeilenumbruch? Das dann die zweite Zeile nicht ganz vorne beginnt? "Zürich" ist nicht eine neue Zeile, sondern sollte bündig sein mit "Intranet"


----------



## Maik (13. Oktober 2006)

In meinem gestern gezeigten Beispiel rückt das Submenü doch auch ein


----------



## aquasonic (13. Oktober 2006)

Jep macht es. Aber siehst du in der Grafik die Pünktchen (Linie) die oberhalb von jedem li sind? Das ist ja als Hintergrundbild definiert, und in deinem Beispiel rücken die dann beim Submenü mit ein. Es sollte aber nur der Text und der Pfeil einrücken, nicht aber die Hintergrundgrafik.


----------



## Maik (13. Oktober 2006)

Probier mal Folgendes:


```
ul#Navigation {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#Navigation li {
	background-image: url(all_spacer_dot_blue_hor.gif);
	background-repeat: repeat-x;
	background-position: top;
	margin: 0;
	padding: 0;
}

ul#Navigation li a {
	background: url(all_nav_main_arrow_blue.gif) no-repeat 0 50%;
	padding-left: 17px; /* entspricht Grafikbreite */
	line-height: 18px;
}

ul#Navigation li ul li a {
	margin-left: 20px;
}
```


----------



## aquasonic (13. Oktober 2006)

Das rückt den ganzen Menüpunkt (inkl. Pfeil) einfach nochmal weiter ein. Hilft aber für das Problem mit dem Einrücken auf der 2. Zeile nicht.


----------



## Maik (13. Oktober 2006)

In meinem gestern gezeigten Beispiel hat der Vorschlag die gewünschte Wirkung: der Submenü-Link wird "normal" eingerückt, aber die gepunktete Linie wird nicht mehr eingerückt.

Vielleicht solltest Du einfach mal den margin-left-Wert verringern, denn den habe ich aus deinem Code übernommen.


----------



## aquasonic (13. Oktober 2006)

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 (13. Oktober 2006)

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 (13. Oktober 2006)

Trotz deinen Punktes am Schluss... 



aquasonic hat gesagt.:


> // 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 (13. Oktober 2006)

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


----------



## aquasonic (13. Oktober 2006)

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 (13. Oktober 2006)

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


----------



## aquasonic (13. Oktober 2006)

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


----------

