#1 17. Juli 2013 Rollover Navigation Problem Hallo zusammen, versuche mich grade in der Erstellung einer Webseite. So nun zum eigentlichen Problem: Ich möchte in der Navigation 3 bilder anordnen mit jeweils einem Rolloverbild. Leider funktioniert es nicht ganz wie ich es will entweder es wird die Navi richtig angeordnet aber sind dann nicht klickbar oder aber die Links sind klickbar aber die hintergrund bilder werden nicht angezeit... So langsam verzweifel ich da... Index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DropshippingFront</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="width:994px;margin:0px auto;"> <div id="header"> <div id="logo"><a href="#"><img src="logo.png" width="285" height="40" alt="Webseite" /></a></div> <div id="navigation"> <ul id="navmenu"> <li id="link1"><a href="#" target="_self"></a></li> <li id="link2"><a href="#" target="_self"></a></li> <li id="link3"><a href="#" target="_self"></a></li> </ul> </div> <div class="clr"></div> </div> </div> </body> </html> Css Code: @charset "utf-8"; /* CSS Document */ * { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-image: url(bg.png); background-repeat: repeat-x; background-color: #fafafa; } #logo { float: left; width: 285px; height: 40px; padding-top: 15px; } #navigation { float: right; width: 709px; height: 40px; padding-top: 15px; } .clr { clear: both; } #navmenu li { list-style-type: none; float: left; padding-right: 10px; padding-left: 10px; height: 17px; } #navmenu li a { /* höhe der verwendeten bilder */ display: block; height: 17px; } #link1 { /* hintergrundbild des links 1 */ background: url(link.png) no-repeat; width: 47px; } #link1:hover { /* hintergrundbild des links 1 beim mouse over*/ background: url(link2.png) no-repeat; width: 47px; } #link2 { /* hintergrundbild des links 2 */ background: url(lieferanten.png) no-repeat; width: 119px; } #link2:hover { /* hintergrundbild des links 2 beim mouse over*/ background: url(lieferanten.png) no-repeat; width: 119px; } #link3 { /* hintergrundbild des links 3 */ background: url(registrieren.png) no-repeat; width: 106px; } #link3:hover { /* hintergrundbild des links 3 beim mouse over*/ background: url(registrieren.png) no-repeat; width: 106px; } Kann mir da jemand helfen und schauen was da falsch läuft?! Da es auch mein erstes CSS Layout ist bin ich für jede Art von verbesserung offen LG Sarah + Multi-Zitat Zitieren
#2 17. Juli 2013 Zuletzt bearbeitet: 17. Juli 2013 AW: Rollover Navigation Problem Edit fiddle - JSFiddle Der letzte Link sollte funktionieren wie du es willst. Code: #link3:hover a { + Multi-Zitat Zitieren