✔ Horizontale Navi mit Background Image und Hover

[ray2mi]

Hallo

Ich möchte eine horizontale Navi bauen...aus einer Liste.
Ich will aber keinen Text für die Links eingeben sondern immer eine Hintergrundgrafik verwenden.

Also eine Grafik mit "Home" und eine mit "Links". Dann soll noch ein Hover effekt enstehten, wenn ich mit der Maus drüber gehe...Button soll die Farbe verändern.

Ich bekomme es nun nicht hin, das ich eine Liste habe mit unterschiedlichen Hintergrundgrafiken, die sich beim Hovern auch noch verändern...bitte um Hilfe

 

[Maik]

Hi,

mein eigens für diesen Anwendungsfall verfaßte CSS-Tutorial CSS-Rollover - Teil 2 hilft dir da weiter

mfg Maik

 

[ray2mi]

Jawoll, wie immer eine hilfreiche Antwort Danke

Aber ich habe doch noch ein Problem...ich will die Navigation horizontal haben...wenn ich also den display: block ...in inline umwandle dann sieht man die navigation gar nicht mehr, die verschwindet irgendwo hin.

Und wenn ich die Navi als Block lasse, dann verlängert diese grundlos meine Seite nach unten :s

 

[Maik]

Tausch mal display:block gegen float:left aus, und gib für das <li>-Element folgende Regel an:

ul#nav li {
display:inline;
}

mfg Maik

 

[ray2mi]

Uhhh mhhh...also danke für den Tip

es funktioniert mit dem Float, ganz egal ob es da ein Block element oder ein Inline Element ist.

Aber...der IE stellt es nicht in der vertikalen dar sondern eher in einer Treppenform, er setzt jeden weiteren horizontalen Button um ca. 23px verschoben nach unten dar.

Mhh ich überlege grade wo diese 23px herkommen

                       <div id="navigation">
                       	<ul id="navigationsliste">
                        		<li id="navi01"><a href="####.html" id="link1" title="news"></a></li>
                            
                        		<li id="navi02"><a href="####.html" id="link2" title="news"></a></li>
                            
                            <li id="navi03"><a href="####.html" id="link3" title="news"></a></li>
                            
                            <li id="navi04"><a href="####.html" id="link4" title="news"></a></li>
                            
                            <li id="navi05"><a href="####.html" id="link5" title="news"></a></li>
                            
                            <li id="navi06"><a href="####.html" id="link6" title="news"></a></li>
                            
                            <li id="navi07"><a href="####.html" id="link7" title="news"></a></li>
                            
                            <li id="navi08"><a href="####.html" id="link8" title="news"></a></li>
                        </ul>
                       </div>

#navigation {
 float: left;
 height: 63px;
 width: 716px;
 color: #333;
 overflow: hidden;
}
	ul#navigationsliste {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul#navigationsliste a {
		float: left;
		display: block;
		width: 83px;
		height: 63px;
		margin: 0;
	}
	
	ul#navigationsliste li {
		margin-left: 0;
	}
	
		/* News__________________________________________________________ */
		ul#navigationsliste li a#link1:link,
		ul#navigationsliste li a#link1:visited {
			background-image: url(../design/btn_news.jpg);
		}
		
		ul#navigationsliste li a#link1:hover,
		ul#navigationsliste li alink1:focus {
			background-image: url(../design/btn_newshover.jpg);
		}
		
		/* Crew__________________________________________________________ */
		ul#navigationsliste li a#link2:link,
		ul#navigationsliste li a#link2:visited {
			background-image: url(../design/btn_crew.jpg);
		}
		
		ul#navigationsliste li a#link2:hover,
		ul#navigationsliste li a#link2:focus {
			background-image: url(../design/btn_crewhover.jpg);
		}

		/* Bio__________________________________________________________ */
		ul#navigationsliste li a#link3:link,
		ul#navigationsliste li a#link3:visited {
			background-image: url(../design/btn_bio.jpg);
		}
		
		ul#navigationsliste li a#link3:hover,
		ul#navigationsliste li a#link3:focus {
			background-image: url(../design/btn_biohover.jpg);
		}

also vom Code her...finde ich jetzt keine direkte Abweichung :s

 

[Maik]

Du hast meinen zweiten Hinweis nicht in die Tat umgesetzt.

mfg Maik

 

[ray2mi]

ohw ja...hihihi...das ist mal wieder peinlich 0_0
aber he es geht...geil, danke