Css меню

[Ангел_А]

Здравствуйте, никак не получается выровнять список по центру страницы, только начала учится css

Вот код

<style type="text/css">
ul.menu {

width:auto;
position:relative; 
display:block;
height:33px;
font-size: 95% center;
background:url(bg.png) repeat-x top center;
font-family: Arial,sans-serif;
border:5px solid #464451;
margin:0;
padding:0;

}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:100%; 
}

ul.menu li a:hover,.current {
color:#fff;
background:url(bg.png) repeat-x top left;
text-decoration:none;
}

ul.menu .current a {
color:#fff;
font-weight:600;
}

/*BLUE*/
ul.menu.blue{
background-color:#007fff;
}
ul.menu.blue li a:hover, .menu.blue li.current {
background-color:#A3BAE6;
}
</style>

и html

<ul class="menu blue" type="circle">

	<li><a href="#" title="">• Главная</a></li>
	<li class="current"><a href="#" title="">• Компания</a></li>
	<li><a href="#" title="" >• Цены</a></li>
	<li><a href="#" title="">• Вакансии</a></li>
	<li><a href="#" title="">• Контактная информация</a></li>

</ul>

И картинка, чтоб понятней было о чем речь, этот список надо выровнять по центру страницы http://radikal.ru/F/s49.radikal.ru/i125/09...d94db8.gif.html

[psywalker]

поставь ul - width: ..; и margin: 0 auto;

ul{ width: 900px; margin: 0 auto;}

Edited June 8, 2009 by psywalker

[base239]

Здравствуйте, никак не получается выровнять список по центру страницы, только начала учится css

<style type="text/css">
<!--
ul.menu{width:100%;height:33px;position:relative;display:block;background:url(bg.png) repeat-x top center;font-family:Arial,sans-serif;border:5px solid #464451}
ul.menu li{display:block;float:left;margin-left:5%}
ul.menu li a{float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:100%}
ul.menu li a:hover,.current{color:#fff;background:url(bg.png) repeat-x top left;text-decoration:none}
ul.menu .current a{color:#fff}
/*BLUE*/
ul.menu.blue{background-color:#007fff}
ul.menu.blue li a:hover, .menu.blue li.current{background-color:#A3BAE6}
-->
</style>

Попробуй так!

Если не понравится? будем думать

Edited June 17, 2009 by base239

[SelenIT]

Еще здесь (и там по соседству) много интересных примеров.

Плюс есть смысл освоить inline-block (как замену float-ам во многих случаях). Их центрировать проще.

[Great Rash]

Кстати, а инлайн-блок корректно отображается во всех браузерах?

[s0rr0w]

Кстати, а инлайн-блок корректно отображается во всех браузерах?

C натяжкой - да.