navigation mit unterschiedlichen bilden

[akali]

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:

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

    </ul>

und im css habe ich es so:

#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

 

[OpaBenno]

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.

 

[franz007]

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.

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

 

[n1roxxer]

by the way

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

 

[franz007]

@n1roxxer

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

 

[SpiceLab]

im css habe ich es so:

#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:

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

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

Alternativ ohne das versteckte <span>-Element:

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

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

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

So stand's von Beginn an im Post niedergeschrieben