03 1 / 2011
Как расположить горизонтально CSS-кнопки?
А в чем вопрос? Любой HTML+CSS верстальщик превосходно знает, что для того чтобы расположить элементы горизонтально есть, как минимум, решение базирующееся на создании списка
<ul>
<li>
item1
</li>
<li>
item2
</li>
<li>
item3
</li>
</ul>
Извините, это не WordPress и подсветки цитат кода в Тумблере нет; он даже табуляции не показывает :(
Потом список упаковывается в div со следующим определением горизонтального расположения элементов списка (в данном случае я использую селектор smartnav):
#smartnav ul li {
display:inline-block;
}
Вопрос решен. Да. А если вам надо горизонтально вывести CSS-кнопки у которых при наведении должен меняться фон? Фон кнопки больше фона текстовой ссылки и для его отображения необходимо использовать определение display: block, т.е. делать из нее кнопку с фоном.
Но у нас уже есть display:inline-block за счет которого наши кнопки выстраиваются горизонтально. Что делать?
Достаточно добавить «прокладку» в виде span, заключив в нее текст ссылки. Определить display:block для span, оставив display:inline-block для элемента списка li.
В итоге получим:
#smartnav {
/*здесь вы задаете форматирование всего блока с кнопками*/
}
#smartnav ul li {
display:inline-block; /*определение вывода кнопок горизонтально через элементы списка*/
}
#smartnav ul li span a:link, #smartnav ul li span a:visited {
display:block; /*определение вывода ссылок блоком*/
background-image: url(img/index/smart-nav-bg-regular.gif); /* фон без наведения указателя мыши*/
}
#smartnav ul li span a:hover, #smartnav ul li span a:active {
background-image: url(img/index/smart-nav-bg-over.gif);
/* фон при наведении указателя мыши*/}
Чтобы вас не грузить я опустил в листинге определения не имеющие отношения к теме.
