knoppen menu centreren css

[k l a a s]

Hallo,
Ik had een mooi menu gedownload voor mijn site. Alleen staan de knoppen (links) aan de linker kant. Ik zou ze graag in het midden zien staan. Weet iemand hoe ik dit kan doen? Ik kom er niet uit.

Hier is de css:

.menu1 {
padding:0 0 0 32px;
margin:0;
list-style:none;
height:35px;
background:#fff url(button1.gif);
position:relative;
border:1px solid #000;
border-width:0 1px;
border-bottom:1px solid #444;
}
.menu1 li {
float: center;
}
.menu1 li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#aaa;
text-decoration:none;
font-size:11px;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
padding:0 0 0 8px;
cursor:pointer;
}
.menu1 li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.menu1 li.current a {
color:#fff;
background:url(button3.gif);
}
.menu1 li.current a b {
background:url(button3.gif) no-repeat right top;
}
.menu1 li a:hover {
color:#fff;
background:#000 url(button2.gif);
}
.menu1 li a:hover b {
background:url(button2.gif) no-repeat right top;
}
.menu1 li.current a:hover {
color:#fff;
background:#000 url(button3.gif);
cursor:default;
}
.menu1 li.current a:hover b
{background:url(button3.gif) no-repeat right top;
}

mvg.

 

[ClaudiaWD]

Ik wilde eerst zeggen, probeer 'margin:0 auto;' eens, maar ik heb misschien wat anders.
Weet niet of het werkt, hoor, maar je kunt het proberen.

.menu1 li a {
display:block;
float:center;
height:35px;
line-height:35px;
color:#aaa;
text-decoration:none;
font-size:11px;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
padding:0 0 0 8px;
cursorointer;
}
.menu1 li a b {
En eventueel ook proberen als het nog niet werkt: float:center;
display:block;
padding:0 16px 0 8px;
}

Ik weet niet precies wat de HTML code is, dus kan ik het er niet zo gemakkelijk uithalen zo.

 

[csshunter]

@ClaudiaWD:

Hoi Claudia,
Helaas! {float: center;} bestaat niet, je kan alleen maar naar links of naar rechts floaten:

• Floats in de css2.1 specificatie
• Floats in de css3-specificatie

Met vriendelijke groet,
CSShunter

 

[csshunter]

Hoi-hoi,
Nu het idee:
Met floats gaat het altijd mislukken, want die ontsnappen altijd aan een gecentreerd element waar ze in zitten.

• Tenzij de floats een van te voren bekende breedte hebben, en het element waar ze in moeten komen dus ook.
• Dan kan je het omvattende element zetten op een {width: ..px; margin: 0 auto;}.

Maar als je de breedte niet tevoren weet (bv. omdat de lettergrootte moet kunnen schalen), dan werkt dit niet. Dan is er geen bekende breedte van het omvattend element, en kan de {margin: 0 auto;} ook niet werken, omdat er niets is om die margin tegenaan te plakken.

Wat dan?
Géén floats! Maar de list-items moeten bij een horizontaal menu wel naast elkaar komen.
Een andere manier om dat te doen is met {display: inline;}.
In de praktijk:

• Je zet om het menu heen een <div> die je een {text-align: center;} meegeeft.
• De linker-padding van het .menu moet er uit, anders komt ie nog niet mooi gecentreerd.
• De list-items van het menu krijgen nu een {display: inline;}.
• De links binnen de list-items mogen ook niet meer links floaten.
• De links mogen ook geen {display: block;} krijgen, anders stuiven ze alsnog naar een verticaal menu. In plaats daarvan krijgen ze: {display: inline-block;}.

Thats´s all, folks!

• Test met op deze manier aangepaste klaas-code (zonder de background-images; zie broncode):
  knoppenmenu-centreren.htm

Met vriendelijke groet,
CSShunter

 

[ClaudiaWD]

Natuurlijk, wat een faal.
Ik werd verleid haha, de code klopt bovenaan ook niet (die van de TS).

Daar staat ook float:center.

 

[csshunter]

Yeps, 't is altijd uitkijken met verleidelijk verleidende TS's. :d