XHTMLforum - grafische Navigation horizontal zentrieren, klappt nicht

Hallo,

ich bin noch CSS Anfänger und habe ein grafisches Navi gebaut, funktioniert auch prima, dank der tollen Anleitung in den FAQs :)

Jetzt sollte das Ganze horizontal zentriert werden. Ich habe es mit der display-table Variante probiert, was leider nicht klappt.

Mit margin: 0 auto im #navi sollte es doch funktionieren? Ich habe wegen des grafischen Menüs noch width Angaben im CSS, die ich aber nicht weglassen kann???

Bin mittlerweile ziemlich ratlos. Ich hoffe es kann mir jemand weiterhelfen.

Hier liegt die Testseite

Und hier kommt der HTML code:

HTML-Code:

<div id="pageheader">

      <div id="header1"> </div>

      <div id="header2">

        <div id="navi">

          <ul>

            <li id="home"><a href="index.html">Home<span></span></a></li>

            <li id="ueberuns"><a href="#">Ueber uns<span></span></a></li>

            <li id="produkte"><a href="#">Produkte<span></span></a></li>

            <li id="anfahrt"><a href="#">Anfahrt<span></span></a></li>

            <li id="kontakt"><a href="#">Kontakt<span></span></a></li>

          </ul>

        </div>

      </div>

      <!--ende header 2-->

    </div>

    <!-- Endepageheader-->

Und hier das CSS

Code:



#navi {

        float: left;

        display: table;

        margin: 0 auto;

}

#navi ul {

        display: table-row;

}

#navi li {

        float: left;

        width: 100px;

        padding-left: 20px;

        list-style-type: none;

        display: table-cell;

}

#navi #home, #navi #ueberuns, #navi #produkte, #navi #anfahrt, #navi #kontakt {

        width: 100px;

}

#navi a, #navi strong {

        display: block;

        height: 26px;

        width: 100%;

        position: relative;

        overflow: hidden;

}

#navi span {

        display: table-cell;

        position: absolute;

        width: 100%;

        height: 26px;

        top: 0px;

        left: 0px;

        background: url(images/navi_1611_hg_nichttransparent.png);

        cursor: pointer;

}

#navi a span {

        cursor: pointer;

}

/* Navi home */                         

        #navi #home a span {

        background-position: 0 0;

}

#navi #home a:hover span, #navi #home a:active span, #navi #home a:focus span {

        background-position: 0 -26px;

}

/* Navi ueberuns */ 

        #navi #ueberuns a span {

        background-position: -120px -0px;

}

#navi #ueberuns a:hover span, #navi #ueberuns a:active span, #navi #ueberuns a:focus span {

        background-position: -120px -26px;

}

/* Navi produkte */

        #navi #produkte a span {

        background-position: -240px 0;

}

#navi #produkte a:hover span, #navi #produkte a:active span, #navi #produkte a:focus span {

        background-position: -240px -26px;

}

/* Navi anfahrt */

        #navi #anfahrt a span {

        background-position: -360px 0;

}

#navi #anfahrt a:hover span, #navi #anfahrt a:active span, #navi #anfahrt a:focus span {

        background-position: -360px -26px;

}

/* Navi kontakt */

        #navi #kontakt a span {

        background-position: -480px 0;

}

#navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span {

        background-position: -480px -26px;

}

Vielleicht kann mir noch jemand verraten, warum links nicht auf sich selber zeigen sollen? Darüber habe ich bisher keine Informationen gefunden.

Danke für eure Hilfe
lila_3