Горзонтальное резиновое меню, 6 элементов, зазор - HTML и CSS

Kolik317 · 30.04.2011, 21:34

Делаю горизонтальное, растягивающееся, да еще и выпадающее меню на css. В меню 6 элементов. Как известно опера не поддерживает дробные доли процентов, поэтому я решил сделать все элементы по 17% и один 15%.

Получилось, но в лисе меню реально во всю ширину, а в Опере, хроме,и ИЕ с правого боку есть зазор между меню и краем сайта в несколько пикселей. Зазор увеличивается и уменьшается при ресайзе окна. Собственно что за баг, и как исправить? может кто знает.

Код:

<head>
<style>
ul.menu-nav li.item1 {width:15%;}
ul.menu-nav li.item1 a { border-right:none;}
ul.menu-nav {
width:100%;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
height: 37px;
display:block;
}
ul.menu-nav li {
float: left;
list-style: none;
height: 37px;
width:17%;
position: relative;
padding:0;
}
ul.menu-nav a {
float: none !important;
float: inherit;
display: block;
background:#3F0;
color:#000;
font: normal 18px/37px Arial;
text-decoration: none;
height: 37px;
text-align:center;
z-index:2;
border-right:#000 1px solid;
}
</style>
</head>
<body leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 marginwidth=0>
<ul class="menu-nav">
   <li><a href="#">Раз</a></li>
   <li><a href="#">Два</a></li>
   <li ><a href="#">Три</a> </li>
   <li><a href="#">Четыре</a></li>
   <li><a href="#">Пять</a></li>
   <li class="item1"><a href="#">Шесть</a></li></ul>
</body>
</html>

Kolik317 · 30.04.2011, 22:32

Решил сам, но может будут лучше варианты.
Задал ссылке ширину 100%, и сдвинул влево на 5 пикселей. Границу между кнопками перенес влево, и убрал её у первого элемента. Для ие5-6 задал ширину первого столба не 15% а 14%, чтобы крайний элемент если и не был четко стекован с краем, то хотяб не падал на следущую строку)

Код:

<style>
ul.menu-nav li.item1 {width:15%;}

*html ul.menu-nav li.item1 {width:14%;}


*html ul.menu-nav a {
display: block;
background:#3F0;
color:#000;
font: normal 18px/37px Arial;
text-decoration: none;
height: 37px;
text-align:center;
z-index:2;
padding-left:0px;
border-left:1px #000 solid;
width:100%;
}


ul.menu-nav li.item1 a { border-left:none;}
ul.menu-nav {
width:100%;
margin: 0;
padding: 0;
list-style: none;
height: 37px;
display: block;
}

ul.menu-nav li {
float: left;
list-style: none;
height: 37px;
width: 17%;
position: relative;
padding:0;
}
ul.menu-nav a {
display: block;
background:#3F0;
color:#000;
font: normal 18px/37px Arial;
text-decoration: none;
height: 37px;
text-align: center;
z-index:2;
padding-left: 5px;
border-left: 1px #000 solid;

width: 100%;


}

</style>
</head>




<body leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 marginwidth=0>
<ul class="menu-nav">
   <li class="item1"><a href="#">Раз</a></li>
   <li><a href="#">Два</a></li>
   <li ><a href="#">Три</a> </li>
   <li><a href="#">Четыре</a></li>
   <li><a href="#">Пять</a></li>
   <li ><a href="#">Шесть</a></li></ul>
</body>
</html>

Kolik317 · 15.05.2011, 20:37

up
Только что заметил, что в опере и IE всё зашибись, а в Лисе и Хроме меню уходит вправо на несколько пикселей, и поэтому появляется ползунок под меню. Может всё-таки есть библиотека какая для js, или еще как-то

30.04.2011, 21:34	#1
Kolik317 Пользователь Регистрация: 14.08.2009 Сообщений: 64	Горзонтальное резиновое меню, 6 элементов, зазор Делаю горизонтальное, растягивающееся, да еще и выпадающее меню на css. В меню 6 элементов. Как известно опера не поддерживает дробные доли процентов, поэтому я решил сделать все элементы по 17% и один 15%. Получилось, но в лисе меню реально во всю ширину, а в Опере, хроме,и ИЕ с правого боку есть зазор между меню и краем сайта в несколько пикселей. Зазор увеличивается и уменьшается при ресайзе окна. Собственно что за баг, и как исправить? может кто знает. Код: <head> <style> ul.menu-nav li.item1 {width:15%;} ul.menu-nav li.item1 a { border-right:none;} ul.menu-nav { width:100%; margin: 0; border: 0 none; padding: 0; list-style: none; height: 37px; display:block; } ul.menu-nav li { float: left; list-style: none; height: 37px; width:17%; position: relative; padding:0; } ul.menu-nav a { float: none !important; float: inherit; display: block; background:#3F0; color:#000; font: normal 18px/37px Arial; text-decoration: none; height: 37px; text-align:center; z-index:2; border-right:#000 1px solid; } </style> </head> <body leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 marginwidth=0> <ul class="menu-nav"> <li><a href="#">Раз</a></li> <li><a href="#">Два</a></li> <li ><a href="#">Три</a> </li> <li><a href="#">Четыре</a></li> <li><a href="#">Пять</a></li> <li class="item1"><a href="#">Шесть</a></li></ul> </body> </html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
меню как на сайте p&g (меню ввиде таблицы)	ilma55	WordPress и другие CMS	0	19.09.2010 19:09
В массиве из п элементов много совпадающих элементов. Найти количество различных элементов	Strax	Фриланс	11	12.06.2010 20:13
И сново sendMessage =) Как нажать пункт верхнего меню и меню правой кнопки?	TwiX	Win Api	9	15.10.2009 01:57
Меню с Items в виде набора Bitmap (как меню редактирования в Word'е)	chandrasecar	Мультимедиа в Delphi	7	14.01.2009 09:20
Как организовать прокрутку элементов меню (JMenuItem)?	klm	Общие вопросы по Java, Java SE, Kotlin	0	17.01.2008 16:28

15.05.2011, 20:37	#3
Kolik317 Пользователь Регистрация: 14.08.2009 Сообщений: 64	up Только что заметил, что в опере и IE всё зашибись, а в Лисе и Хроме меню уходит вправо на несколько пикселей, и поэтому появляется ползунок под меню. Может всё-таки есть библиотека какая для js, или еще как-то Последний раз редактировалось Kolik317; 15.05.2011 в 20:51.