|
||||
Grafiken per CSS-Angaben in den Link integrieren
Hi,
mein erstes Layout ohne Tabellen Hier die Früchte der vergangen Tage und vielen verzweifelten Stunden Wer das ganz mal real sehen will und ein Kommentar abgeben möchte, bitte schön: TESTSite Habe mir viel Mühe gegeben und auch viele Kommentare im Quellcode und im StyleSheet hinterlassen... naja... habe da einiges gemacht oder getestet, was ich noch nicht so ganz verstehe Problem: Habe nun oben Links eine kleine NaviLeiste mit Icons erstellt! Und die Icons per <img> dem Link mitgegeben. Bestimmt kann man das doch auch "einfacher" im StyleSheet mitgeben? Suche ein Tipp/Lösungsvorschläge Ein Link mal als Beispiel: Code:
<div id="header"> <ul id="navi_oben"> <li class="strich"><a href="index.htm" title="Home">Home<img style="vertical-align: bottom;" src="images/icon_home.gif" width="23" height="19" alt="" /></a></li> </ul> </div> Code:
/* Navigation ganz oben im Header ------------------------------------- */ /* -------------------------------------------------------------------- */ ul#navi_oben { float: left; padding-left: 257px; padding-top: 25px; } ul#navi_oben li { float: left; list-style-type: none; vertical-align: middle; } #navi_oben li.strich a { border-right: 1px solid #666; } #navi_oben a { /* display: block; */ /* nur für Senkrechte Navigation */ text-decoration: none; background-color: transparent; font-weight: bold; font-size: 80%; padding: 0 7px; vertical-align: middle; } #navi_oben a:link, #navi_oben a:visited { color: #666; vertical-align: middle; } #navi_oben a:hover { color: #f90; vertical-align: middle; } #navi_oben a:active { color: #f90; vertical-align: middle; } |
Sponsored Links |
|
||||
Hallo!
Du könntest die Icons mit dem Pseudo-Element »:after« realisieren. Leider hat man im Hause Microsoft bis zum heutigen Tag noch keinen Wert auf die Unterstützung dieser Pseudo-Elemente gelegt. Soll heißen: alle IE bis einschließlich 7 würden die Icons nicht darstellen. Wenn Du damit leben kannst (ich könnte es ), kannst Du die Zuordnung zu den Verweisen mit Attribut-Selektoren umsetzen. Die werden von älteren IE zwar auch nicht unterstützt, aber das wäre dann ja auch egal. Code:
<ul id="navi_oben"> <li class="strich"><a href="index.htm" title="Home">Home</a></li> </ul> Code:
#navi_oben a[title="Home"]:after { content: url(images/icon_home.gif); }
__________________
Sternchens kleines Sammelsurium Geändert von SternchenHH (18.03.2007 um 20:47 Uhr) |
Sponsored Links |
|
||||
Gib deinen Icons ALT- "namen"
Dann siehst du ob sie angezeigt werden bzw ob der pfad nicht stimmt etc. grüße Gabriel
__________________
Meine Spielwiese: http://blog.kanedo.net Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt Für open Source Liebhaber: open Com Auch ich Zwitschere als @kanedo |
|
||||
#kampfgnom
da ich die Icons nun per "background-image" im Link einfüge, gibt es doch gar kein alt="" oder? #heiko_rs ja... hat prima gefunzzt... auch wenn die "Ausrichtung" nicht ganz einfach war Beispiel ALT Code:
<li class="strich"><a href="index.htm" title="Home">Home<img style="vertical-align: bottom;" src="images/icon_home.gif" width="23" height="19" alt="" /></a></li> Code:
<li id="navi_oben_home"><a href="index.htm" title="Home">Home</a></li> Code:
#navi_oben_home a:link, #navi_oben_home a:visited { color: #666; vertical-align: middle; background-image: url("../images/icon_home.gif"); background-repeat: no-repeat; background-position: left; } #navi_oben_home a:hover, #navi_oben_home a:active { color: #f90; vertical-align: middle; background-image: url("../images/icon_home.gif"); background-repeat: no-repeat; background-position: left; } |
|
||||
Zitat:
Was Du noch tun solltest: Die Links von #navi_header um entsprechenden Text ergänzen (und diesen per text-indent: -9999px; verschwinden lassen), denn sonst ist diese Navigation ohne CSS nicht benutzbar. |
|
||||
#heiko_rs
Jawohl, DANKE - super Tipp - habe ich auch sofort umgesetzt Code:
ul#navi_header { padding-left: 41px; padding-top: 92px; text-indent: -9999px; /* text verschwinden lassen, anzeige nur ohne css */ } ABER warum geht das in der letzten Fusszeile bei den beiden W3C-Grafiken nicht ebenfalls???? Ich weiß, eigentlich bräuchte ich das dort gar nicht... Grafiken nicht per CSS und alt="" auch da... aber Es sollte doch auch gehen!?!? Was übersehe ich da nur...???? Denkfehler? Code:
<div id="footer2"> <p id="fuss2"> <a href="http://validator.w3.org/(...)" target="_blank"><img src="http://xhtmlforum.de/images/validxhtml.gif" width="80" height="15" alt="Valid XHTML" />Valid XHTML</a> <a href="http://jigsaw.w3.org/css(...)" target="_blank"><img src="http://xhtmlforum.de/images/validcss.gif" width="80" height="15" alt="Valid CSS" />Valid CSS</a> </p> </div> p#fuss2 { text-align: right; padding-top: 5px; padding-right: 80px; letter-spacing: 5px; text-indent: -9999px; /* text verschwinden lassen, anzeige nur ohne css */ } Link ohne CSS Geändert von css_tester (20.03.2007 um 00:25 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Menüpunkt-Markierung per css steuern | asmodi-c | CSS | 7 | 05.03.2010 20:19 |
CSS Validator per Link einbinden | (55 | CSS | 3 | 08.05.2007 15:05 |
mouseover und grafiken mit css??? | galaxy | CSS | 7 | 21.03.2004 22:56 |
Seite "halbiert" nach Klick auf Link - CSS Bug? | Nina | CSS | 1 | 14.01.2004 15:20 |
per Link den Inhalt im <div> Container ändern ? | Andy | CSS | 7 | 22.08.2003 14:21 |