VPF::как сделать саморастягивающеся меню

supervladislav

Дата 18.1.2009, 06:43 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

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

Код




#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;}

<div id="mainmenu">
<div id="mainmenlev1"></div>
<div id="mainmenlev2"></div>
<div id="mainmenlev3"></div>
<div id="mainmenle4"></div>

</div>

Присоединённый файл ( Кол-во скачиваний: 13 )

screeensave2.png 137,73 Kb

webster

Дата 18.1.2009, 19:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

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

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »