PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : css links mit grafiken??


Morpog
2006-06-04, 19:09:00
hallo, habe an der website an der ich grade für meine firma bastel ne designvorgabe dass bei jedem link so nen kleiner grafikpfeil dafor sein muss.

jetzt hab ich mir überlegt ob ich dass in meine zentrale .css datei irgendwie einbauen kann? ist das möglich?

darph
2006-06-04, 19:22:13
Theoretisch (http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after) schon.

Praktisch kann der IE6 das nicht. Du könntest dir ein Behavior schreiben, das das macht.


€dit: Einfacher geht's natürlich auch so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- content should be application/xhtml+xml -->
<!-- fix the FOUC -->
<script type="text/javascript"> </script>
<style type="text/css" media="screen">
p a {
background-image: url("pfeil.gif");
background-repeat:no-repeat;
padding-left:10px;
background-position: left center;

}
</style>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<p>ADS ist zwar lange bekannt, und es existieren auch
<a href="studien.html">Langzeitstudien</a> zur Behandlung mit
Methylphenidat und zur Biographie unbehandelter Betroffener,
die Durchbrüche in der Erforschung der Genese von ADS und das
Begreifen als neurobiologische Störung folgten aber erst seit
Alan Zametkins PET-Studie von 1990. So ist ADS immer noch nicht
vollständig erforscht, und der aktuelle Forschungsstand auch
außerhalb der Neurologie ist leider nicht immer ausreichend
bekannt, um Fehlinformationen und unsachlichen
Argumenten vorzubeugen.
</p>
</body>
</html>

Morpog
2006-06-04, 19:41:24
das selfhtml beispiel ist ja schön gelöst, leider gibts in meiner firma nur IE6.....

das andere beispiel raff ich nicht vom reinen code anschauen :-) muss ich wohl ausprobieren ;-)

edit:

ok jetzt versteh ich es, ist aber mal ne dreckige lösung :-)

btw, thx für die schnelle hilfe.

darph
2006-06-04, 19:49:13
Ist doch ganz einfach: Jeder Link, der in einem Paragraphen sitzt, bekommt ein Hintergrundbild, das nur einmal dargestellt wird und mittig links sitzt. Damit das nicht hinter dem Text ist, sondern daneben, verschieben wir den Text um ein paar Pixel nach rechts (genauer gesagt verschieben wir den linken Rand nach links).

Aussehen thut das dann so:
http://img422.imageshack.us/img422/8861/pfeil8uo.png (http://imageshack.us)

€dit: Wieso dreckig? Die Wikipedia macht es scheinbar auch nicht anders. Und im Quelltext selbst hat das Bild nichts zu suchen, weil's ja keinen Informationsgehalt hat. Wenn das nur auf externe Links angewendet werden soll (Wikipedia-Style), dann einfach eine Klasse "external" verwenden.

Morpog
2006-06-04, 20:32:44
bei meinem 1 minuten schnellversuch mit irgendeinem bild sah das ein wenig anders aus als auf deinem bild :-)

ich werds andersrum machen, standardmäßig mit bild und für links ohne den pfeil ne klasse

Morpog
2006-06-05, 23:32:07
hmmmpf. es ist tatsächlich noch Internet Explorer 5.0 auf den Rechnern bei uns in der Firma drauf......... das padding-right wird leider ignoriert :-(

Sephiroth
2006-06-05, 23:49:18
Morpog[/POST]']hmmmpf. es ist tatsächlich noch Internet Explorer 5.0 auf den Rechnern bei uns in der Firma drauf......... das padding-right wird leider ignoriert :-( echt? eigentlich sollte er das können (http://www.css4you.de/padding-right.html)

Morpog
2006-06-06, 00:35:48
kann er auch generell, nicht aber in dieser speziellen situation.

hab nen beispiel von selfhtml mit padding-right angesehen da klappte es wunderbar. dachte ich spinne, hab den rechner gewechselt (2 rechner in der firma haben XP wegen remote desktop), dort war IE 6 drauf und es klappt wunderbar.