CSS list items vergrößern

[Physically]

Hey Leute,

ich wollte mal fragen, wie ich die "Box" von einem list item kann, habe es so in CSS mal realisiert, aber es funktioniert nicht:

#navi li{
	[B]width: 123px;
	height: 52px;[/B]
	list-style-type: none;
	display: inline;
	padding-left: 15px;
	background-image: url(../images/navi_li.gif);
	background-repeat: no-repeat;
	border: 1px solid #dbdbdb;
}

Bei Padding gehen die Items über die Box hinaus, das möchte ich ja auch nicht..

Danke

 

[chriz0101]

verringere die weite um 15px weil du sie im padding hast

 

[Daaron]

Dein Problem ist das "display:inline". Inline-Elemente reagieren nicht auf width und height. Nimm für solche Zwecke entweder float (und nach dem letzten Element zur Sicherheit noch ein clear) oder, wenn du weißt, dass deine Besucher nicht mit Holzbrowsern kommen, einfach mit display:inline-block.

 

[Physically]

width: 117px brint leider nichts...

#navi li{
    list-style-type: none;
    display: inline;
    background-image: url(../images/navi_li.gif);
    background-repeat: no-repeat;
    border: 1px solid #dbdbdb;
}

So kleben diese oben im linken Eck des DIVs, aber wie bekomme ich die Boxen den list items größer und die list items dann mittig in der box?