2. Bild bei Navigation immer im Hintergrund

von **micly** » 01.08.2008, 01:16

Hallo, ich beschäftige mich schon seit einigen Tagen mit HTML/CSS und bin jetzt bei einem Problem angelangt, das ich selbst nicht mehr lösen kann:

Also: ich habs geschafft eine Menüleiste zu erstellen, bei dem .jpg Bilder zu den einzelnen "seiten" verlinken. Allerdings hätte ich gerne, dass beim überfahren mit der Maus das Bild geändert wird. Bilder sind erstellt und werden zwar auch angezeigt, aber leider immer nur im Hintergrund (also hinter dem ersten Bild)

Ich find meinen Fehler einfach nicht!!!!
Hier mein Code:

a:hover.eins {display: block; background-image: url(Buttons/startseite2.gif); background-repeat: no-repeat;}
a:hover.zwei {display: block; background-image: url(Buttons/brautpaar2.gif); background-repeat: no-repeat;}
a:hover.drei {display: block; background-image: url(Buttons/standesamt2.gif); background-repeat: no-repeat;}
a:hover.vier {display: block; background-image: url(Buttons/location2.gif); background-repeat: no-repeat;}
a.hover.fuenf {display: block; background-image: url(Buttons/bilder2.gif); background-repeat: no-repeat;}
a:hover.sechs {display: block; background-image: url(Buttons/gaestebuch2.gif); background-repeat: no-repeat;}
a:hover.sieben {display: block; background-image: url(Buttons/vips2.gif); background-repeat: no-repeat;}
/* ]]> */
</style>
<title>Menü</title>
</head>
<body>
<h1>Menü</h1>
<a><img></a>
<a><img src="Buttons/brautpaar.gif" border="0" alt="Brautpaar"</a>
<a><img src="Buttons/standesamt.gif" border="0" alt="Standesamt""</a>
<a><img src="Buttons/location.gif" border="0" alt="Location""</a>
<a><img src="Buttons/bilder.gif" border="0" alt="Bilder""</a>
<a><img src="Buttons/gaestebuch.gif" border="0" alt="Gästebuch""</a>
<a><img src="Buttons/vips.gif" border="0" alt="VIPs"</a>

von **Laus** » 01.08.2008, 07:53

Hallo

Du musst natürlich auch die normalen Bilder der Links als Hintergrundbild einbinden sonst funktioniert das mit dem hover natürlich nicht.
Da du ja sowiso die klassen eins bis sieben verwendest schreib doch einfach

Code: Alles auswählen: a:link.eins {display: block; background-image: url(Buttons/startseite1.gif); background-repeat: no-repeat;} a:hover.eins { background-image: url(Buttons/startseite2.gif); } und im Quellcode <a class="eins" href="startseite.html">Startseite</a>

Gruß Xaver

von **micly** » 01.08.2008, 10:26

Hallo,
danke für die Antwort: jetzt kapier ichs wenigstens! Aber leider tritt ein neues Problem auf:

a:link.eins {display: block; background-image: url(Buttons/startseite.gif); background-repeat: no-repeat;}
a:hover.eins {display: block; background-image: url(Buttons/startseite2.gif); background-repeat: no-repeat;}

<a>Startseite</a>

jetzt erscheint nur das typische Linksymbol (ohne dem ersten Bild), aber das mit dem a:hover funktioniert

Lg
micly

von **Laus** » 01.08.2008, 11:13

Du musst bei a.link natürlich noch Angaben für Breite und Höhe machen sonst wird der Hintergrund nicht Angezeigt. Also zb. height: 27px;
width: 70px;
Schau dir diese Seite mal an da kannst du dir Anregungen holen.

2. Bild bei Navigation immer im Hintergrund

2. Bild bei Navigation immer im Hintergrund

Ähnliche Beiträge zu "2. Bild bei Navigation immer im Hintergrund"

Wer ist online?