Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Теперь мы команда!

Горизонтальное меню, шириной на всю страницу без таблиц

10 апреля 2011 в 21:19 Автор: Nikita_Sp в категории Статьи о CSS 4 комментария

Итак, недавно передо мной стал вопрос, как можно реализовать горизонтальное меню, шириной на всю страницу. В интернете я нашел только один ответ — это таблицы. Многих интересовала реализация данной структуры без таблиц. Надеюсь, что этот пост поможет вам.

Горизонтальное меню на всю ширину сайта без таблиц
Вот css, из него можете по удалять мои стили оформления и оставить только каркас:

* {
margin:0;
padding:0;
}
#flowtabs {
/* dimensions */
width:100%;
margin:0 !important;
padding:0;
position:relative;
top:-3px;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}

/* single tab */
#flowtabs li {
float:left;
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
width:20%;
}

/* a- tag inside single tab */
#flowtabs li a {
position:relative;
right:5px;
display:block;
height: 31px;
width: 100%;
padding:0px;
margin:0px;
/* font decoration */
color:#ffffff;
font-size:16px;
line-height:29px;
height:28px;
text-align:right;
text-decoration:none;
text-transform: uppercase;
}

Ну и собственно сам html:

 

<ul id="flowtabs">
<li style="background-color: #ff6500;"><a href="http://nikita-sp.com.ua/">Пункт 1</a></li>
<li style="background-color: #00b8f6;"><a href="http://создание-сайтов.kharkov.ua/">Пункт 2</a></li>
<li style="background-color: #ff0391;"><a href="http://nikita-sp.com.ua/works.php">Пункт 3</a></li>
<li style="background-color: #76cc00;"><a href="http://nikita-sp.com.ua/contacts.php">Пункт 4</a></li>
<li style="background-color: #717171;"><a href="http://создание-сайтов.kharkov.ua/blog/">Пункт 5</a></li>
</ul>

menu-100percents-width — Демо

Все! никаких таблиц! Пользуйтесь! 🙂

4 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вверх!

Меню блога

Категории блога

Облако тегов