ul - display:inline mit Aufzählungszeichen

[aquasonic]

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]

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]

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]

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]

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]

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

 

[aquasonic]

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]

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]

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]

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.