-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Devil_John
-
-
rikimaru2013, я тут второй день, плюсик нажал :rolleyes:/> Но опять же, у тебя все ссылки одинаковой длины. Когда делаешь по макеты, хоть ты разбейся, а размеры соблюдай, даже если дизайнер делал работу не трезвый :lol:/> Я не вижу, как с этим справится, не назначая классы отдельным элементам списка. Точнее я так смог сделать, но в ИЕ всё валится.
npofopr, там скрипты работают? Я пока в этом слабоват, решил не разбирать твой код перед сном :blush:/>
-
Up Наконец смог сделать такое меню, проверил для последней версии каждого браузера. Считаю своим долгом выложить код
<div class="cold-nav">
<ul>
<li class="cold-nav-li1"><a href="#"><span>Главная</span></a></li>
<li class="cold-nav-li2"><a href="#"><span>Водонагреватели</span></a></li>
<li class="cold-nav-li3"><a href="#"><span>Кондиционеры</span></a></li>
<li class="cold-nav-li4"><a href="#"><span>Тепловое оборудование</span></a></li>
<li class="cold-nav-li5"><a href="#"><span>Увлажнение и очистка</span></a></li>
<li class="cold-nav-li6"><a href="#"><span>Отопление</span></a></li>
</ul>
</div>.cold-nav { overflow:hidden; border-radius:10px; margin-top:50px; width:1000px; background:url(../images/nav.png) no-repeat; }
.cold-nav li { float:left; }
.cold-nav-li1 { width:110px; }
.cold-nav-li2 { width:172px; }
.cold-nav-li3 { width:156px; }
.cold-nav-li4 { width:215px; }
.cold-nav-li5 { width:211px; }
.cold-nav-li6 { width:135px; }
.cold-nav li a span { vertical-align:-8px; }
.cold-nav li a { text-align:center; display:block; height:37px; text-decoration:none; font:16px "Times New Roman", Helvetica, sans-serif; color:#fff; }
.cold-nav li a:hover { background:#2c6c9e; }
.cold-nav-li1 a:hover{ border-radius:10px 0 0 10px; overflow:hidden; }
.cold-nav-li6 a:hover{ border-radius:0 10px 10px 0; overflow:hidden; }Попутно узнал, что в любимой нами опере могут быть проблемы с overflow:hidden & border-radius. Всем удачи
-
Спасибо Но нужно, чтобы ссылка была не только в области текста, а во всей области элемента li (между "штрихами"). Кстати, в вашем случае width:100% не помогает, я не понимаю, почему. Я тем не менее еще верстаю это меню. Удалось собрать его в опере, но в файрфоксе последний элемент вываливается.
Имхо, если ширина резина, лучше уж тогда на display:table-cell; сделать сами пункты, а контейнеру display:table
Если я вас правильно понял, то по макету ширина менюшки 1000пкс.
-
Так а зачем код? Я жду, собственно, "алгоритма" верстки. Код самый банальный:
<div class="cold-nav">
<ul>
<li class=""><a href="#">Главная</a></li>
<li class=""><a href="#">Водонагреватели</a></li>
<li class=""><a href="#">Кондиционеры</a></li>
<li class=""><a href="#">Тепловое оборудование</a></li>
<li class=""><a href="#">Увлажнение и очистка</a></li>
<li class=""><a href="#">Отопление</a></li>
</ul>
</div>
.cold-nav { }
.cold-nav li { border:1px solid #000; padding:0 40px; float:left; }
.cold-nav li a { border:1px solid #000; height:37px; display:table-cell; text-decoration:none; vertical-align:middle; }
-
Всем добрый вечер Верстая макет, я обнаружил неприятную вещь (очередной раз) - при масштабировании страницы (точнее - при максимальном уменьшении) горизонтальное меню "разваливается". Последние элементы списка как-бы не влезают в шапку, и переносятся на следующую строку. Менюшка самая обычная - есть фон, определенная высота меню (скажем, 30 пикселей). Я верстал как попало - марджины и паддинги в самих элементах списка, или в ссылках, короче говоря не задумываясь о целесообразности такой верстки, а лишь постоянно обновляя страницу и смотря внешний вид меню.
Не буду голословным
1. Менюшка, которую я хочу сверстать
2. Она же при масштабировании
3. Моя верстка
4. Моя верстка при масштабировании
Огромная просьба к матерым верстальщикам - поделиться советом, как все-таки "правильно" верстать подобные элементы. Заранее спасибо
Правильная верстка горизонтального меню
in HTML Coding
Posted
Не сочтите за наглость, что я, сам будучи щенком, лезу давать советы. Я изучал основы по видеоурокам центра Специалист (это при Бауманке). Двадцать часов потратил на просмотр, а дальше практика. Вроде с блочной версткой справляюсь