hi,
ich habe ien kleines problem.
ich möchte eine navigation erstellen wo jeder link eine andere grafik hat (die grafik ist auch der link)

im html habe ich es so:

HTML-Code:

<div id="navigation">
	    <ul>
        <li id="home"><a href="#"></a></li>

    </ul>

und im css habe ich es so:

Code :

1 2 3 4 5 6 7 8

#home a {     list-style-type:none;   background: url(..images/home.png);   height:20px;   width: 120px; }

aber es funktioniert nicht. wie soll ich da am besten vorgehen?

bitte helft mir!

liebe grüße
eure akali

hallo,
was spricht denn dagegen gleich so zu schreiben:
<li id="home"><a href="#">< img src="images/home.png" alt="name"></a></li>
Der Ordner images liegt auf der gleichen Ebene wie die aufrufende HTML-Datei.

Hallo

Ein Menü mit Grafiken ist (meist) eine schlechte Idee da sie sowohl der Barierefreiheit, als auch der Indexierbarkeit durch Suchmaschienen schadet. (Schau dir dazu eine Seite mit Grafik-Menü mit einem TextBrowser wie elinks an)

Kannst du die grafischen Elemente nicht (per CSS) als Background für die Links setzen?

Zu deinem Code
Ein a-Element ohne Inhalt wird warscheinlich nicht dargestellt (oder ist sehr klein) da es als Inline-Element duch den enthaltenen Text erst seine Größe bekommt.

Außerdem hast du beim Pfad im css den / zwischen .. und dem Rest vergessen.

Code css:

1 2 3

#home a{ url(../images/home.png); }

by the way

wird <div id="home"> nicht mit .home im stylesheet geschreben ?

@n1roxxer

Nein das passt so. IDs werden in CSS mit #idname angesprochen .name ist für Klassen.

Zitat von akali

im css habe ich es so:

Code :

1 2 3 4 5 6 7 8

#home a {     list-style-type:none;   background: url(..images/home.png);   height:20px;   width: 120px; }

aber es funktioniert nicht. wie soll ich da am besten vorgehen?

display:block für das <a>-Tag deklarieren, damit das Inline-Element "Block-Level-Charakteristika" erhält, und letzlich die height- / width-Regeln interpretiert.

Damit es in deinem gezeigten Markup nicht bei den "inhaltsleeren" <a>-Tags bleibt, empfehle ich folgende Ergänzungen:

Code xhtml:

1 2 3 4

...     <li id="home"><a ...><span>Home</span></a></li>     <li id="news"><a ...><span>News</span></a></li> ...

Code css:

1 2 3

#navigation ul li a span { display:none; }

Alternativ ohne das versteckte <span>-Element:

Code xhtml:

1 2 3 4

...     <li id="home"><a ...>Home</a></li>     <li id="news"><a ...>News</a></li> ...

Code css:

1 2 3

#navigation ul li a  { text-indent:-999px; }

Zitat von franz007

Kannst du die grafischen Elemente nicht (per CSS) als Background für die Links setzen?

So stand's von Beginn an im Post niedergeschrieben