Правильная верстка горизонтального меню

Devil_John · November 10, 2012

Всем добрый вечер Верстая макет, я обнаружил неприятную вещь (очередной раз) - при масштабировании страницы (точнее - при максимальном уменьшении) горизонтальное меню "разваливается". Последние элементы списка как-бы не влезают в шапку, и переносятся на следующую строку. Менюшка самая обычная - есть фон, определенная высота меню (скажем, 30 пикселей). Я верстал как попало - марджины и паддинги в самих элементах списка, или в ссылках, короче говоря не задумываясь о целесообразности такой верстки, а лишь постоянно обновляя страницу и смотря внешний вид меню.

Не буду голословным

1. Менюшка, которую я хочу сверстать

2. Она же при масштабировании

3. Моя верстка

4. Моя верстка при масштабировании

Огромная просьба к матерым верстальщикам - поделиться советом, как все-таки "правильно" верстать подобные элементы. Заранее спасибо

Edited November 10, 2012 by Devil_John

rikimaru2013 · November 10, 2012

Красивые картинки ))) А код то сегодня будет?

Devil_John · November 10, 2012

Так а зачем код? Я жду, собственно, "алгоритма" верстки. Код самый банальный:

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

rikimaru2013 · November 10, 2012

http://cssdesk.com/wKHnU

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="title" content="Seminargroup.ru" />
<style>


.wrap { background:orange; width:960px; height:500px; margin:0 auto;}
ul {padding-left:8px; margin-left:8px;}
.cold-nav li { border:1px solid #000; padding:0 20px; float:left;background-color:#3B5AFF; border-color:#8D969A;}
.cold-nav li a { height:37px; display:table-cell; text-decoration:none; vertical-align:middle; width:100%; color:white;} 
.cold-nav li:hover {background-color:#284A92;}




</style>
</head>
<body>
<div class="wrap">
	<div class="cold-nav">
		<ul>
			<li class="" style="border-radius: 15px 0 0 15px ;"><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="" style="border-radius: 0 15px 15px 0 ;"><a href="#">Отопление</a></li>
					</ul>
	</div>
</div>
</body>
</html>

psywalker · November 11, 2012

Имхо, если ширина резина, лучше уж тогда на display:table-cell; сделать сами пункты, а контейнеру display:table

Devil_John · November 11, 2012

On 11/10/2012 at 6:29 PM, rikimaru2013 said:

Спасибо Но нужно, чтобы ссылка была не только в области текста, а во всей области элемента li (между "штрихами"). Кстати, в вашем случае width:100% не помогает, я не понимаю, почему. Я тем не менее еще верстаю это меню. Удалось собрать его в опере, но в файрфоксе последний элемент вываливается.

On 11/11/2012 at 10:49 AM, psywalker said:
Имхо, если ширина резина, лучше уж тогда на display:table-cell; сделать сами пункты, а контейнеру display:table

Если я вас правильно понял, то по макету ширина менюшки 1000пкс.

Devil_John · November 11, 2012

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. Всем удачи

Edited November 11, 2012 by Devil_John

rikimaru2013 · November 11, 2012

On 11/11/2012 at 11:29 AM, Devil_John said:
Но нужно, чтобы ссылка была не только в области текста, а во всей области элемента li (между "штрихами").

Фу бяка хоть бы плюсик мне нажал

http://cssdesk.com/QuTda

<div class="wrap">
  <div class="cold-nav">
		<ul>
			<li class="" style="border-radius: 15px 0 0 15px ;"><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="" style="border-radius: 0 15px 15px 0 ;"><a href="#">Отопление</a></li>
					</ul>
	</div>
</div>

.wrap { background:orange; width:960px; height:500px; margin:0 auto;}
ul{padding-left:8px; margin-left:8px; font:12px Arial; text-align:center;}
.cold-nav li { width:16.2%;border:1px solid #000; float:left;background-color:#3B5AFF; border-color:#8D969A;}
.cold-nav li a { width:80px;line-height:37px; border:1px solid black; height:37px; display:block; text-decoration:none; vertical-align:middle; width:100%; color:white;} 
.cold-nav li:hover {background-color:#284A92;}

On 11/11/2012 at 4:13 PM, Devil_John said:
Попутно узнал, что в любимой нами опере могут быть проблемы с overflow:hidden & border-radius. Всем удачи

npofopr · November 11, 2012

я недавно так делал

Devil_John · November 11, 2012

rikimaru2013, я тут второй день, плюсик нажал :rolleyes:/> Но опять же, у тебя все ссылки одинаковой длины. Когда делаешь по макеты, хоть ты разбейся, а размеры соблюдай, даже если дизайнер делал работу не трезвый :lol:/> Я не вижу, как с этим справится, не назначая классы отдельным элементам списка. Точнее я так смог сделать, но в ИЕ всё валится.

npofopr, там скрипты работают? Я пока в этом слабоват, решил не разбирать твой код перед сном :blush:/>

Edited November 11, 2012 by Devil_John

npofopr · November 11, 2012

Ну должны работать. У меня IE9 и я не могу на нативных старых версиях посмотреть.

FEL · November 12, 2012

On 11/11/2012 at 8:44 PM, npofopr said:
Ну должны работать. У меня IE9 и я не могу на нативных старых версиях посмотреть.

В IE же вроде есть эмулятор 7/8IE

npofopr · November 12, 2012

Я знаю, что есть, у меня там работает.

Я про нативные. Про чистую 7, 8 версии. Возможно там будет чуть по другому.

FEL · November 12, 2012

хех верстал верстал эту менюшку (для опыта) и столкнулся с такой же проблемой..хотя с увереностью думал что будет все ок

теперь сижу ломаю голову как исправить

http://dabblet.com/gist/4058231

p.s о кросбраузерности особо не парился, так что сори если у кого-то меню кривое

а не все исправил вроде

overflow: hidden;

добавил к nav

WebAndorix · November 12, 2012

Уважаемые верстальщики, подскажите, пожалуйста, как решить одну проблему. В CSS вставил градиентную картинку в качестве фона для меню, который должен появляться при наведении курсора на определенный пункт. При просмотре в браузере картинка фона не отображается полностью по ширине, а лишь закрывает текст и все.

Как хочу, чтобы меню выглядело:

Как получилось:

Какой сейчас код:

HTML:

<div id="header-bottom">
      <ul id="header-nav">
 <li><a href="#" select="select">Главная</a></li>
 <li><a href="#">Портфолио</a></li>
 <li><a href="#">Обо мне</a></li>
 <li><a href="#">Контакты</a></li>
</ul>
</div>

CSS

#header ul {
float: left;
padding:9px 20px 22px;
}

#header ul li {
float: left;
padding-left: 22px;
}

#header ul li a {
height: 41px;
display: block;
}

#header ul li a:hover {
height: 41px;
display: block;
text-decoration: none;
background: url(images/header-nav-hover-bg.png) 0 0 no-repeat;
}

.select {
color: #ffffff; 
height: 41px;
display: block;
text-decoration: none;
background: url(images/header-nav-hover-bg.png) 0 0 no-repeat;
}

Прошу не очень закидывать помидорами. Я только учусь верстать. Просмотрел курс Евгения Попова по HTML и CSS. Взял бесплатный psd-макет. Пробую верстать, и заклинило.

psywalker · November 12, 2012

On 11/12/2012 at 1:35 PM, WebAndorix said:
Прошу не очень закидывать помидорами. Я только учусь верстать. Просмотрел курс Евгения Попова по HTML и CSS. Взял бесплатный psd-макет. Пробую верстать, и заклинило.

Здесь два ключевых важных момента можно выделить:

Quote
Просмотрел курс Евгения Попова

=

Quote
Пробую верстать, и заклинило

WebAndorix · November 13, 2012

psywalker, хорошо. Каким же путем, кроме проб-ошибок-стуканья головой об стену, можно научиться верстать? Ведь по книжкам, курсам можно научиться кодам, но не тому, как их применять. Или я не прав?

Edited November 13, 2012 by WebAndorix

psywalker · November 13, 2012

On 11/13/2012 at 10:14 AM, WebAndorix said:
psywalker, хорошо. Каким же путем, кроме проб-ошибок-стуканья головой об стену, можно научиться верстать? Ведь по книжкам, курсам можно научиться кодам, но не тому, как их применять. Или я не прав?

Далеко не все книжки одинаково полезны. Например, прежде чем хвататься за уроки Попова, нужно выяснить, что это за фрукт. Если бы вы предварительно пришли на форум и спросили о нём, то вам сообщили бы, что его уроки рассчитаны только на бабло и мало приносят пользы.

Купите нормальные книги и учитесь по ним.

Devil_John · November 13, 2012

On 11/13/2012 at 10:14 AM, WebAndorix said:
psywalker, хорошо. Каким же путем, кроме проб-ошибок-стуканья головой об стену, можно научиться верстать? Ведь по книжкам, курсам можно научиться кодам, но не тому, как их применять. Или я не прав?

Не сочтите за наглость, что я, сам будучи щенком, лезу давать советы. Я изучал основы по видеоурокам центра Специалист (это при Бауманке). Двадцать часов потратил на просмотр, а дальше практика. Вроде с блочной версткой справляюсь

FEL · November 14, 2012

On 11/13/2012 at 10:14 AM, WebAndorix said:
psywalker, хорошо. Каким же путем, кроме проб-ошибок-стуканья головой об стену, можно научиться верстать? Ведь по книжкам, курсам можно научиться кодам, но не тому, как их применять. Или я не прав?

я без видео уроков учу, вроде не плохо справляюсь)

а JS я тут начал учить http://learn.javascript.ru/

newtvis · November 14, 2012

On 11/12/2012 at 1:35 PM, WebAndorix said:
Уважаемые верстальщики, подскажите, пожалуйста, как решить одну проблему. В CSS вставил градиентную картинку в качестве фона для меню, который должен появляться при наведении курсора на определенный пункт. При просмотре в браузере картинка фона не отображается полностью по ширине, а лишь закрывает текст и все.

Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =)

HTML:


<nav>
	<ul class="nav">
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
	</ul>
</nav>

CSS:


.nav li{
	display: inline-block;
	/* Для няшного IE */
	*display: inline;
	*zoom: 1;
}

.nav li a {
	text-decoration: none;
	font-family: Arial, sans-serif;
	padding:4px 10px;
	color: #369;
	border: 1px solid transparent;
}

.nav li a:hover {
	color:#fff;
	background: #0080b4;
	background: -moz-linear-gradient(top, #0080b4 0%, #006f98 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080b4), color-stop(100%,#006f98));
	background: -webkit-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: -o-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: -ms-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: linear-gradient(to bottom, #0080b4 0%,#006f98 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b4', endColorstr='#006f98',GradientType=0 );
	border: 1px solid #0080b4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
	-moz-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
	box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
}

И никаких картинок не нужно.

FEL · November 14, 2012

On 11/14/2012 at 8:45 AM, newtvis said:

On 11/12/2012 at 1:35 PM, WebAndorix said:
Уважаемые верстальщики, подскажите, пожалуйста, как решить одну проблему. В CSS вставил градиентную картинку в качестве фона для меню, который должен появляться при наведении курсора на определенный пункт. При просмотре в браузере картинка фона не отображается полностью по ширине, а лишь закрывает текст и все.
Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =)
И никаких картинок не нужно.

уже несколько раз демонстрировали

Sign In

Правильная верстка горизонтального меню

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information