Hover-Effekt in Navigation

html.de-Forum HTML, XHTML & CSS
1

Hi,

mein html-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:

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

2

Der Fehler liegt in der Grafik nav_bg.gif (div#nav).
Bei a:hover wird der graue px durch nav_hover.gif überdeckt.

3

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 :frowning:

4

Ich habe mir die Grafiken mit 1600% Vergrößerung angesehen :wink:

5

hey, super danke…:slight_smile:
ihr seit die Besten!!