Poziome menu, css+html Opcje

[pripriv]

Witam!
Na dzień dobry mam mały problem i brak pomysłu jak to rozwiązać.
Na dzien dzisiejszy moje poziome menu wygląda tak:

(IMG:http://rethorn.art.pl/koszarawa/menu2.jpg)

a chciałbym żeby to wyglądało tak:

(IMG:http://rethorn.art.pl/koszarawa/menu.jpg)

[HTML] pobierz, plaintext 
	<div id="menu_">
		<ul>
			<li><a href="">Aktualności</a></li>
			<li><a href="">Oferta</a></li>
			<li><a href="">Cennik</a></li>
			<li><a href="">Galeria</a></li>
			<li><a href="">Dojazd</a></li>
			<li><a href="">Okolica</a></li>
			<li><a href="">Kontakt</a></li>
</ul>
	</div>
[HTML] pobierz, plaintext 

css:

[XML] pobierz, plaintext 
#menu_ {
	background: #000000 url(img/menu.jpg);
	position:absolute;
	left:118px;
	top:208px;
	width:739px;
	height:36px;
	padding: 0 0 0 5px;
    font-family: arial;
    font-size: 13px;
}
 
#menu_ ul {
        list-style-type: none;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
		white-space: nowrap;
}
 
#menu_ li {
        display: inline;        
        margin: 0;
        padding: 2px 2px 7px 2px;
        margin-left: 20px;
        width: 10px;
 
}
[XML] pobierz, plaintext 

Czy da się coś z tym zrobić, bo to tak wyglądało? Bo ja nie mam już pomysłu.

Z góry dziękuje za pomoc. Pozdrawiam!

[!*!]

http://jsfiddle.net/zGe45/ ewentualnie dla li ustawiasz stałą wysokość i dajesz ją też dla a jako line-height.

[pripriv]

Prawie dobrze, tylko teraz nie wiem jak całe menu przesunąć w lewą stronę by je wyśrodkować w tej elipsie.
(IMG:http://rethorn.art.pl/koszarawa/menu3.png)

[HTML] pobierz, plaintext 
<div id="menu_">
		<ul>
			<li><a href="">Aktualności</a></li>
			<li><a href="">Oferta</a></li>
			<li><a href="">Cennik</a></li>
			<li><a href="">Galeria</a></li>
			<li><a href="">Dojazd</a></li>
			<li><a href="">Okolica</a></li>
			<li><a href="">Kontakt</a></li>
</ul>
	</div>
[HTML] pobierz, plaintext 

[XML] pobierz, plaintext 
#menu_ {
	background: #000000 url(img/menu.jpg);
	position:absolute;
	left:118px;
	top:208px;
	width:739px;
	height:36px;
	padding: 0 0 0 5px;
    font-family: arial;
    font-size: 13px;
}
 
#menu_ ul {
	   list-style-type: none;
       margin:0;
	   padding:0;
}
 
#menu_ li {
        float:left;
 
		padding:2px;
		padding-left:5px;
		padding-right:5px;
		border-right:1px solid red
 
}
 
 
#menu_ ul li a{
		color:#000;
		font-weight:bold
}
[XML] pobierz, plaintext 

[!*!]

jak strona ma stałą szerokość, to przez margin, albo zamień float, na display:linline dla li, a #menu_ daj z text-align:center, lub dla ul, margin:0 auto.
http://jsfiddle.net/zGe45/2/

Ten post edytował !*! 27.06.2012, 15:26:19