• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Denkfehler im Menü

K

kercon

Mitglied
Hallo, irgend wie habe ich einen Denkfehler im menü...
Bei Mouseover soll sich der Grafik-Button (gänzlich ohne Text) verändern...

Code: 
@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */


*{
    margin:0;
    padding:0;
    }

body {
    background-color:#CCCCCC;
    }

#wrapper {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    position:absolute; 
    top: 50%; 
    left: 50%;  
    margin-left: -512px;
    margin-top: -390px;
    width:1024px;
    height:768px;
    }
    
#header {
    background-image:url(../images/head01.gif);
    width:1024px;
    height:89px;
    }
    
#navigation {
    background-image:url(../images/navigation.gif);
    width:1024px;
    height:104px;
    }
    
#button1 { /* HOME */
    position:absolute;
    margin-left:714px;
    width:100px;
    height:104px;
    }
    
#button1 a:link, #button1 a:visited {
      background-image:url(images/button1.gif);
      width:100px;
    height:104px;
  }

#button1 a:hover {
      background-image:url(images/button1over.gif);
     width:100px;
    height:104px;
   }    
    
#button2 { /* KONTAKT */
    position:absolute;
    margin-left:814px;
    width:100px;
    height:104px;
    }
    
#button3 { /* IMPRESSUM */
    position:absolute;
    margin-left:914px;
    width:110px;
    height:104px;
    }        
    
#foto {
    background-image:url(../images/foto.gif);
    width:424px;
    height:575px;
    float:left;
    }
    
#main {
    background-image:url(../images/back.gif);
    width:600px;
    height:575px;
    position:absolute;
    margin-left:424px;
    float:left;
    }

#footer {
    clear:left;
    text-align:center;
    font-size:10px;
    padding-top:5px;
}

HTML: 
<!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> </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

<div id="wrapper">
    <div id="header"></div>
    
    <div id="navigation">
        
        <!-- Home -->
        <div id="button1">
            <a href="#"><img src="images/button1.gif" /></a>
        </div>
        
        <!-- Kontakt -->
        <div id="button2">
            <a href="#"><img src="images/button2.gif" /></a>
        </div>
        
        <!-- Impressum -->
        <div id="button3">
            <a href="#"><img src="images/button3.gif" /></a>
        </div>
    
    </div> <!-- /navigation -->
    
    <div id="foto"></div>
    
    <!-- Inhalte -->
    <div id="main">
    
    </div>
    
    <div id="footer">
        Kleingedrucktes
    </div>

</div>

</body>

</html>

schonmal vielen Dank für Eure Hilfe...
 
Werbung:
Ich sehe da kein Menü. Wenn diese div-Suppe ein Menü sein soll, dann solltest Du sie zu einem richtigen Menü abändern. Also:

HTML: 
<ul id="navigation">
 <li><a href="#">&nbsp;</a></li>
 <li><a href="#">&nbsp;</a></li>
 <li><a href="#">&nbsp;</a></li>
</ul>

Und wie Tronjer schon sagt, gib den Link die Grafik als Hintergrundbild. Dann kannst Du es per CSS-Pseudoklasse hover auch verändern. Alles andere würde JavaScript erfordern, was heutzutage nicht mehr notwendig ist.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben