CSS-Bild anzeigen bei einem Link (hover)
annasilie
- css
0 schwarze Piste0 annasilie0 Fabian St.0 Vinzenz0 annasilie0 Ingo Turski
Hallo,
da ich mein Problem mit google und Co. nicht lösen konnte, hoffe ich hier Hilfe zu finden. Ich möchte gern, dass wenn ich mit der Maus über einen Link fahre, dieser unterstrichen wird (ist es vorher nicht) und dass links von dem Wort ein Bild (Pfeil) angezeigt wird. Also das mit dem unterstreichen bekomme ich ja hin, aber wie mache ich das mit dem Bild?
Anna
Tachchen!
Genauso wie du das mit dem Unterstrich gemacht hast, bindest du jetzt
für :hover das gewünschte Hintergrundbild ein. Eventuell musst du per
padding-left erst noch ein wenig Platz dafür schaffen auf der linken Seite.
Gruß
Die schwarze Piste
Genauso wie du das mit dem Unterstrich gemacht hast, bindest du jetzt
für :hover das gewünschte Hintergrundbild ein.
Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.
Anna
Hi!
Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.
background-image:url("xyz.de/xyz.png") ist dein Freund.
Grüße,
Fabian St.
Hallo Fabian,
Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.
background-image:url("xyz.de/xyz.png") ist dein Freund.
Zusätzlich empfehle ich die Lektüre von https://forum.selfhtml.org/?t=89422&m=534447, danach ggf. eine Recherche im </archiv/>, was das Problem beim IE, Version < 6, angeht.
Ich habe auf die Schnelle </archiv/2004/1/70096/#m403488> gefunden.
Freundliche Grüsse,
Vinzenz
Hallo Fabian,
Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.
background-image:url("xyz.de/xyz.png") ist dein Freund.
Zusätzlich empfehle ich die Lektüre von https://forum.selfhtml.org/?t=89422&m=534447, danach ggf. eine Recherche im </archiv/>, was das Problem beim IE, Version < 6, angeht.
Ich habe auf die Schnelle </archiv/2004/1/70096/#m403488> gefunden.
Freundliche Grüsse,
Vinzenz
Hm, also es will irgendwie noch nicht. So hatte ich das auch schon probiert gehabt und es funktioniert nicht, deshalb dachte ich, es gibt noch nen anderen Befehl. Ich hab mal hier den Code:
//css:
a:hover {
color: #FFFFFF;
text-decoration: underline;
background-image:url("Pfeil-weiss.gif");
}
.normalfettabstand30 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
padding-left:30px;
}
//Aufruf in Datei:
<tr>
<td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;"><a href="home_neu.php" target="main" class="normalfettabstand30">Home</a></td>
</tr>
//habs auch so probiert:
<tr>
<td height="21" class="normalfettabstand30" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;"><a href="home_neu.php" target="main">Home</a></td>
</tr>
Was mach ich falsch?
Anna
Hi,
background-image:url("Pfeil-weiss.gif");
probier mal, die Quotes wegzulassen - und no-repeat könnte auch nötig sein.
.normalfettabstand30 {
Und was, wenn Du Dich mal entscheidest, den Abstand auf 25px festzusetzen? Ich würde mir allgemeingültige Klassennamen ausdenken, z.B. menuelink.
<td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">
warum nutzt Du nicht auch hier CSS und lagerst auch den inline-Style aus?
freundliche Grüße
Ingo
background-image:url("Pfeil-weiss.gif");
probier mal, die Quotes wegzulassen - und no-repeat könnte auch nötig sein.
Nein, das hat auch nicht geholfen.
.normalfettabstand30 {
Und was, wenn Du Dich mal entscheidest, den Abstand auf 25px festzusetzen? Ich würde mir allgemeingültige Klassennamen ausdenken, z.B. menuelink.
Ja, da hst Du recht :)
<td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">
warum nutzt Du nicht auch hier CSS und lagerst auch den inline-Style aus?
Das will ich gern machen, aber das hab ich auch nicht hinbekommen. Wenn ich in meiner css schreibe:
.buttonhintergrund{
background-image:url(img/button_mitte.gif);
background-repeat:repeat-x;
}
und so einbinde:
<td width="100" class="buttonhintergrund"><a href="content.php" target="main" class="normalfett" >Text</a></td>
Da wird mein geünschter Hintergrund nicht angezeigt, aber wenn ichs per Hand wie oben reinschreibe dann gehts. Keine Ahnung wieso :(
Hi,
<td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">
Wenn ich in meiner css schreibe:
.buttonhintergrund{
background-image:url(img/button_mitte.gif);
background-repeat:repeat-x;
}und so einbinde:
<td width="100" class="buttonhintergrund"><a href="content.php" target="main" class="normalfett" >Text</a></td>Da wird mein geünschter Hintergrund nicht angezeigt, aber wenn ichs per Hand wie oben reinschreibe dann gehts. Keine Ahnung wieso :(
vielleicht, weil Du hier eine ganz andere Grafik angibst?
Außerdem hast Du schon wieder ein HTML-Attribut verwendet, das Du im CSS angeben könntest;-)
Beides kombiniert wäre dann:
<td class="buttonhintergrund">
.buttonhintergrund {
background: white url(Webdesign/button.gif) no-repeat; */ für white eine passende Farbe nehmen */
width:100px; height:21px;
}
freundliche Grüße
Ingo