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

Hover-Effekt in Navigation

Corraggiouno

Mitglied
Hi,

mein html-code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
     <div id="maintext_box_left">
     blub blub
     </div>
  </div>
</div>
</body>
</html>
mein css-code:
Code:
html {
height: 100.3%;
}

body {
font-family: Verdana, sans-serif;
font-size:0.8em;
background:#eeeeee;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 810px;
margin:15px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:155px;
text-indent: -999em;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:800px;
height:35px;
margin-left:6px;
line-height:35px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:left;
width:160px;
text-align:center;
}

div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}

div#nav a.noborder {
border: none;
}


div#nav a:hover {
background: url(../images/nav_hover.gif) repeat-x;
text-decoration:underline;
}



div#maintext {
background: url(../images/maintext_bg.gif) repeat-y;
margin-left:6px;
width:900px;
height:350px;
padding-top: 15px;
}

div#maintext_box_left {
background: url(../images/maintext_box_left.gif) no-repeat;
width: 305px;
height: 340px;
float:left;
margin-left:6px;
padding-top:15px;
padding-left: 15px;
}
Kann mir jemand sagen, warum der Hover-Effekt um 1 px nach oben verschoben wird, wenn man mit der Maus drüber fährt?
Finde meinen Fehler nicht!
NET
 
Zuletzt bearbeitet:
Das ist ja fast nicht erkennbar.
Ich glaube eher, dass es eine optische Täuschung ist. Baue mal die Grafik des Normalzustands in hover ein. Dann sieht man keinen Unterschied.
Entweder liegt es wirklich an der Optik der Grafiken oder kontrolliere die Hovergrafik, ob da evtl. noch ein kleiner Rand bzw. Versatz drin ist.
Am Code liegt es m.E. nicht.

edit: zu spät :-(
 
Zurück
Oben