[CSS] Rollover Navigation Problem

Dieses Thema im Forum "Webdesign" wurde erstellt von sarah.lady, 17. Juli 2013 .

Schlagworte:
  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
     
  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
    {
    
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.