Tweet
Moin meine Leidensgenossen:
habe folgendes Problem, das mich absolut ratlos macht:
Wenn bei einer Linkliste aus optischen Gründen eine Grafik verwendet werden soll, gehe ich normalerweise folgender maßen vor:
- lege die Links in einer Liste an
- Schreibe das Linkziel normal in den a href Tag
- mache die Schrift mit text-indent:-5000px; "unsichtbar"
- weise jedem Link per id eine Hintergrundgrafik zu
So habe ich ein Dokument, das auch ohne CSS vernünftig strukturiert ist, und trotzdem "hübsch" aussieht....
Tja, bis heute
folgender Code ist ein Extract aus einem aktuellen Projekt:
Im FF (1.5.0.8) und Opera 9 passiert nix, ergo der text-intend wirkt nicht, im IE jedoch wird mir die ganze Liste aus dem Viewport gezogen....
Kann das von euch einer nachvollziehen oder übersehe ich irgendwo was? Bin auch für allgemeinen Trost & Beileides bekundungen Dankbar
habe folgendes Problem, das mich absolut ratlos macht:
Wenn bei einer Linkliste aus optischen Gründen eine Grafik verwendet werden soll, gehe ich normalerweise folgender maßen vor:
- lege die Links in einer Liste an
- Schreibe das Linkziel normal in den a href Tag
- mache die Schrift mit text-indent:-5000px; "unsichtbar"
- weise jedem Link per id eine Hintergrundgrafik zu
So habe ich ein Dokument, das auch ohne CSS vernünftig strukturiert ist, und trotzdem "hübsch" aussieht....
Tja, bis heute
folgender Code ist ein Extract aus einem aktuellen Projekt:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#impressum ul { }
#impressum ul li { }
#impressum ul li a { text-indent:-5000px;
background-position:center;
background-repeat:no-repeat;
}
#impressumLink {background-image:url(myicons/imprint.gif); }
#terms_of_use {background-image:url(myicons/terms.gif); }
#contact {background-image:url(myicons/contact.gif); }
-->
</style>
</head>
<body>
<div id="impressum">
<ul>
<li><a href="#" id="impressumLink">Imprint</a></li>
<li><a href="#" id="terms_of_use">Terms of Use</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul>
</div>
</body>
</html>
Kann das von euch einer nachvollziehen oder übersehe ich irgendwo was? Bin auch für allgemeinen Trost & Beileides bekundungen Dankbar
Kommentar