Bilder vor Links einfügen
Frederik
- css
0 Anschinsan0 Frederik1 Marc Reichelt0 Gernot Back0 Marc Reichelt0 Mathias Bigge
0 Anschinsan
Hallo!
Ich habe mich schon immer einmal gefragt wie es manche Leute
schaffen vor jeden Link automatisch einen kleinen Pfeil zu setzen.
Ich war mir ziemlich sicher, dass das mit CSS möglich ist, kenne
aber nicht das dazu nötige Attribut.
Oder lieber mit php parsen und davor setzten?
Danke im Vorraus!
Frederik
Hallo Frederick,
Bei CSS ... schau Mal zu CSS 4 You.
:before ist, was du suchst, Pseudoelemente ist dein Stichwort...
http://www.css4you.de/pseudoelproperty.html
Aber mit PHP gehts natürlich auch ;-)
mfg
Anschinsan
Vielen Dank!
Frederik
Hallo Anschinsan,
:before ist, was du suchst, Pseudoelemente ist dein Stichwort...
http://www.css4you.de/pseudoelproperty.html
Ich denke da ist eventuell noch ein Hinweis fällig, denn das besagte Pseudoelement wird vom Internet Explorer in keiner Version interpretiert wie ich von dieser Seite entnehmen kann.
Aber ein bisschen Verschleiß ist ja immer... ;-)
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hallo Marc, hallo Frederik,
Ich denke da ist eventuell noch ein Hinweis fällig, denn das besagte Pseudoelement wird vom Internet Explorer in keiner Version interpretiert wie ich von dieser Seite entnehmen kann.
Aber ein bisschen Verschleiß ist ja immer... ;-)
Aber man kann den Effekt ja auch anders erzielen; z.B. indem man eine Klasse für diesen Typ Link definiert, in dem das Bild als intergrundbild platziert wird. Dann gebe man dieser Klasse noch ein padding-left, breit genug damit das Hintergrundbild nicht von der Linkschrift überdeckt wird. Das hätte dann gegenüber der Pseudoklassen-Methode wohl auch den Vorteil, dass das Bild selbst ebenfalls als verlinkt erscheint.
Gruß Gernot
Hallo Gernot,
Ich denke da ist eventuell noch ein Hinweis fällig, denn das besagte Pseudoelement wird vom Internet Explorer in keiner Version interpretiert wie ich von dieser Seite entnehmen kann.
Aber ein bisschen Verschleiß ist ja immer... ;-)Aber man kann den Effekt ja auch anders erzielen; z.B. indem man eine Klasse für diesen Typ Link definiert, in dem das Bild als intergrundbild platziert wird. Dann gebe man dieser Klasse noch ein padding-left, breit genug damit das Hintergrundbild nicht von der Linkschrift überdeckt wird. Das hätte dann gegenüber der Pseudoklassen-Methode wohl auch den Vorteil, dass das Bild selbst ebenfalls als verlinkt erscheint.
*uarghh*, also einen so miesen Workaround mache ich doch nicht extra für die Benutzer des Internet Explorers.
Da ist mir der Standard wesentlich mehr wert. Auch wenn dieser Workaround den Standard nicht verletzt, ist er doch etwas - unschön, findest du nicht? :-)
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hi Marc,
Da ist mir der Standard wesentlich mehr wert. Auch wenn dieser Workaround den Standard nicht verletzt, ist er doch etwas - unschön, findest du nicht? :-)
Wieso? Funktioniert doch hervorragend.
Viele Grüße
Mathias Bigge
Hi,
Wieso? Funktioniert doch hervorragend.
Im IE 5.0 nicht so wirklich - der macht das Padding bei inline-Elementen nicht und setzt den Text dann auf das Bild ...
Im IE 6.0 gehts, beim IE 5.5 bin ich mir nicht sicher ...
cu,
Andreas
Hi,
Im IE 5.0 nicht so wirklich - der macht das Padding bei inline-Elementen nicht und setzt den Text dann auf das Bild ...
Im IE 6.0 gehts, beim IE 5.5 bin ich mir nicht sicher ...
Also beim IE 5 konnte ich kein Fehlverhalten feststellen. Der 5.5 funktioniert auch. Nur der 6er hat das Problem, daß sich die Grafik unter den Text schiebt, falls der so ausgezeichnete Text gegen den linken Rand "drückt" (s. Coding: Link-Kennzeichnung.
Gruß, Cybaer
hi,
Im IE 5.0 nicht so wirklich - der macht das Padding bei inline-Elementen nicht und setzt den Text dann auf das Bild ...
Im IE 6.0 gehts, beim IE 5.5 bin ich mir nicht sicher ...Also beim IE 5 konnte ich kein Fehlverhalten feststellen. Der 5.5 funktioniert auch. Nur der 6er hat das Problem, daß sich die Grafik unter den Text schiebt, falls der so ausgezeichnete Text gegen den linken Rand "drückt" (s. Coding: Link-Kennzeichnung.
also auf http://coding.binon.net/css/linksign/linksign.htm sehe ich erwartungsgemäß genau das von andreas beschriebene problem, linktext "über" den hintergrundgrafiken.
gruß,
wahsaga
Hi,
also auf http://coding.binon.net/css/linksign/linksign.htm sehe ich erwartungsgemäß genau das von andreas beschriebene problem, linktext "über" den hintergrundgrafiken.
ist in meinem IE 5 hier auch so.
cu,
Andreas
Hi,
ist in meinem IE 5 hier auch so.
Erstaunlich. Ich hatte bei meinen 5er-Tests dieses Problem nicht. Auf dem 5.5 ist es sowieso nicht existent.
Gruß, Cybaer
Hi,
also auf http://coding.binon.net/css/linksign/linksign.htm sehe ich erwartungsgemäß genau das von andreas beschriebene problem, linktext "über" den hintergrundgrafiken.
Und das unterscheidet sich jetzt inwiefern von dem was ich sagte ("daß sich die Grafik unter den Text schiebt")?
Außer natürlich, daß ich noch weiter ausgeführt habe, daß dieses Fehlverhalten "nur" in *einer* bestimmten, *genau zu definierenden* Situation auftritt und nicht immer, wie man beim Lesen der bisherigen Antworten dazu annehmen könnte?
Wenn man möchte, kann man also durchaus dafür sorgen, daß diese Situation nicht eintritt. Man kann aber auch sagen, mit diesem Browserfehler kann man leben.
Gruß, Cybaer
Hallo,
Wenn man möchte, kann man also durchaus dafür sorgen, daß diese Situation nicht eintritt. Man kann aber auch sagen, mit diesem Browserfehler kann man leben.
Und wie kann man das verhintern?
Grüße
Jeena Paradies
Hi,
Und wie kann man das verhintern?
Rektal.
cu,
Andreas
Hallo,
Und wie kann man das verhintern?
Rektal.
hehe hups, ja stimmt ;-)
Und wie kann man das verhindern?
Grüße
Jeena Paradies
Hi,
Und wie kann man das verhintern?
Rektal.
hehe hups, ja stimmt ;-)
Meinst Du hups oder Pups? ;-)
cu,
Andreas
Hallo,
Meinst Du hups oder Pups? ;-)
Hehe, ich konnte es mir gerade noch mit aller Mühe verkneifen aber du anscheinend nicht ;-)
Grüße
Jeena Paradies
Hi,
Meinst Du hups oder Pups? ;-)
Hehe, ich konnte es mir gerade noch mit aller Mühe verkneifen aber du anscheinend nicht ;-)
Es waren zu viele Zwiebeln im Abendessen ...
cu,
Andreas
Hi,
Wenn man möchte, kann man also durchaus dafür sorgen, daß diese Situation nicht eintritt. Man kann aber auch sagen, mit diesem Browserfehler kann man leben.
Und wie kann man das verhintern?
Den Darstellungsfehler? Er tritt nur auf, wenn, wie geschrieben, der Text an den linken Rand gedrückt wird (also wenn der Link am linken direkt am linken Rand steht und dann noch weiterer Fließtext (halt mind. bis zum rechten Rand) folgt.
Ergo: Entweder auf den Fließtext verzichten, oder vielleicht eine unsichtbare, etwas größere Box um den so gekennzeichneten Link ziehen (hm, das wäre ja noch glatt ein Workaround, den ich mal ausprobieren sollte).
Gruß, Cybaer
hi,
also auf http://coding.binon.net/css/linksign/linksign.htm sehe ich erwartungsgemäß genau das von andreas beschriebene problem, linktext "über" den hintergrundgrafiken.
Und das unterscheidet sich jetzt inwiefern von dem was ich sagte ("daß sich die Grafik unter den Text schiebt")?
das unterscheidet sich vom testszenario her.
du sagst, du könntest im IE 5 kein fehlerverhalten feststellen, ich aber schon, s.o.
deine aussage hast du für den IE 6 getroffen.
gruß,
wahsaga
Hi,
das unterscheidet sich vom testszenario her.
Ah, wäre gut, das hinzuzuschreiben. =;-)
du sagst, du könntest im IE 5 kein fehlerverhalten feststellen, ich aber schon, s.o.
Da gibt es wohl unterschiedliche 5er ...
Gruß, Cybaer
Hallo Marc,
Aber ein bisschen Verschleiß ist ja immer... ;-)
Heute im Spiegel gelesen ... es sind schon nur mehr 65% laut Statistik von spiegel.de! Da kommt Freude auf ;-)
mfg
Anschinsan
Hallo Anschinsan,
Heute im Spiegel gelesen ... es sind schon nur mehr 65% laut Statistik von spiegel.de! Da kommt Freude auf ;-)
Ich sag doch, ein _bisschen_ Verschleiß ist immer! *lol*
Marc Reichelt || http://www.marcreichelt.de/
OK Marc,
Schon gut, schon gut ... du hast ja Recht ... Asche über mein Haupt!
Der Tip von Gernot ist besser!
Anschinsan