блоки в строчку

[Kos87]

Вот собственно код меню

CSS:

#menu p{margin:0; display:inline;}

a.menu{display:block; width:100px; height:39px; margin:20px 10px; background-repeat: no-repeat;}
a.menu:hover{background-position:0 -40px; position: relative; top: 3px;}

a.menu_on{display:block; width:100px; height:39px; margin:20px 10px; background-repeat: no-repeat; background-position:0 -40px;}
a.menu_on:hover{position: relative; top: 3px;}

a.main{background-image: url(diz/main.jpg);}
a.uslugi{background-image: url(diz/uslugi.jpg);}
a.zapchasti{background-image: url(diz/zapchasti.jpg);}
a.foto{background-image: url(diz/foto.jpg);}
a.kontaktu{background-image: url(diz/kontaktu.jpg);}

xhtml:

<div id="menu">
<p><a href="http://www.reichauto.com.ua" class="menu_on main"></a></p>
<p><a href="http://www.reichauto.com.ua/uslugi.html" class="menu uslugi"></a></p>
<p><a href="http://www.reichauto.com.ua/zapchasti.html" class="menu zapchasti"></a></p>
<p><a href="http://www.reichauto.com.ua/foto.html" class="menu foto"></a></p>
<p><a href="http://www.reichauto.com.ua/kontaktu.html" class="menu kontaktu"></a></p>
</div>

[VJiK]

Добавьте к А - float: left;

[psywalker]

а может так: a.menu{display: inline;}

[Kos87]

float не конает, меню потом надо выровнять по центру, с float я не знаю как это сделать

a.menu{display: inline;} а на поведение меню это не повлияет??

влияет на поведение меню

Edited October 24, 2009 by Kos87

[Justnewone]

float не конает, меню потом надо выровнять по центру, с float я не знаю как это сделать

a.menu{display: inline;} а на поведение меню это не повлияет??

влияет на поведение меню

инлайн-блок

[Kos87]

спасибо

вот новый код

CSS:

#menu{margin-left:auto; margin-right:auto;}

a.menu{display:inline-block; width:100px; height:39px; margin:20px 10px; background-repeat: no-repeat;}
a.menu:hover{background-position:0 -40px; position: relative; top: 3px;}

a.menu_on{display:inline-block; width:100px; height:39px; margin:20px 10px; background-repeat: no-repeat; background-position:0 -40px;}
a.menu_on:hover{position: relative; top: 3px;}

a.main{background-image: url(diz/main.jpg);}
a.uslugi{background-image: url(diz/uslugi.jpg);}
a.zapchasti{background-image: url(diz/zapchasti.jpg);}
a.foto{background-image: url(diz/foto.jpg);}
a.kontaktu{background-image: url(diz/kontaktu.jpg);}

xhtml:

<div id="menu">
	<a href="http://www.reichauto.com.ua" class="menu_on main"></a>
	<a href="http://www.reichauto.com.ua/uslugi.html" class="menu uslugi"></a>
	<a href="http://www.reichauto.com.ua/zapchasti.html" class="menu zapchasti"></a>
	<a href="http://www.reichauto.com.ua/foto.html" class="menu foto"></a>
	<a href="http://www.reichauto.com.ua/kontaktu.html" class="menu kontaktu"></a>
</div>

но я теперь не могу добиться выравнивания по центру .... ??

вот как оно выглядит http://www.reichauto.com.ua/kontaktu.html

[Razor]

Чтоб блок #menu был по-центру, ему необходимо задать ширину. (width), или тоже инлайном сделать и при помощи text-align:center к его родителю - центрировать

[Kos87]

внесенные мной изменения #menu{text-align:center;}

теперь вроде работает

[Justnewone]

внесенные мной изменения #menu{text-align:center;}

теперь вроде работает

Ура, товарищи!