Search the Community

Меню сверстано с использованием float: left; Ширина меню 980пикселей. На скрине видно, что при 100% все хорошо, а вот при зуме в 75% последний элемент переносится на следующую строку. Каждый пункт меню, он же li имеет отступы padding: 18px 13px 18px 13px; но не имеет заданной ширины. Почему то при масштабе эти отступы то увеличиваются, то уменьшаются, а следовательно пункт меню то влазит то нет. Как мне сделать меню одной строкой, фиксированной ширины 980пикс., чтобы пункты никуда не переносились? Нашел только 1 решение - прописать ширину всех li, но так не получится, не все влезет. Может быть указать отступы в pt или em? Пробую но не получается. Сейчас заметил что проблема в размере шрифта, при зуме он увеличивается и расталкивает блоки, как можно зафиксировать размер шрифта в меню?

Здравствуйте уважаемые форумчане. Мне нужно сверстать простое горизонтальное меню при помощи CSS. Вот html код <div class="meny"> <!--Оказывается горизонтальное меню на CSS делается по другому принципу нежели то, меню, что я делал для своего сайта "Эволюция и происхождение человека, а именно через списки.--> <ul> <li> <a href="index.html">Главная </a> </li> <li> <a href="info.html"> Важная информация </a> </li> <li> <a href="histori.html"> История </a> </li> <li> <a href="osebe.html"> О себе </a> </li> <li> <a href="vopros.html"> Вопросы Ответ </a> </li> <li> <a href="works.html"> Виды работ </a> </li> <li> <a href="prais.html"> Прайс-лист </a> </li> <li> <a href="contact.html"> Вызов мастера </a> </li> </ul> </div> Вот CSS код .meny {position: absolute; top: 120px; left: 45px;} li {display: inline-block; margin: 10px; width: 100px; height: 56px; /* word-wrap: break-word;*/ } /*С меню я разобрался, теперь буду прописывать стили для ссылок.*/ li .sl a { width: 100px; height: 56px; word-wrap: break-word;} a {/*display: block;*/ font-size: 18px; font-weight:bold; color: #FFF700; text-decoration:none; outline: none;} /*Убираем появление пунктирной линии при нажатии на ссылку. Для Мозиллы.*/ a:hover {background: url(../images/glavn2.jpg) no-repeat; padding: 18px; width: 100%; height: 56px;} Вся проблема заключается в том что мне нужно большие элементы меню сделать "двухэтажными" Например Важная информация. Слово "информация" должно стоять под словом "важная" Если кто знает как это сделать, подскажите пожалуйста. Буду очень благодарен С уважением С. Кондулуков