Jump to content
  • 0

Как правильно верстать горизонтальное меню?


Rooner
 Share

Question

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

-929206895.jpg

Как мне сделать меню одной строкой, фиксированной ширины 980пикс., чтобы пункты никуда не переносились?

Нашел только 1 решение - прописать ширину всех li, но так не получится, не все влезет.

Может быть указать отступы в pt или em? Пробую но не получается.


Сейчас заметил что проблема в размере шрифта, при зуме он увеличивается и расталкивает блоки, как можно зафиксировать размер шрифта в меню?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Решил проблему пока так:

          <li style="width: 105px;"><a href="/o-kompanii/">О компании</a></li>          <li style="width: 80px;"><a href="/novosti/">Новости</a></li>          <li style="width: 111px;"><a href="/o-produktsii/">О продукции</a></li>          <li style="width: 134px;"><a href="/sotrudnichestvo/">Сотрудничество</a></li>          <li style="width: 88px;"><a href="/kontakty/">Контакты</a></li>          <li style="width: 98px;"><a href="/gde-kupiti/">Где купить</a></li>          <li style="width: 143px;"><a href="/nas-rekomenduyut/">Нас рекомендуют</a></li>

Просто, тупо, но эффектино

Link to comment
Share on other sites

  • 0

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

 

-929206895.jpg

Как мне сделать меню одной строкой, фиксированной ширины 980пикс., чтобы пункты никуда не переносились?

Нашел только 1 решение - прописать ширину всех li, но так не получится, не все влезет.

Может быть указать отступы в pt или em? Пробую но не получается.

Сейчас заметил что проблема в размере шрифта, при зуме он увеличивается и расталкивает блоки, как можно зафиксировать размер шрифта в меню?

Списку задайте white-space: nowrap;

Переноситься не должен, но тогда и влезать не будет наверное.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By mn8156
      Приветствую! 
      Проблема: добавил блоку псевдоэлемент (треугольный ). Абсолютно спозиционировал и отодвинул вправо на величину, равную ширине этого псевдоэлемента. Во всех браузерах работает нормально, но в некоторых мобильных Chrome добавляется отступ примерно в 1px между элементом и псевдоэлементом. От куда он? Как убрать?
       
      //Блок .news-img_tag-category { color: #fff; font-size: 0.75em; width: 71px; height: 20px; text-align: center; } //Псевдоэлемент .news-img_tag-category::after{ content:""; border-left:10px solid #812780; border-right:10px solid transparent; border-top:10px solid transparent; border-bottom:10px solid transparent; position:absolute; right:-20px; }  

    • By RaGe2244
      У текста есть внутренние отступы, например h1 размером 68px имеет высоту 93px. Как с этим бороться кроме как подбором отступа если хочешь сделать пиксель в пиксель?
    • By sp0k1e
      Что-то не получается убрать этот промежуток. Съехало все после того, как добавил картинку звездочки в элемент списка.
      <body> <div class='wrapper'> <header> <img src="images/logo.png"> <div class='right'> <a href="#"><img src="images/search.png"></a> <button type='submit'>LOGIN or REGISTER</button></div> <div class='clearfix'></div> </header> <nav> <ul> <li><a href="/home/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/about/">About</a></li> <li><a href="/pages/">Pages</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact</a></li> </ul> <ul class="tool"> <li> <a href="/wish/"> <div><img src="images/star.png"></div> <div>30</div> </a> </li> <li> <a href="/wish/"> <div><img src="images/card.png"></div> <div>30</div> </a> </li> </ul> </nav> <div class="main-item"> <div class="price">$145.99</div> <h2>Pinck shoes</h2> <h2>2013 Collection</h2> <div class='desc'>Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</div> </div> <ul class='action-menu'> <li><a href="/view/"><img src="images/eye.png"></a></li> <li><a href="/wish/"><img src="images/wish.png"></a></li> <li><a href="/share/"><img src="images/share.png"></a></li> <li><a href="/buy/"><img src="images/buy.png"></a></li> </ul> </div></body>body { margin: 0; padding: 0; font-family: Calibri;}header{background-color: black; padding: 0 230px; position: relative;}header>img { padding: 10px 0;}header .right { float: right;}header a{ padding: 15px 20px;}header button { border: none; height: 45px; font-size: 12px; padding: 10px 20px; color:#7e7e7e; background-color: #d3d3d3;}nav { background-color: white;}nav a{ text-decoration: none; color:#242424;}nav ul { margin: 0; margin-left: 230px; padding: 0; display: inline-block;}nav li { list-style-position: inside; font: 10pt 'Arial', sans-serif; display: inline-block; background-color: #d3d3d3; padding:25px; margin-right: -4px; font-weight: bold;}.tool { margin-left: 206px; }.tool>li { display: inline-block; width: 90px; line-height: 10px; text-align: center; vertical-align: middle;}.tool>li:first-child{ line-height: 1px; text-align: center; vertical-align: middle;}.tool>li>a>div { display: inline-block; }
    • By alexander85
      Здравствуйте! Помогите пожалуйста разместить фон top_menu.png для кнопки
      background-image: url(top_menu-l.png), url(top_menu-r.png), url(top_menu.png); background-position: top left, top right, left 5px right 5px; background-repeat: no-repeat, no-repeat, repeat;
    • By Евгений_SB
      Ребят здравствуйте .я только учусь взял PSD из бесплатных шаблонов и пробую верстать,в принципе после прочтения уроков на вашем сайте за несколько дней смог сверстать маленькое меню.а здесь застопорился все мое меню почему то кривое .думаю напутал с отступами и размерами, не найду только где. 
      Вот так должно быть 

       
      как у меня получилось.

       
      не совсем понял как поставить такие черточки между меню как на первом скрине, возможно это у меня из за неправильных отступов такие 
      вот код 
       
      ps. Подскажите пожалуйста ребят.заранее спасибо 
       
      HTML 
      <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Maket</title> <link rel="stylesheet" href="style.css"></head><div id="maket"> <div class="heder-top"> <div class="logo"> <a href="#"><img src="images/GoodInc_02.png"></a> </div> <div class="nevsletter"> <p>Newsletter</p> </div> <div class="Contakt"> <p>Contact</p> </div></div> <div class = "clear"></div> <div class="navigation"> <div class="icon"></div> <div> <ul class="navigations"> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="quiclinks"></div> <div class="dropdown"></div> <div class = "clear"></div> </div><body> </body></html>CSS 
      * { margin: 0px; padding: 0px;}body { background: #ebebeb;}#maket { width: 938px; height: 100%; margin: 0 auto;}.heder-top { margin: 0px; padding: 0px; background: #373737; width: 938px; height: 67px;}.logo { float: left; margin-right: 300px;}.nevsletter { display:inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center;}.Contakt { display: inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center}.clear { clear:both; content:""; display:block; height:0; font-size:0; overflow: hidden;}.navigation { background: #474747; width: 938px; height: 65px; display: inline-block; margin-top: -5px;}.icon { background-image: url(images/icon_09.png); float: left; width: 50px; height: 65px;}li:hover { border-bottom: 5px solid #f26c4f; }.navigations li:before { content: "|"; color: #fff; padding-right: 2px;}.navigations li { display: inline-block; list-style: none; margin: 2px; padding: 10px; height: 37px; width: 50px;}.navigations li a { list-style: none; margin: 10px; color: #eee; text-decoration: none; font: 12px Arial; line-height: 40px; }
×
×
  • 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