Joomla 3 horizontaal menu items centreren

[Tjoeny]

Hoi Allemaal,

Ik ben bezig met het bouwen van een website met Joomla 3, ik blijf echter tegen hetzelfde probleem aan lopen en heb al behoorlijk veel tijd besteed aan 't zoeken van een gepaste oplossing maar op de een of andere manier lukt 't niet dus ik vroeg me af of jullie naar de CSS wilden kijken wat ik fout doe.

De bedoeling is zoals de titel van dit topic al aangeeft om de menu items te centreren (of uit te spreiden als dat makkelijker gaat) op de horizontale navigatie balk:

/* Menu*/
#nav-w {z-index: 999; position:relative; }
#nav {min-height: 45px; max-width:940px; padding:0 10px; margin:0 auto; border-bottom:none; position:relative; background: url(../images/nav.png) 0 0 no-repeat; }
#nav ul {margin:0; padding:0; float:left; }
#nav ul li {list-style:none; display:inline-block;position:relative; padding:0; margin:0 1px 0 0; height:45px; border-right:none; font-family:'Harabara',Arial, Helvetica, sans-serif;}
#nav ul li a { display:block;padding:0 15px; margin:0;line-height:43px;text-decoration:none;font-size:15px; text-transform:uppercase; letter-spacing:1px;
-webkit-transition:none; -moz-transition:none; -o-transition: none; transition:none;
-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
#nav ul.menu > li > a {color: #999; text-decoration: none; text-shadow:none; border-width:1px; border-style:solid; border-color:transparent}
#nav ul.menu > li > a:hover, #nav ul.menu > li.sfHover > a,
#nav ul.menu > .active > a,
#nav ul.menu > .active > a:hover{color: #fff; text-decoration: none; background:url(../images/nav-a.png) 0 0 repeat-x; border:1px solid #E28235}
#nav ul li a span.menutitle {}
#nav ul li a span.menudesc {display:none}
#nav ul li a span.sf-sub-indicator { padding:0 0 0 10px;}

Deel 2

/* Menu */
#nav-w { background:#DADADA; height:auto; display:block;}
#nav { position: relative; display: none; background:#DADADA; padding:0;}
#nav ul { position:relative; width: 100%; display: block; border : none; background:#DADADA; overflow:hidden}
#nav ul li {clear: both;float: none!important; border-right:none; display:block; max-width:100%; margin:0; border-bottom:1px solid #d4d4d4}
#nav ul li a { margin:0; display:block; -webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0; font-size:18px}

Ik heb na wat zoeken al verschillende oplossingen gevonden die in theorie zouden moeten werken zoals text-align center, margin naar auto en inline-block maar aangezien ik niet bepaald een expert ben in Joomla of CSS blijf ik blijkbaar tegen tegenstrijdigheden oplopen waardoor 't niet werkt. Vandaar dat ik enige hulp enorm zou waarderen.

Bij voorbaat dank,

Tjoeny

 

[Tjoeny]

Uiteindelijk via een andere weg en veel zoeken een oplossing gevonden, mochten mensen geïnteresseerd zijn:

#nav text-align:center;
#nav ul float:left (verwijderen)