Jump to content

Devil_John

Newbie
  • Posts

    6
  • Joined

  • Last visited

Devil_John's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Не сочтите за наглость, что я, сам будучи щенком, лезу давать советы. Я изучал основы по видеоурокам центра Специалист (это при Бауманке). Двадцать часов потратил на просмотр, а дальше практика. Вроде с блочной версткой справляюсь
  2. rikimaru2013, я тут второй день, плюсик нажал :rolleyes:/> Но опять же, у тебя все ссылки одинаковой длины. Когда делаешь по макеты, хоть ты разбейся, а размеры соблюдай, даже если дизайнер делал работу не трезвый :lol:/> Я не вижу, как с этим справится, не назначая классы отдельным элементам списка. Точнее я так смог сделать, но в ИЕ всё валится. npofopr, там скрипты работают? Я пока в этом слабоват, решил не разбирать твой код перед сном :blush:/>
  3. 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. Всем удачи
  4. Спасибо Но нужно, чтобы ссылка была не только в области текста, а во всей области элемента li (между "штрихами"). Кстати, в вашем случае width:100% не помогает, я не понимаю, почему. Я тем не менее еще верстаю это меню. Удалось собрать его в опере, но в файрфоксе последний элемент вываливается. Если я вас правильно понял, то по макету ширина менюшки 1000пкс.
  5. Так а зачем код? Я жду, собственно, "алгоритма" верстки. Код самый банальный: <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; }
  6. Всем добрый вечер Верстая макет, я обнаружил неприятную вещь (очередной раз) - при масштабировании страницы (точнее - при максимальном уменьшении) горизонтальное меню "разваливается". Последние элементы списка как-бы не влезают в шапку, и переносятся на следующую строку. Менюшка самая обычная - есть фон, определенная высота меню (скажем, 30 пикселей). Я верстал как попало - марджины и паддинги в самих элементах списка, или в ссылках, короче говоря не задумываясь о целесообразности такой верстки, а лишь постоянно обновляя страницу и смотря внешний вид меню. Не буду голословным 1. Менюшка, которую я хочу сверстать 2. Она же при масштабировании 3. Моя верстка 4. Моя верстка при масштабировании Огромная просьба к матерым верстальщикам - поделиться советом, как все-таки "правильно" верстать подобные элементы. Заранее спасибо
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy