Willkommen in der Webstatt Zum Webstatt Blog und Stories
trefixxx am 13.05.07 14: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");">
<li>Kontakt</li>
</ul>
<ul style="list-style-image: url("images/impressum.gif");">
<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? Danke!!

netcup.de Warum gibt es hier Werbung?
sili sili am 13.05.07 14: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; }

trefixxx am 13.05.07 15:02

das klappt aber nicht... :(

<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");
}

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

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

sili sili am 13.05.07 15: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; }

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt