zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafiken per CSS-Angaben in den Link integrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2007, 09:38
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard 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>
Hier das CSS dazu

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;		
}
Im Voraus schon mal vielen Dank an alle die sich hierfür die Zeit nehmen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2007, 20:45
Benutzerbild von SternchenHH
Neuer Benutzer
neuer user
 
Registriert seit: 29.10.2006
Beiträge: 18
SternchenHH befindet sich auf einem aufstrebenden Ast
Standard

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>
CSS:

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2007, 23:22
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Warum einfach, wenn's auch kompliziert geht - solche Grafiken bindet man als background-image ein.
Mit Zitat antworten
  #4 (permalink)  
Alt 19.03.2007, 19:26
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard

Hallo, erstmal Danke für die Antworten!

#SternchenHH
Interessante Idee... aber wenn's der IE nicht darstellt, sehens leider über die Hälfte nicht

#heiko_rs
Genau... das is' ist!!!!
Hatte es zwischenzeitlich noch mit "list-style-image" versucht, dass hat aber leider auch nicht hingehauen...

Aber das "background-image" funzzt zumindest schon mal vom Prinzip her... habe ich eben auf einer Testseite mal getest... werde nun versuchen das ins Layout zu packen!
Mit Zitat antworten
  #5 (permalink)  
Alt 19.03.2007, 19:36
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 19.03.2007, 22:27
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Daumen hoch

#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>
NEU
Code:
<li id="navi_oben_home"><a href="index.htm" title="Home">Home</a></li>
CSS
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;		
}
Jetzt könnte man sogar noch für die a:hover + a:active eine unterschiedliches Icon einbinden...
Mit Zitat antworten
  #7 (permalink)  
Alt 19.03.2007, 23:37
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von css_tester Beitrag anzeigen
da ich die Icons nun per "background-image" im Link einfüge, gibt es doch gar kein alt="" oder?
Genau.

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.03.2007, 00:23
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Daumen hoch

#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 */
}
und habe mir gleich noch einen Unterordner angelegt, worin ich die index.html nun auch mal schiebe, um mir das ganze ohne CSS anzeigen zu lassen

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 mit CSS

Link ohne CSS

Geändert von css_tester (20.03.2007 um 00:25 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:58 Uhr.