1

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

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

<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.vk.me/c617721/v617721466/16ecf/sCvKpNEWSnU.jpg
Що робити?Як зробити, щоб меню вирівнялось по всій ширині сайту(650px)?

2

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

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

3

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.vk.me/c617721/v617721466/16ed7/Iiv6h4pKppA.jpg
Як зробити, щоб меню нормальне було?

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

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

треба додати

#menu{
position: relative;
}

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

Навчаюсь вчитись, щоб навчатись.

5

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

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

6

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

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

7

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

misha_bondar_2012 написав:

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

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

Junior Django Developer

8

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

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

9

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

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

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

11

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

misha_bondar_2012 написав:

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

Спробуй

Junior Django Developer
Подякували: Ярослав1

12

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

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

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

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

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

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


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

15

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>