nicht angemeldet
grafik vor link
hallo!
ich definiere in einer css-datei sämtliche stylesheets.
unter anderem auch den css für einen link. neben farbe schriftgröße etc. möchte ich auch, dass immer vor dem linktext eine grafik eingeblendet wird. kann ich das in der css-datei auch definieren oder muss ich die grafik auf "althergebrachte weise" per <img src=.. einbinden?
gruß.
roger.
-
Hallo Roger,
unter anderem auch den css für einen link. neben farbe schriftgröße etc. möchte ich auch, dass immer vor dem linktext eine grafik eingeblendet wird.
natürlich, kannst Du mit der CSS-Pseudo-Eigenschaft :before machen,
funktioniert allerdings nur in modernen Browsern, die CSS gut unter-
stützen, dem MSIE z.Bsp. nicht. Ein kleiner Auszug aus der CSS-Datei
von Favicon.de:a[hreflang]:before { margin-right: 5px; }
a[hreflang="de"]:before { content: url(de.png); }
a[hreflang="de"]:hover:before { content: url(de.gif); }
a[hreflang="en"]:before { content: url(en.png); }
a[hreflang="en"]:hover:before { content: url(en.gif); }Allerdings mußte ich die Zeile auskommentieren, weil Safari damit
ein Problem hatte und abgestürzt ist, muß ich mir bei Gelegenheit
nochmal genauer anschauen.Viele Grüße,
Stefan-
Hallo,
da gibt es auch noch eine dritte möglichkeit.
Du kannst das <a> element mit der grafik als hintergrund gestalten und dem entsprechend noch die angabe padding-left:grafikbreite+; dem <a> element geben.Gruss, Jan aus Dresden
-
Hallo Jan,
Du kannst das <a> element mit der grafik als hintergrund gestalten und dem entsprechend noch die angabe padding-left:grafikbreite+; dem <a> element geben.
auch lustig, funktioniert soweit, allerdings zeigt der MSIE mir auch
diese Variante nicht an, außerdem funktioniert in meinem Fall der ge-
wünschte Hover-Effekt nicht, d.h. das Hintergrundbild wird beim Über-
fahren des Links mit der Maus nicht ausgetauscht.Viele Grüße,
Stefan-
Hallo,
|..., allerdings zeigt der MSIE mir auch
diese Variante nicht an, außerdem funktioniert in meinem Fall der ge-
wünschte Hover-Effekt nicht, d.h. das Hintergrundbild wird beim Über-
fahren des Links mit der Maus nicht ausgetauscht.Vieleicht ist es in einigen browsern nötig den link als block zu definieren, ich habe es noch nicht mit <a> als inline element probiert.
Auf meiner seite ist der hampelmann oben auch in einem <a> element untergebracht und der 6er IE wechselt da das hintergrundbild bei :hover (der grund warum ich a:hover und nicht div:hover verwendet habe), ob's der 5er macht weis ich gar nicht.
Man könnte auch, wenn man eine liste verwendet und nicht list-style:url() verwenden will, das hintergrundbild dem <li> element geben und ebenfalls padding-left: abstand erzeugen, dass funktioniert auch in 4er NN nur der hovereffekt bedingt dann halt li:hover was wieder nur für neuere browser was bringt.
Aber wenn die links eh in der liste sind kann man ja problemlos den link als block definieren.Gruss, Jan aus Dresden
-
Hallo Jan,
Vieleicht ist es in einigen browsern nötig den link als block zu definieren, ich habe es noch nicht mit <a> als inline element probiert.
werde ich mal probieren, ansonsten ist mir ein Lapsus unterlaufen,
ich hatte da noch a[hreflang]... stehen, da wird es im MSIE sehr
schwierig ;-)Viele Grüße,
Stefan -
hallo jan,
Auf meiner seite ist der hampelmann oben auch in einem <a> element untergebracht und der 6er IE wechselt da das hintergrundbild bei :hover (der grund warum ich a:hover und nicht div:hover verwendet habe), ob's der 5er macht weis ich gar nicht.
bin gerade mit einem IE 5.0 unterwegs, und der macht's auch korrekt beim hovern (sofern da kein zusätzliches JS im einsatz ist, hab grade keine lust nachzuschauen - aber ich denke mal nicht, oder?)
nette seite übrigens, das design gefällt mir gut ... werde ich mir bei gelegenheit mal genauer ansehen.
gruss,
wahsaga-
Hallo,
bin gerade mit einem IE 5.0 unterwegs, und der macht's auch korrekt beim hovern
Na das ist doch schön.
sofern da kein zusätzliches JS im einsatz ist, hab grade keine lust nachzuschauen - aber ich denke mal nicht, oder?
Anfangs hat der hampel mit js gehampelt aber da meinte mal jemand, dass das "doof" ist und so habe ich ihm dann irgendwann mal verboten mit js herumzuhampeln, so dass er jetzt nur noch mit css hampeln darf.
Gruss, Jan aus Dresden
-
Hallo Jan,
Anfangs hat der hampel mit js gehampelt aber da meinte mal jemand, dass das "doof" ist und so habe ich ihm dann irgendwann mal verboten mit js herumzuhampeln, so dass er jetzt nur noch mit css hampeln darf.
habe wirklich keine Ahnung, wer es war, der nicht mehr wollte, dass
der Hampelmann mit JavaScript herumhampelt und nur noch mit CSS
herumhampeln darf ;-)Viele Grüße,
Stefan-
Hallo Stefan,
habe wirklich keine Ahnung, wer es war, der nicht mehr wollte, dass
der Hampelmann mit JavaScript herumhampelt und nur noch mit CSS
herumhampeln darf ;-)Ahh, ich ahnte es aber ich wollte niemanden falsch "verdächtigen".
Gruss, Jan aus Dresden
-
-
-
-
-
-
-
-
Hallo Roger,
Du kannst die Links als Liste ausgeben und per
list-style-image (eigene Bullet-Grafik) (siehe SelfHTML)
ein eigenes Bild für das Bulletzeichen festlegen.Grüße
Kirsten