Link Unterstrich mit image.

Status
Nicht offen für weitere Antworten.
P

Pearl81

Grünschnabel
Hallo

Ich arbeite mit html und css ,aber nun bin ich an einem Punkt wo ich einfach nicht weiter komme.
Wie ich einen Background von einem Link einfärbe den man anklicken möchte weiß ich.
Nur hätte ich gern statt dem ganzen Hintergrund nur einen farbigen Unterstrich,mit einem image welches ich erstellt habe.

Mein Code für den ganzen Background sieht so aus :

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{
background: #FFFFFF url(image.png);
color: #FFFFFF;
font-size: 9px;
}

Ist es überhaubt möglich dies umzusetzen was ich möchte ?


Vielen Dank schonmal im vorraus.
 
Danke Dir für Deine schnelle Antwort.
Ich habe es versucht,aber es funktioniert nicht. Egal was ich eingebe das Bild bewegt sich nicht vom fleck. Es bleibt genau hinter der Schrift. Habe es auch versucht in dem ich die höhe und breite des images angebe ,aber auch da tut sich nichts.
 
Dann versuch es nochmal unter Hinzunahme der display:block-Eigenschaft für das Inline-Element, damit es "Block-Level-Charakteristika" erhält (aus diesem Grund hat es auch nicht die von dir gesetzte Breiten-und Höhendeklaration angenommen), und beachte, dass der erste Wert für die horizontale, und der zweite Wert für die vertikale Position steht - gemessen von der linken oberen Ecke der Grafik.

mfg Maik
 
Bin mir zwar nicht sicher ob ich verstanden habe was du meinst, aber ich versuchs mal.
Code: 
a {
    display: block;
    background: transparent url(bild.jpg) no-repeat 0 0;]
    text-decoration: underline;
    color: #00F;
}

a:hover {
/* andere angaben */
}

Wenn das Bild der unterstrich sein soll, und damit eine andere Farbe als der text haben soll, dann machs doch so:
Code: 
a {
    display: block;
    background: transparent url(unterstrich.jpg) x-repeat left bottom;
    color: #F00;
}

a:hover {
/* andere angaben */
}

So oder so ähnlich.

Du kannst auch einen Tag, in <a> reinpacken, ist aber nicht so schönes XML. Den kannst du frei formatieren und seine Position sogar verschieben.

LG John
 
Security hat gesagt.:
Wenn das Bild der unterstrich sein soll, und damit eine andere Farbe als der text haben soll, dann machs doch so:
Code: 
a {
    display: block;
    background: transparent url(unterstrich.jpg) x-repeat left bottom;
    color: #F00;
}
Zum Vergrößern anklicken....

Mit "x-repeat" würde er hier aber zum Sonntagmittag keinen Blumentopf gewinnen, denn korrekterweise lautet der Wert repeat-x, um das Hintergrundbild auf der X-Achse (horizontal) zu wiederholen.

Aber ich geh mal davon aus, dass ihn mein letzter Tipp den bedeutenden Schritt weiter bringen wird, denn in einem reinen Inline-Element (ohne display:block-Formatierung), das zudem nur ein Wort in einer Zeile besitzt, lässt sich ein Hintergrundbild nicht positionieren.

mfg Maik
 
Darum habe ich hier auch darauf hingewiesen, damit ich hier später vom User nicht lesen muß, dass dein Code nicht funktionert. :-)

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück