per css Links mit Bilder bestücken

[Brei]

Hallo

geht es, dass ich bein links per css vorgeben, dass vor und hinter jedem link eine kleine Grafik angezeigt wird? Z.B. kleine Dreiecke damit sich die links besser abheben?

[tobias-digital]

@kills: Erster!

Moin!

Ja, das geht:

...

<style type="text/css">

a {

  padding: 0px 10px 0px 0px;

  background-image: dreieck.gif;

  background-repeat: no-repeat;

  background-position: center right;

}

</style>

...

<a href="#">Testlink</a>

...

Hoffe es hilft!

Gruß, Tobias

[Brei]

ah, danke. Und wenn ich dahinter UND davor so ein bild haben möchte?

[tobias-digital]

Das wäre etwas schwieriger, ich habe das noch nie gemacht. Aber unser geschätzter Kollege Eric Meyer demonstriert sowas auf seiner Seite: http://www.complexspiral.com/publications/rounding-tabs/

Im Prinzip macht er es wie ich beschrieben habe und packt noch nen <span> um den a-Tag. Dem span gibt er dann auch ein Hintergrundbild welches links ausgerichtet ist und linken Innenrand hat.

[etreu]

Eigentlich gar nicht so schwer:

a.className:before {

    content: url('pfad/zum/bild);

}


a.className:after {

    content: url('pfad/zum/bild);

}

[tobias-digital]

Das geht aber IMHO nicht mit IE*

[kills]

@kills: Erster!

da ist man ma 1 tag im Urlaub und dann sowas...

Wie meine Vorredner schon sagten, ist das ganze mit 2 Bildern nicht ganz so einfach...

Ausser du willst es nur Mozilla komp. machen dann ist es wiederrum umso leichter...

Ich markiere Links im Fortlaufenden Text gerne durch ein Symbol und eine gestrichelte Unterlinie