1 Тема від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Тема: Як вирівняти меню на ширину сайту?

Створюю для сайту горизонтальне меню:

<div id="menu">
<ul>
<li><a href="Index.html">Головна</a></li>
<li><a href="History.html">Історія</a></li>
<li><a href="Catalogue.html">Каталог</a></li>
<li><a href="Prices.html">Цінник</a></li>
<li><a href="#">Зв'язок</a></li>
</ul>
</div>
#menu{
width: 100%;
background-color: #333;
}
#menu ul{
margin: 0;
padding: 0;
float: left;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; 
}
#menu ul li a:visited {
color: white;
}
#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;
}

Проблема в тому, що...загалом виходить щось таке:https://pp.сайт-злодій/c617721/v617721466/16ecf/sCvKpNEWSnU.jpg
Що робити?Як зробити, щоб меню вирівнялось по всій ширині сайту(650px)?

2 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Експерементував і додав float: left до #menu
Блок вирівнявся на всю ширину.А чого так?

3 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Змінив CSS:

#menu{
width: 100%;
background-color: #333;
float: left;
}
#menu ul{
margin: 0;
padding: 0;

}
#menu ul li{
display: inline-block;
width: 130px;
}
#menu ul li a{
float: left;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; 
}
#menu ul li a:visited {
color: white;
}
#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;
}

Вийшло:
https://pp.сайт-злодій/c617721/v617721466/16ed7/Iiv6h4pKppA.jpg
Як зробити, щоб меню нормальне було?

4 Відповідь від Q-bart Востаннє редагувалося Q-bart (11.08.2014 11:08:36)

  • Q-bart
  • Q-bart
  • Хочу бути модератором, щоб такі штуки ставити
  • Поза форумом
  • Звідки: Центр інтернету
  • Дата реєстрації: 14.06.2014
  • Повідомлень: 1 725
    • Репутація: 717

Re: Як вирівняти меню на ширину сайту?

треба додати

#menu{
position: relative;
}

почитайте десь про це

5 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Позицонування я вчив.Зробив, але результат той же.Нічго не змінилось.Я вже статей 20 прочитав.Витратив 4 години.І все до чого дійшов...ні до чого не прийшов...  :(

6 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Так хтось знає як вирішити проблему?Я вже намучився.Все до чого прийшов - усі елементи між собою мають однакову відстаню, правий дальній елемент прижатий до країв, а крайній лівій чомусь ні.

7 Відповідь від Blast

  • Blast
  • Blast
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.01.2014
  • Повідомлень: 1 099
    • Репутація: 156

Re: Як вирівняти меню на ширину сайту?

misha_bondar_2012 написав:

Так хтось знає як вирішити проблему?Я вже намучився.Все до чого прийшов - усі елементи між собою мають однакову відстаню, правий дальній елемент прижатий до країв, а крайній лівій чомусь ні.

Задай ширину контейнеру меню в 100% і вирівняй по правому в теорії перший пункт має бути якраз біля лівого краю

8 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Зробив 100%, а по правому, що вирівнювати?

9 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

#menu{
width: 100%;
background-color: #333;
text-align: justify;
}
#menu ul{
margin: 0;
padding: 0;
 
}
#menu ul li{
display: inline-block;
width:100px;
}
#menu ul li a{
float: left;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; 
}
#menu ul li a:visited {
color: white;
}
#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;
}

10 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Я у шоці.Це мій перший сайт.Я гадав уся проблема буде у контенті...ні!Вже годин 5 над цим меню мучаюсь.Усі статті перечитав - результат один і той же.

11 Відповідь від Blast

  • Blast
  • Blast
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.01.2014
  • Повідомлень: 1 099
    • Репутація: 156

Re: Як вирівняти меню на ширину сайту?

misha_bondar_2012 написав:

Я у шоці.Це мій перший сайт.Я гадав уся проблема буде у контенті...ні!Вже годин 5 над цим меню мучаюсь.Усі статті перечитав - результат один і той же.

Спробуй

12 Відповідь від bodyanua

  • bodyanua
  • Користувач
  • Поза форумом
  • Дата реєстрації: 13.08.2014
  • Повідомлень: 8
    • Репутація: 6

Re: Як вирівняти меню на ширину сайту?

Чи влаштовує такий варіант?

#menu{
width: 100%;
background-color: #333;
}

#menu ul li{
display: inline-block;
width: 20%;  /* оскільки у нас 5 кнопок 100/5=20% */
float: left;
background-color: #333;    
}

#menu ul li a{
text-align: center;
text-decoration: none;
color: white;
display: block;
padding: 10.5px 11px;   
}

#menu ul li a:visited {
color: white;
}

#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;
}

Демо на jsfiddle

13 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти меню на ширину сайту?

Ні.Взагалі якась фігня виходить.Я просто вирівняв меню по центру та й все.Хай поки так буде.

14 Відповідь від dimonchoo Востаннє редагувалося dimonchoo (19.08.2014 15:42:08)

  • dimonchoo
  • Користувач
  • Поза форумом
  • Дата реєстрації: 19.08.2014
  • Повідомлень: 1
    • Репутація: 0

Re: Як вирівняти меню на ширину сайту?

#menu ul li{
display: inline-block;
width: 130px;


Зменшіть ширину в цьому блоці на меншу, а все залиште як і було.

15 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Як вирівняти меню на ширину сайту?

тримай

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
        margin:0;
        padding:0;
        }
        nav{
            float: left;
            width: 100%;
        }
        li{
            list-style: none;
            float: left;
        }
        a{
        text-decoration: none;
        font-size: 18px;
        font-family: sans-serif;
        display: block;
        padding: 10px 123px;
        }
        a:hover{
            background: #333;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <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>
</body>
</html>