Сползает пункт меню

[Dimanych]

Добрый день!

Тоже решил начать с первого макета http://divhack.com/

Делал сам, не подглядывая в решение.

Хотел попросить проверить, нет ли явных грубых ошибок? Увидел тему по этому макету и решил не плодить их.

Я понимаю, что если каждый новичок будет выкладывать этот пример, то это будет не правильно.

Но очень не хочется ошибиться в самом начале, в каких то основных вещах и потом тащить эти базовые ошибки с собой дальше.

http://diman.zz.mu/index.html

http://jsfiddle.net/Dimanych/zvhBU/

Есть один глюк - при сильном уменьшении в FF и Опере последний пункт меню сползает на следующую строчку.

http://diman.zz.mu/error.png

Пока не знаю как решить.

[Daiver]

Эта палка на половину деревянная, а на половину резиновая.

У вас все расстояния указаны в пикселях, а размеры текста в пунктах. При масштабировании страницы пункты и пиксели по-разному изменяют размер. И пропорции меняются.

[Dimanych]

Спасибо за ответ.

Поменял все расстояния на пиксели. Не помогло. Попробовал поменять на em. Вроде лучше, но все равно при определенном масштабе разъезжается.

Причем в ИЕ единственном все нормально.

Кстати вопрос возник - почему рекомендуется использовать списки? Сделал просто ссылками получилось тоже самое, а кода меньше.

[Dimanych]

Нашел решение на форуме http://forum.htmlbook.ru/index.php?showtopic=40545&hl=%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5&st=0

от Devil_John

Если каждому элементу LI указать width

И чтобы общая ширина всех элементов была равна ширине макета (в моем случае 960) то меню не портится.

http://diman.zz.mu/v2/index.html

[Zverushka]

Списки используются, потому что семантически меню - это список ссылок .

[Struggle]

Логотип обычно делается картинкой, и что за классы для каждого "li" ?

проще центрировать без ширины,

ul {

text-align: center;

font-size: 0; <!-- fix px -->

}

li {

float: left; <-- delete -->

display: inline-block;

}

и задать нормальное выравнивание списков по высоте, используя line-height

Edited July 10, 2013 by Struggle

[Dimanych]

Про логотип, думал, что раз он текстовый, то правильнее будет сделать без картинки. Перемудрил.

По меню это то, что надо. Я думал, без width никак не сделать чтобы не разъезжалось.

Но кстати, даже в этом случае, если например margin: 0 35px; заменить на margin: 0 38px; то при нормальном масштабе будет все правильно, а при уменьшении масштаба в пункте меню состоящем из двух слов (Become a member) второе слово будет переноситься на другую строчку. При уменьшении же левого и правого margin например до 35px все нормально.

В итоге получилось вот так:

/* Меню */

.menu {

padding: 0;

margin: 20px 0 0 0;

background: #afafaf;

list-style: none;

text-align: center;

font-size: 18px;

}

.menu li {

display: inline-block;

margin: 0 35px;

line-height: 2.5;

}

.menu a {

text-decoration: none;

color: #FFFFFF;

}

.menu a:hover {

text-decoration: underline;

}

PS. Похоже с http://divhack.com/ убрали макеты. Не успел скачать

[Struggle]

Про логотип, думал, что раз он текстовый, то правильнее будет сделать без картинки. Перемудрил.

По меню это то, что надо. Я думал, без width никак не сделать чтобы не разъезжалось.

Но кстати, даже в этом случае, если например margin: 0 35px; заменить на margin: 0 38px; то при нормальном масштабе будет все правильно, а при уменьшении масштаба в пункте меню состоящем из двух слов (Become a member) второе слово будет переноситься на другую строчку. При уменьшении же левого и правого margin например до 35px все нормально.

В итоге получилось вот так:

/* Меню */

.menu {

padding: 0;

margin: 20px 0 0 0;

background: #afafaf;

list-style: none;

text-align: center;

font-size: 18px;

}

.menu li {

display: inline-block;

margin: 0 35px;

line-height: 2.5;

}

.menu a {

text-decoration: none;

color: #FFFFFF;

}

.menu a:hover {

text-decoration: underline;

}

PS. Похоже с http://divhack.com/ убрали макеты. Не успел скачать

font-size: 0; <!-- fix px --> для .menu, чтобы убрать отступы между inline элементами

Edited July 11, 2013 by Struggle

[Zverushka]

Да, макеты убрали и еще вчера сайт был вообще нулевым, постепенно ссылки добавлялись ... думаю скоро должны появиться... У меня есть архивы макетов с версткой с 5го шаблона...

А вообще вот вебархив, тут можно утянуть шаблоны и верстку http://web.archive.org/web/20130530130836/http://divhack.com/ и там посмотри еще архивы за более старые даты, если не качается что-то.

Edited July 11, 2013 by Zverushka

[Dimanych]

font-size: 0; для .menu, чтобы убрать отступы между inline элементами

Теперь понял. Не знал что при использовании inline-block образуются отступы и это один из способов борьбы с ними.

А вообще вот вебархив, тут можно утянуть шаблоны и верстку http://web.archive.o...://divhack.com/ и там посмотри еще архивы за более старые даты, если не качается что-то.

Скачал макеты и примеры. К своему стыду не знал про такой шикарный сервис http://archive.org/

Всем спасибо.

[wwt]

Теперь понял. Не знал что при использовании inline-block образуются отступы и это один из способов борьбы с ними.

Насколько я помню вовсе не отступы. inline-block ведет себя как строчный элемент, то есть между ним и элементами до и после него(другие такие элементы или символы шрифта) имеется меж символьный интервал, вот его то вы и убираете, точнее могут подсказать верстальщики знакомые более близко с типографикой. Я к таковым не отношусь.

[Dimanych]

Это пробелы и переносы строк между закрывающим </li> и следующим открывающим <li>. Если все li написать в одну строку без пробелов, то этих интервалов не будет. Я проверил

Еще один способ убрать их вычитал - не писать закрывающие тэги </li>. Кстати тоже работает. Но этот способ какой-то вообще неприятный.

А вот почему так работает, я без понятия. Это наверно на самом деле к спецам по типографике.