Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > как сделать саморастягивающеся меню

Автор: supervladislav 18.1.2009, 06:43

подскажите как лучше сделать меню которое взависимости от ширины экрана растягивалось вместе с ним и желательно чтобы небыло вот такого см прикриплённый файл ,ну я имею ввиду небыло расхождения в вёрстке когда размер
броузера был бы другой

Код




#mainmenu{position:relative;top:-550px;left:36%; width:63%;margin-left:10px;margin-right:0px;display:block;  }
#mainmenlev1,#mainmenlev1,#mainmenlev1,#mainmenlev1{margin:0px;padding:0px;}

#mainmenlev1{background-image:url(../img/mainmenupravoverh.png);background-repeat:no-repeat;width:24px;height:48px;float:left;}
#mainmenlev2{background-image:url(../img/mainmenusered.png);background-repeat:repeat-x;width:87%;height:48px;float:left;}
#mainmenlev3{background-image:url(../img/mainmenulevoverh.png);background-repeat:no-repeat;width:44px;height:48px;float:left;}
#mainmenle4{ background-image:url(../img/polosaseredina.png);background-repeat:repeat-y; width:100%;height:300px;clear:both;}

Автор: webster 18.1.2009, 19:08

Лучше всего сделать его списком с плавающими элементами:

Код


<ul>
<li>
<a href="#">меню 1</a>
</li>
<li>
<a href="#">меню 2</a>
</li>
<li>
<a href="#">меню 3</a>
</li>
...
<li class="last">
<a href="#">меню 5</a>
</li>

Код


ul, li {
float: left;
}
a {
display: block;
}
li {
width: 20%;
}
li.last {
width: 20%!important;
width: 19.5%;
}

И в зависимости от количества пунктов меню подобрать нужные проценты, 19,5% сделано для IE6 из-за неправильного округления текущих процентных значений, чтобы не было перескока пункта меню на следующую строку. Нивелировать это отклонение в 0.5%, можно присвоив картинку закругленного угла бэкгроунду не пункта меню, а самого контейнерного элемента UL.

Автор: supervladislav 20.1.2009, 12:27

я имелл ввиду меню графическое с картинками