Поправить css стили меню

@vantyz · Регистрация: 04.03.2012

Author24 — интернет-сервис помощи студентам

Запутался с этим меню,вот эго код:

CSS

#headleftmenu { position:fixed; right:30px; top:11px; list-style-type:none;margin-left:340px; display:inline-block;font-family: Arial,serif;}
    #headleftmenu li { float:left; margin-left:10px;background: #transparent;height:50px;width:70px; }
    #headleftmenu li:hover { float:left; margin-left:10px;background: #transparent;height:50px;border-bottom: 2px solid white; }
    #headleftmenu li a{ font-size:16px; color:#000; text-decoration:none; height:50px;}
    #headleftmenu li a.active{border-bottom: 2px solid white; height:50px;width:70px;}
    #headleftmenu li a:hover{  font-size:16px; color:#fff;height:50px;  }

HTML5

<ul id="headleftmenu">
<center>
<li><a href="#" class="active">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Блог</a></li>
<li>  <a href="#">Сервисы</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">English</a></li>
</center>
</ul>

Вот там первая ссылка актив,а получается вот что,на картинке все написано):

@vantyz · 01.10.2012, 21:14 **[ТС]**

Ну как,мне хотя бы,чтобы активная ссылка(главная)у нее белая полосочка ,как у всех внизу была ,а не в верху,у самых букв

@Taatshi · 01.10.2012, 21:38

display: block; добавьте активной ссылке

CSS

1	#headleftmenu li a.active{border-bottom: 2px solid white; height:50px;width:70px;display: block;}

Добавлено через 6 минут

на одинаковые расстояния - ширину уберите, поставьте padding

CSS

1	#headleftmenu li { float:left; margin-left:10px;background: #transparent;height:50px; padding:0 10px; }

@vantyz · 02.10.2012, 14:09 **[ТС]**

Хотелось бы,конечно,чтобы полосочки внизу были одинакового размера.

@Taatshi · 02.10.2012, 14:16

так Вы стили полосочек прописываете разным элементам - в одном случае для а, а в другом случае для li

Поэтому они и разные.

Можно padding:0 10px убрать, а margin-left:10px; сделать больше если понадобится.

@vantyz · 02.10.2012, 21:13 **[ТС]**

Ну короче,не сделать?

Добавлено через 6 часов 8 минут
Чтобы все полосочки были ровными.

@Taatshi · 02.10.2012, 21:23

Я же написала...

Можно padding:0 10px убрать, а margin-left:10px; сделать больше если понадобится.

попробуйте так.

@vantyz 54 / 54 / 2 Регистрация: 04.03.2012 Сообщений: 495
	01.10.2012, 21:14 [ТС]	2
	Ну как,мне хотя бы,чтобы активная ссылка(главная)у нее белая полосочка ,как у всех внизу была ,а не в верху,у самых букв 0

@vantyz 54 / 54 / 2 Регистрация: 04.03.2012 Сообщений: 495
	02.10.2012, 14:09 [ТС]	4
	Хотелось бы,конечно,чтобы полосочки внизу были одинакового размера. 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.10.2012, 14:16	5
	так Вы стили полосочек прописываете разным элементам - в одном случае для а, а в другом случае для li Поэтому они и разные. Можно padding:0 10px убрать, а margin-left:10px; сделать больше если понадобится. 1

@vantyz 54 / 54 / 2 Регистрация: 04.03.2012 Сообщений: 495
	02.10.2012, 21:13 [ТС]	6
	Ну короче,не сделать? Добавлено через 6 часов 8 минут Чтобы все полосочки были ровными. 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.10.2012, 21:23	7
	Я же написала... Можно padding:0 10px убрать, а margin-left:10px; сделать больше если понадобится. попробуйте так. 1