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% не помогает, я не понимаю, почему. Я тем не менее еще верстаю это меню. Удалось собрать его в опере, но в файрфоксе последний элемент вываливается. Если я вас правильно понял, то по макету ширина менюшки 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. Моя верстка при масштабировании Огромная просьба к матерым верстальщикам - поделиться советом, как все-таки "правильно" верстать подобные элементы. Заранее спасибо