Fedcomp

Спасибо за развернутый ответ) (плюсануть не могу, видимо новичкам не дает) но в этом как раз и проблема, хочется чтобы ссылка была кликабельна в любом месте где ее нажимаешь. Сейчас посмотрю как в ipb сделано, спасибо всем за ответы. Хотя нет, немножко подкрутил ваш вариант добавив padding к a и все получилось как надо, спасибо!

если делать padding то иконки уедут. Впрочем ща наверное так и сделаю, положение иконок поправлю процентами

Думаю чтобы было более понятна моя реализация, приведу код html: <div id="navtoolbar"> <div class="links"> <ul> <li><a href="/project/profile" class="profile">Мой профиль</a></li> <li><a href="/project/servers" class="servers">Сервера</a></li> <li><a href="/project/balance" class="balance">4500.43 руб.</a></li> <li><a href="/project/account" class="account">Настройки аккаунта</a></li> <li><a href="/project/logout" class="logout">Выход</a></li> </ul> </div> </div> CSS: #navtoolbar .links ul li { border: 1px solid blue; list-style-type: none; display: inline; padding: 1px 0px 21px 0px; background: url('./navigation/nav-rule.png') 0 50% no-repeat; font-size: 14px; } #navtoolbar .links ul li a { vertical-align: middle; color: #555555; padding: 2px 5px 21px 30px; background: transparent; text-decoration: none; background-position: center left; background-repeat: no-repeat; } #navtoolbar .links ul li:hover{ background: whiteSmoke; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4f4f4',endColorstr='#d6d6d6'); background: -webkit-gradient(linear,0% 0,0% 100%,from(#f4f4f4),to(#d6d6d6)); background: -moz-linear-gradient(270deg,#f4f4f4,#d6d6d6); } /* ToolBar Links images */ #navtoolbar .links ul a.profile{ background-image: url('./navigation/profile.png'); } #navtoolbar .links ul a.servers{ background-image: url('./navigation/servers.png'); } ..... А какое значение лучше поставить для центра? подбирать? Через line-height хоть к li хоть к <a> получается вот такая ерунда Т.е блоки вниз уезжают, а не текст

Нет, нужно выровнять по центру по вертикали. Т.е чтобы текст ссылки был по центру, а сейчас он прибит к верху, а картинки по центру. обновил немного первый пост чтобы не вводить в заблуждение, нужно вертикальное выравнивание по центру. vertical-align: middle не срабатывает, потому что <a> использует всю область <li>

Долго думал в какой раздел пихнуть, сюда или в раздел "проблемы верстки". Решил что раз я тут только что зарегестрировался, то надо пихать в этот раздел, если я не прав - переместите. Задача : Сделать на тулбаре список ссылок-кнопок. Чтобы не быть пустомелей вот скрин (Стрелка на скриншоте заменяет курсор потерянный при printscreen) Причем чтобы при наведении курсором эта область затемнялась (как на скриншоте) Также чтобы вся выделенная область была ссылкой Проблема : Как видно на скриншоте выше, текст лежит сверху. Теперь собственно общий вопрос: Как выровнять текст вертикально по центру находящийся внутри li a, при условии что a растянут на всю ширину li. Или подскажите как лучше такое ссылочное меню сделать. vertical-align: middle не срабатывает, потому что <a> использует всю область <li>