Problem mit Sprite als navigationsleiste und <a>

[Hulom]

Hi Leute,

hab die Site leider nur lokal, also versuche ich es so gut wöglich zu umschreiben. Ich habe ein .jpg Datei als Navigationsleiste. Diese ist 960px breit und 50px hoch. Sie ist geteilt in 4 Menu-punkte.
Jeder Menupunkt ist demnach 240px breit und 50 px hoch. Nun möchte ich <a>, also Links davor packen, dmit wenn ich einen Menupunkt anklicke... ich zur nächsten seite komme. Wie schaffe ich das. bis jetzt kann ich das a nur so definieren, das er das gesamte jpg als button nutzt, aber nicht in abschnitte geteilt.

Habe auch ein Sprite mit nur jeweils einem Menupunkt. Dann würde ich einfach 4 <a>-Elemente hintereinander packen. Aber dann müsste ich jedes a ansprechen, damit ich unterschiedliche bilder einfügen kann. Habe es mit <a id="1"> und <a id="2"> versucht und im css dann eben per #1 und #2. Aber so wirds nichts. Kann mir wer helfen ?

Danke für die Hilfe vorab.

Hulom

 

[T!P-TOP]

//Edit: Ach, das "Sprite" habe ich überlesen.

Kannst Du mal deinen Code zeigen? Das mit den id's passt schon. Dann eben mit background-position zurecht rücken. Ich verstehe noch immer nicht so wirklich dein Problem.

 

[Hulom]

Das ist meine Navigationsleiste. (eine Datei)
Wenn ich diese jetzt in der html datei einbinde als <img> dann wird sie angezeigt. Alles schön und gut. Ich möchte aber, das wenn ich auf die menupunkte klicke, ich auch zu deren "uterseiten" komme.

Deswegen habe ich anstelle des <img>-Tags ein <a>-Tag gemacht und im CSS dann folgendes deklariert.

a
{
display: block;
height: 50px;
width: 960px;
background: url(navigation2.jpg) 0 0 no-repeat;
}

Damit, kann ich aber ja nur das ganze Bild abdecken, nicht aber nur den ersten menupunkt. Also hab ich mir gedacht, mach ich einfach die 4 Menupunkte einzeln als bild.



Jetzt kann ich im html code, das gnaze ungefähr so schreiben.

<a id="1" href="#">button1</a><a id="2" href ="#">button2</a> ... bis 4 und im CSS

a #1 (...2...3...4)
{
display: block;
height: 50px;
width: 240px;
background: url(nav1.jpg) 0 0 no-repeat;
}

aber so kommen keine bilder. Geht es irgendwie so ? Oder mit dem 1 ganzen bild ?

So verstanden T!P-TOP?

Danke Hulom

 

[T!P-TOP]

#1, #2, #3, #4 {
    display: block;
    height: 50px;
    width: 240px;
    background-image: url(nav1.jpg);
    background-repeat: no-repeat;
}

#1 {
    background-position: 0 0;
}

#2 {
    background-position: 25% 0;
}

#3 {
    background-position: 50% 0;
}

#4 {
    background-position: 75% 0;
}

 

[Hulom]

Die Bilder bleiben leider immer noch aus. Sehe zwar die Button Links, aber kein image. Ich habe das in einem DIV element, ist das schlimm?

 

[mermshaus]

IDs dürfen nicht mit Zahlen beginnen.

(Okay, ich habe das jetzt nicht nachgeschlagen, sondern bin mir nur ziemlich sicher.)

 

[threadi]

Hast recht. IDs dürfen nicht mit Zahlen beginnen und somit auch nicht komplett aus Zahlen bestehen. Tun sie das, führt es zu Problemen.

 

[Hulom]

Jep, mit "ohne" Zahlen hat er funktioniert.
Vielen Dank Leute