Проблема с прыгающим меню

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Dimacik, 15 ноя 2014.

  1. Dimacik

    Dimacik

    Регистрация:
    15 ноя 2014
    Сообщения:
    5
    Симпатии:
    1
    Приветствую всех.Помогите пожалуйста.Мне нужно сделать обычное горизонтальное меню с 4-мя ссылками.Расстояние между ссылками должно быть строго 50px и при наведении мышки на пункт меню текст должен становиться жирным
    а:hover{font-weight:bold}.
    Проблема в том,что из-за "font-weight:bold" и установленного "паддинга" в 50 px между тегами "li", при наведении на ссылку меню начинает смещаться.Мне нужно,чтобы остальные ссылки были неподвижны.Как это сделать?
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.378
    отлично было бы увидеть живой пример.
     
  3. Dimacik

    Dimacik

    Регистрация:
    15 ноя 2014
    Сообщения:
    5
    Симпатии:
    1
    Код:
            <nav>
           <ul>
               <li><a href="index.html">о компании</a></li>
               <li><a href="uslugi.html">услуги</a></li>
                    <li><a href="price.html">цены</a></li>
                        <li><a href="contacts.html">контакты</a></li>
    
           </ul>
            </nav>
    
    <style>
    nav ul{
        padding-left: 85px;
        list-style: none;
        width: 100%;
    }
    nav ul li{
        float: left;
        list-style: none;
        font: 22px Tahoma;
        color: black;
        margin-right: 50px;
    }
    
    a{
        text-decoration: none;
        color: black;
    }
    
    a:hover{
        color: #e2001a;
        font-weight: bold;
    }
    
    </style>
     
    Lasted edited by : 16 ноя 2014
  4. Dimacik

    Dimacik

    Регистрация:
    15 ноя 2014
    Сообщения:
    5
    Симпатии:
    1
    $iD нравится это.
  5. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.378
    этого я и просил изначально)

    задайте width для li, например, дла вашего примера = 20%.
     
  6. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    Сделать не a:hover {font-weight: bold;},
    а
    li:hover {padding: 48px;}
    li:hover a {font-weight: bold;}
    То есть при увеличении высоты li из за жирности, у вас должен уменьшиться паддинг (значение 58 пикселей придумал наугад, подберите, какое нужно).
     
  7. Dimacik

    Dimacik

    Регистрация:
    15 ноя 2014
    Сообщения:
    5
    Симпатии:
    1
    Спасибо за советы,но к сожалению не помогли оба варианта.Как ни подставляй,соседние ссылки всё равно смещаются,либо все,либо какая-то из них.
     
  8. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.378
  9. Dimacik

    Dimacik

    Регистрация:
    15 ноя 2014
    Сообщения:
    5
    Симпатии:
    1
    Ссылки не смещаются,но расстояние то между ними уже не 50px,а больше.Width в 25% прибавил к
    "margin-right: 50px" ещё ширину блока и расстояние увеличилось ещё больше. То есть мне нужно,чтобы все ссылки ровно одинаково друг от друга стояли,то есть расстояние от последней буквы 1-й ссылки до первой буквы 2-й ссылки было 50px.Надо как-то сделать так,чтобы ссылки были блочными,но ширина блока была равна чётко длине текста и не более.Или может можно добиться другим путём...
     
    Последнее редактирование: 18 ноя 2014