Navigationsliste zentrieren

[LisaB]

Hallo,
ich bin relative Anfängerin und hab grad ein Problem.
Ich habe eine Navigationsleiste gemacht, die horizontal ist und aus 5 Bildern entsprechend den 5 Links besteht.
Am Anfang hat sie sich immer ganz link am Rand aufgefädelt, bis ich dann float:left eingesetzt habe, jetzt ist sie zumindest in einer horizontalen Linie.

Leider schaffe ich es jetzt nicht, sie zu zentrieren.

Hier der hmtl-code:

<div id="navcontainer">
            <ul id="navcontainer">
                <li><a class="home dsR2" href="home.html"><span>Home</span></a></li>
                <li><a class="benny dsR9" href="Benny.html"><span>Benny</span></a></li>
                <li><a class="gina dsR10" href="Benny.html"><span>Gina</span></a></li>
                <li><a class="Kitten dsR4" href="Benny.html"><span>Kitten</span></a></li>
                <li><a class="Galerie dsR11" href="Benny.html"><span>Galerie</span></a></li>
                <li><a class="Kontakt dsR6" href="Benny.html"><span>Kontakt</span></a></li>
                
            </ul>
            </div>

Und hier das zugehörige CSS:

#navcontainer ul {
   margin: 0 auto;
   padding: 0;
   list-style-type: none;
   height: 50Px;
   width: auto;
   background: url(linkleiste2.png) repeat-x;
   text-align: center;
   
   
   ;
   }
   #navcontainer li {display: inline;}

#navcontainer ul li {
   display: inline !important;
   margin: 0;
   padding: 0 0 0 0; 
   width: 400Px;
   height: 50Px;
   text-align: center;
   
   }

#navcontainer ul li a {
   display:block;
   border: none;
   height: 50Px;
   float: left;
   }

#navcontainer ul li a span {
   display: none;
   }
 
#navcontainer ul li a.home {
   background: url(Home.png) top left no-repeat;
   width: ;
   height: 50Px ;
   }
  

   
 
#navcontainer ul li a.benny {
   background: url(Benny.png) center  no-repeat;
   }
#navcontainer ul li a.gina {
    background: url(Gina.png)  center no-repeat;}
#navcontainer ul li a.Kitten {background: url(Kitten.png) center no-repeat;}
#navcontainer ul li a.Galerie {background: url(Galerie.png) center no-repeat;}
#navcontainer ul li a.Kontakt {background: url(Kontakt.png) center no-repeat;}

#navcontainer { top: center; height: 50px; background: url(Linkleiste2.png) top left repeat-x; text-align: center;}

Der Code sieht natürlich fuchtbar aus vor lauter rumprobieren, der wird dann noch bereinigt.

Wie schaffe ich es, die Linkliste zu zentrieren?

 

[threadi]

Das kriegst du auch nicht zentriert, solange bei #navcontainer ul keine feste Breite angegeben ist.

 

[LisaB]

Danke Threadi,
es funktioniert jetzt!

 

[csstester]

und selbstverständlich darfst du eine ID nur einmal verwenden... wozu brauchst du um die <ul id="navcontainer> noch ein DIV mit der selben ID ??

 

[LisaB]

hmm... keine ahnung.
war auch so ein verzweifelter versuch, vielleicht ein element innerhalb eines bestimmten div zentriert zu bekommen.

wie gesagt, den ganzen code werde ich noch bereinigen.

in der verzweiflung quetscht man halt alles mal kurz rein, um zu sehen ob es dann funktioniert...