Webstatt.org - Community seit 2006 - 2012 (2024?)

ul-listen

user-333
13.05.2007 12:27
Morgen zusammen,

ich möchte folgende Seite umsetzen: http://www.tr-art.de/demo/gag07/gag.html
Mometan versuche ich oben rechts die Zeile "Kontakte Impressum" einzubauen ohne mit <img src="..."> zu arbeiten.
Also habe ich es mit listen versucht:

<ul style="list-style-image: url("images/kontakt.gif"zwinkern;">

<li>Kontakt</li>

</ul>

<ul style="list-style-image: url("images/impressum.gif"zwinkern;">

<li>Impressum</li>

</ul>


Klappt natürlich auch, aber ich will nicht für jeden einzelnen punkt eine neue liste machen, nur weil das bild vor dem listen-punkt sich ändert.
Also habe ich bei spiegel.de geschaut, weil dort selbiges problem schon gelöst wurde.
Man sieht im Header die Zeile Schlagzeilen, Newsletter, 3-Minuten etc. Wenn man sich den dazugehörigen Quellcode anschaut, wird diese Bilddatei genutzt. Ich habe versucht das für meinen Fall zu nutzen, klappt aber nicht - auch, weil ich es gar nicht verstehe, was da gemacht wurde.

Kann mir jemand dazu die lösung liefern? user-158ke!!
Avatar user-300
13.05.2007 12:39
Das würde ich nicht so machen. Besser so:

<ul class="irgendwas">

<li class="kontakt">Kontakt</li>

<li class="impressum">Impressum</li>

</ul>



ul.irgendwas li.kontakt   { background:url(kontakt.gif) no-repeat; margin-left:20px; }

ul.irgendwas li.impressum { background:url(impressum.gif) no-repeat; margin-left:20px; }
user-333
13.05.2007 13:02
das klappt aber nicht... traurig

<ul class="menu">

	<li class="kontakt">Kontakt</li>

	<li class="impressum">Impressum</li>

</ul>


.menu {

	width: 207px;

	float:right;

	font-size: 0.7em;

	color: #8E9193;

	text-align: right;

	list-style-image:url("images/kontakt.gif"zwinkern;

}



ul.menu li.kontakt {

	background:url("images/kontakt.gif"zwinkern no-repeat; margin-left:20px;

}



ul.menu li.impressum {

	background:url("images/impressum.gif"zwinkern no-repeat; margin-left:20px;

}
Avatar user-300
13.05.2007 13:25 
.menu {

	font-size: 0.7em;

	color: #8E9193;

	text-align: right;

	list-style-type:none;

}



.menu li { float:left; margin:0 10px; }

ul.menu li.kontakt { background:url(images/kontakt.gif) no-repeat; padding-left:15px; }

ul.menu li.impressum { background:url(images/impressum.gif) no-repeat; padding-left:15px; }