Ссылки и бордеры

[devid89]

здравствуйте, подскажите пожалуйста. 

 

Есть задача сверстать меню списком. У меню есть фон (красный), высота его 50пх. При наведении мышкой у ссылки должен меняться фон (черный).

 

Вопросы:

1. Как мне выровнить ссылки по высоте блока? Т.е. на эти 50пх, чтобы ссылки не были сверху или снизу, по середине. 

2. Когда задаю a:hover другой фон, то фон меняется только непосредственно у текста (т.е. не на все 50пх меняется фон)

3. У каждого li списка должен быть border с права, полоска, вытянутая на все 50пх. Но она вытягивается только на высоту ссылок (текста). как увеличить ее? 

 

помогите пожалуйста, в каком направлении мне двигаться? 

 

спасибо!

Edited December 25, 2013 by devid89

[mrnobody]

Так как отсутствуют точные требования и скриншоты, то у меня есть вот такой вариант

http://jsfiddle.net/mrnobody/865Re/

[devid89]

http://savepic.net/4165923.jpg

mrnobody, спасибо! очень помогли!

А как убрать отступ при наведении на ссылку? отступ до бордера, прилагаю скриншот на котором его видно:

 

[mrnobody]

А как вы убирали пробелы между элементами списка, задавали отрицательный margin-left ?

Я убрал их с помощью комментариев, как на скрине http://img138.imageshack.us/img138/2027/5akm.png

 

Да и желательно код увидеть, а то я так долго могу гадать ))

Edited December 26, 2013 by mrnobody

[devid89]

код такой:

<div class="menu"><ul><li><a href="#">Главная</a></li><li><a href="#">Пункт меню</a></li><li><a href="#">Контакты</a></li></ul></div>

в КСС:

.menu {background:url(images/menu.jpg);width:900px;height:51px;border:2px solid #000;float:left;}.menu ul {margin:0;padding:0;}.menu li {display:inline-block;border-left:2px solid #000;}.menu li:first-child {border-left:none;}.menu li a {display:block;font:italic bold 19px/50px Arial;text-decoration:none;color:#fff;padding:0 25px;}.menu li a:hover {background:url(images/menu_hover.jpg);color:#fff;height:51px;}

[mrnobody]

Вам нужно только HTML-разметку поправить — соединить вместе элементы <li>, чтобы не было пробелов, потому что когда мы присваиваем элементам display: inline-block; они становятся похожими на буквы в слове. А у вас получается что они написаны через пробел, поэтому соединяем их вместе.

Для примера возьмем слово МЕНЮ.

У вас было так: М Е Н Ю

Я сделал так: МЕНЮ

<div class="menu">    <ul>     <li><a href="#">Главная</a></li><li><a href="#">Пункт меню</a></li><li><a href="#">Контакты</a></li>    </ul></div> 

http://jsfiddle.net/mrnobody/A33h2/

Edited December 26, 2013 by mrnobody

[devid89]

спасибо)