Горизонтальное меню, шириной на всю страницу без таблиц
10 апреля 2011 в 21:19 в категории Статьи о 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 комментария
Walking in the presence of giants here. Cool thinking all aurnod!
помогло спасибо
Корректно работает только для 5и пунктов
не пробовали в CSS:
/* single tab */
#flowtabs li {
float:left;
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
width:20%;
}
заменить width (ширину) одного пункта на 100% / кол-во пунктов?