✔ Bilder Menü: a:active, a:hover etc...

[thetetsuo]

Hallo,
Ich stehe vor einem großen Problem:

Ich habe ein horizontales Menü dessen einzelne Punkte aus verschiedenen Bildern bestehen.
Die Bilder sind unterschiedlich breit deshalb bin ich auf folgende Lösung ausgewichen:

HTML:

<div id="navigation">
                            <div id="punkt1"> 
                            <a href="#"></a> 
                            </div>
            
                            <div id="punkt2"> 
                            <a href="#"></a> 
                            </div>
                            
                            <div id="punkt3"> 
                            <a href="#"></a>
                            </div>
                          
            </div>

CSS:

#navigation {
padding: 0;
margin: 0;
width: 787px;
}

#punkt1{
float: left;
width: 86px;
padding: 0;
margin: 0;
background: url(images/1.jpg);
}
#punkt1 a {
display: block;
width: 86px;
height: 49px;
background: url(images/1.jpg);
}
#punkt1 a:hover {
background: url(images/1over.jpg);

#punkt2{
float: left;
width: 86px;
padding: 0;
margin: 0;
background: url(images/2.jpg);
}
#punkt2 a {
display: block;
width: 86px;
height: 49px;
background: url(images/2.jpg);
}
#punkt2 a:hover {
background: url(images/2over.jpg);


#punkt3 ...usw.. usw...

}

1) Ich weiß dass das keine besonders elegante Methode ist, aber ich bekomme es anders im Moment einfach nicht hin. Oder hat jemand einen Tip!

2) Wie schaffe ich es dass ein einzelner Menpünkt, wenn er aktiv ist das Rolloverbild (1over.jpg oder 2over.jpg usw) bekommt. Ich habe alles mögliche versucht: #punkt1 a:active {background: url(images/1over.jpg)} usw. aber es funktioniert nicht!

Mit der Bitte um Hilfe
TheTetsuo

 

[Maik]

Hi,

zeichne zunächst mal das Menü mit einem Listenelement aus:

<ul id="navigation">
    <li><a href="#" id="punkt1"></a></li>
    <li><a href="#" id="punkt2"></a></li>
    <li><a href="#" id="punkt3"></a></li>
</ul>

ul#navigation {
padding:0;
margin:0;
list-style:none;
width:787px;
}

ul#navigation li {
display:inline;
}

ul#navigation li a {
float:left;
width:86px;
height:49px;
}

a#punkt1{
background: url(images/1.jpg);
}
a#punkt1:hover {
background: url(images/1over.jpg);
}

a#punkt2{
background: url(images/2.jpg);
}
a#punkt2:hover {
background: url(images/2over.jpg);
}

a#punkt3{
background: url(images/3.jpg);
}
a#punkt3:hover {
background: url(images/3over.jpg);
}

Da die Links nach deiner Aussage unterschiedlich breit sind, übergibst du die width-Eigenschaft den jeweiligen ID-Selektoren:

ul#navigation li a {
float:left;
height:49px;
}

a#punkt1{
width:86px;
background: url(images/1.jpg);
}
a#punkt1:hover {
background: url(images/1over.jpg);
}

a#punkt2{
width:86px;
background: url(images/2.jpg);
}
a#punkt2:hover {
background: url(images/2over.jpg);
}

a#punkt3{
width:93px;
background: url(images/3.jpg);
}
a#punkt3:hover {
background: url(images/3over.jpg);
}

Um den aktiven Link "hervorzuheben", richtest du eine ID (hier: #current) ein, die du in der aktuell geöffneten Seite dem entsprechenden Listenpunkt übergibst:

<!-- Seite "Punkt 1" -->

<ul id="navigation">
    <li id="current"><a href="#" id="punkt1"></a></li>
    <li><a href="#" id="punkt2"></a></li>
    <li><a href="#" id="punkt3"></a></li>
</ul>

<!-- Seite "Punkt 2" -->

<ul id="navigation">
    <li><a href="#" id="punkt1"></a></li>
    <li id="current"><a href="#" id="punkt2"></a></li>
    <li><a href="#" id="punkt3"></a></li>
</ul>

<!-- Seite "Punkt 3" -->

<ul id="navigation">
    <li><a href="#" id="punkt1"></a></li>
    <li><a href="#" id="punkt2"></a></li>
    <li id="current"><a href="#" id="punkt3"></a></li>
</ul>

a#punkt1{
width:86px;
background: url(images/1.jpg);
}
a#punkt1:hover, li#current a {
background: url(images/1over.jpg);
}

a#punkt2{
width:86px;
background: url(images/2.jpg);
}
a#punkt2:hover, li#current a {
background: url(images/2over.jpg);
}

a#punkt3{
width:93px;
background: url(images/3.jpg);
}
a#punkt3:hover, li#current a {
background: url(images/3over.jpg);
}

 

[thetetsuo]

Hallo Maik,

herzlichen Dank für deine Antwort! Doch leider...

Im ersten Moment sah es so aus als ob es funktioniert. Ich habe jetzt insgesamt 7 Menüpunkte. Komisch nur dass der erste Punkt,obwohl er in der CSS als Bild "1.jpg" definiert ist, das Bild "7over.jpg" als Hintergrund hat? Beim hovern erscheint jedoch das eigentliche "1.jpg". Die restlichen 6 Punkte werden zunächst aber richtig angezeigt. Doch wenn ich einen Menüpunkt anklicke, dann springt ein komplett anderes Rollover-Bild an diese Stelle. Ich versteh das alles nicht....
Es muss wohl irgendwie an der id=current liegen, oder vielleicht floatedhier auch was nicht richtig...oder oder oder....?

TheTetsuo

 

[thetetsuo]

Um das Problem deutlicher zu machen habe ich ein Mini-Menü mit 3 Listenpunkten hochgeladen.

Bitte hier ansehen:
http://tetsuo.freeweb7.com/index1.html

Bild1 -- Bild2 -- Bild3

Bild1 führt zu index1.html
Bild2 führt zu index2.html
Bild3 führt zu index3.html

Soweit so schlecht... Im Quelltext seht Ihr die verwendeten CSS Angaben.
Wie man sehen kann funktioniert das Menü nicht:

Schon wenn man auf index1.html geht, wird ein falsches "current" bild angezeigt. Bei einem Rollover allerdings stimmt das Hintergundbild allerdings wieder...
So ist es mit jedem einzelnen Menüpunkt!

Bitte helft mir!
The Tetsuo

 

[Maik]

Sorry, mein Fehler :-(

a#punkt1{
width:100px;
background: url(1.jpg);
}
a#punkt1:hover, li#current a#punkt1 {
background: url(1over.jpg);
}

a#punkt2{
width:150px;
background: url(2.jpg);
}
a#punkt2:hover, li#current a#punkt2 {
background: url(2over.jpg);
}

a#punkt3{
width:200px;
background: url(3.jpg);
}
a#punkt3:hover, li#current a#punkt3 {
background: url(3over.jpg);
}

Und entferne in der index2.html noch das doppelt vorhandene Anführungszeichen hinter dem href-Attribut.

 

[thetetsuo]

Yippieh!

Danke Maik! Ich habe inzwischen schon soviel in der CSS "rumgefummelt", doch diese Variante hatte ich anscheinend noch nicht erwischt.

Besten Dank für deine Hilfe!