Горизонтальное меню, шириной на всю страницу без таблиц
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 — Демо
Все! никаких таблиц! Пользуйтесь! 🙂