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

li falsch positioniert

T!P-TOP

Mitglied
Hab ein Problem, hier gut zu sehen: http://www.imgbox.de/users/public/images/g4OU8VEYTW.jpg

Die Button haben irgendiwe einen Abstand, habe aber extra margin auf 0 gestellt, dennoch sind sie auf der falschen Position!

Hier dass CSS für die Navi:

HTML:
/* ##########NAVIGATION########## */
ul {
    padding-top: 19px;
    width: 200px;
    height: 240px;
    list-style: none;
 margin: 0px;
   
  
}
#navi li {
    width: 200px;
    height: 40px;
    display: block;
 
}
#navi a {
    padding-top: 7px;
    padding-left: 7px;
    display: block;
    width: 200px;
    height: 40px;
    color: #ABDAFF;
 text-decoration: none;
 
  
}
#navi a:hover {
 color: #FFFFFF;
 display: block;
 background-repeat: no-repeat;
}
/* Backgroundhover für linke Navigation */
#a:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover1.jpg')
}
#b:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover2.jpg')
}
#c:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover3.jpg')
}
#d:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover4.jpg')
}
#e:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover5.jpg')
}
#f:hover {
    width: 200px;
    height: 40px;
 background-image: url('gamebilder/hover6.jpg')
}

Die navigation befindet sich in einem div.

Hier der HTML Teil:

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>Übersicht</title>
<link type="text/css" href="game.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navihinter">
<ul id="navi">
<li> <a id="a" href="uebersicht.htm">Übersicht</a></li>
<li> <a id="b" href="uebersicht.htm">Seite1</a></li>
<li> <a id="c" href="uebersicht.htm">Seite2</a></li>
<li> <a id="d" href="uebersicht.htm">Seite3</a></li>
<li> <a id="e" href="uebersicht.htm">Seite4</a></li>
<li> <a id="f" href="uebersicht.htm">Seite5</a></li>
</ul>
</div>
</div>
</body>
</html>

Auch wenn ich die komplette formatierung, bis auf list-style: none, weglasse, hat die Navi einen Abstand zum linken Rand des divs und schiebt sich nach rechts.

Hab einiges ausprobiert, aber das lässt sich einfach nicht richten :?



mfg
T!P-TOP
 
also das einzige, was ich jetzt sehe ist das padding bei #navi a, aber das scheint mir etwas wenig zu sein für deinen abstand... eine liste wird ja grundsätzlich etwas eingerückt, aber bei margin 0 dürfte das eigentlich nicht passieren...

woher das genau kommt, weiß ich auch nicht, aber mach doch mal für #navi top: -10px; oder mehr, bzw. mach für #navi mal margin: 0px; vielleicht bringt das was
 
Nein - nachwievor der selbe Fehler.

Im WYSIWYG Editor wirds im Entwurf richtig angezeigt, sobald ich es hochlade oder Browservorschau mache, entseteht dieser abstand.

Am padding in der navi a liegts auch nicht. Die hab ich lediglich für die Abstände der links eingesetzt. Auch ohnen dem padding bleibt der abstand bestehen :(
 
Hallo.

Kannst du uns noch den CSS Code von id="navihinter" geben, vielleicht ist das was das dieses aussehen verursacht.

Gruss
Elroy
 
Zurück
Oben