[HTML/CSS]List op de goede plek krijgen

[Moracin]

Ik moet een website maken voor een schoolproject bij Informatica en ik heb een klein maar frustrerend probleem.
Mijn Navigation krijg ik maar niet op de goede plek.
Link naar de Layout waar de navigation goed staat: http://i39.tinypic.com/21jq7w7.jpg
Link naar de live site waar het verkeerd staat: .
Mischien is het makkelijk op de lossen maar ik ben er dus nog niet achtergekomen.

Ik zou heel dankbaar zijn als iemand mij hiermee zou kunnen helpen of het op zou kunnen lossen.

Mijn CSS code

Cascading Stylesheet:

#topMenu {
    width:800px;
    height:55px;
    float:left;
    background-color:#777777;
    background-position:bottom;
    background-image:url(images/menubg.png);
    background-repeat:repeat-x;
}

.menu_links a {
    font-weight: bold;
    text-decoration: none;
    color: #777777;
    display: block;
    height:55px;
    padding-top: 15px;
    padding-right: 5px;
    padding-left: 5px;
}

.menu_links ul {
    margin: 0px;
    padding-top: 0px;
}

.menu_links li {
    list-style:none;
    font-size: 14px;
    float: left;
}

.menu_links a:hover {
    color: #FFFFFF;
    background-image:url(images/hover.png);
    background-repeat:no-repeat;
    background-position:top;
}

.menudivider {
    height: 55px;
    background-image: url(images/menudivider.png);
    background-repeat: no-repeat;
}

Mijn HTML code

HTML:

<div id="topMenu">
    <ul class="menu_links">
      <li> <a href="index.html" target="_self">Home</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Architectuur</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Oorlog</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Natuurrampen</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Balsport</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Transport</a></li>
        <li class="menudivider"><a href="index.html" target="_self">Beeldkunst</a></li>
        <li class="menudivider"><a href="index.html" target="_self">About Us</a></li>
    </ul>
</div>

Alvast bedankt

[ Voor 3% gewijzigd door Moracin op 19-11-2020 12:07 ]

[Spockz]

Het ziet er naar uit dat je ergens nog een restje padding of margin van je ul danwel li overhoudt. Voor dit zaken is het ook altijd handig om er even een CSS reset bij te pakken. Welke, dat is een persoonlijke voorkeur.

[Moracin]

Ik heb deze CSS reset gebruikt http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
En dat heeft het opgelost. Bedankt!
Als er nog andere problemen de kop opsteken zal ik ze nog wel posten.

Dus bedankt Spockz, CSS resets kende ik nog niet, dus weer wat geleerd

[ Voor 4% gewijzigd door Moracin op 05-04-2009 22:16 ]