[CSS] Rollover Navigation Problem

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

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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. Anzeige
  3. #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
    {
    
     

  4. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS Rollover Navigation
  1. Antworten:
    8
    Aufrufe:
    673
  2. Antworten:
    0
    Aufrufe:
    1.442
  3. Antworten:
    3
    Aufrufe:
    1.364
  4. Antworten:
    1
    Aufrufe:
    1.008
  5. Antworten:
    2
    Aufrufe:
    1.265