Набросал менюшку - не знаю как задать ширину и бордер!

@jack_london · Регистрация: 26.07.2013

Студворк — интернет-сервис помощи студентам

Делаю собственноручно менюшку - никак мозг не сварит - где можно указать определенную ширину для данной навигации? Например сайт 800 пикселей по ширине, мне нужна такого же размера и менюшка, и чтобы для каждой кнопки была пропорциональная ширина, так сказать.

И второе: как сделать бордер только внутри меню, то что я прописал банально охватывает всё меню - а мне нужно, чтобы каждая из кнопок была отделена друг от друга.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style1.css">
    </head>
    <body>
        <ul class="menu">
            <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>
            <li><a href="#">Отзывы</a></li>
        </ul>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
    margin: 0;
    padding: 0;
    outline: none;
    background-color: gray;
}
 
ul.menu {
    margin: 20;
    text-align: center;
}
 
ul.menu li  {
    float: left;
    list-style: none;
    border: 1px solid white;
    background: #5e5e5e; /* Old browsers */
    background: -moz-linear-gradient(top, #5e5e5e 0%, #3f3f3f 50%, #5e5e5e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#3f3f3f), color-stop(100%,#5e5e5e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#5e5e5e',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li a {
    padding: 8px 10px 8px;
    display: block;
    font-family: Arial;
    font-size: 13px;
    color: white;
    text-decoration: none;
}
 
ul.menu li:hover {
    background: #3f3f3f; /* Old browsers */
    background: -moz-linear-gradient(top, #3f3f3f 0%, #1e1e1e 50%, #3f3f3f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(50%,#1e1e1e), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}

@Encoder · 03.09.2013, 01:21

Так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style1.css">
    </head>
    <body>
      <div id="wrapper">
        <ul class="menu">
            <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>
            <li><a href="#">Отзывы</a></li>
        </ul>
      </div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
body {
    margin: 0;
    padding: 0;
    outline: none;
    background-color: gray;
}
 
#wrapper {
  width: 1000px;
  
}
 
ul.menu {
    margin: 0 auto;
    display: table; /* Делаем таблицу чтобы можно было выровнять по центру и пункты меню на всю ширину */
    width: 800px;
    list-style: none;
}
 
ul.menu li  {
    display: table-cell; /* Ячейки таблицы */
    text-align: center;
    border-left: 1px solid #fff; /* Делаем разделители */
    background: #5e5e5e; /* Old browsers */
    background: -moz-linear-gradient(top, #5e5e5e 0%, #3f3f3f 50%, #5e5e5e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#3f3f3f), color-stop(100%,#5e5e5e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#5e5e5e',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li:first-child {
    border: none; /* Убираем разделитель у первого элемента */
}
 
ul.menu li a {
    padding: 8px 10px 8px;
    display: block;
    font-family: Arial;
    font-size: 13px;
    color: white;
    text-decoration: none;
}
 
ul.menu li:hover {
    background: #3f3f3f; /* Old browsers */
    background: -moz-linear-gradient(top, #3f3f3f 0%, #1e1e1e 50%, #3f3f3f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(50%,#1e1e1e), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}

@jack_london · 03.09.2013, 01:44 **[ТС]**

всё получилось, но есть вопросы (я только учусь поэтому прошу не удивляться)) - не могли бы вы расписать что и почему изменилось?

например почему float: left; был вообще убран, ведь с его помощью все пункты становились в горизонтальное положение, затем почему list-style: none; перешел в ul.menu и нужен ли он сейчас вообще? ведь ранее он убирал пунктиры, а сейчас я убираю это свойство, но их всё равно не видно, а также что дало display: table-cell и почему так важен display: table;

спасибо заранее!

@Justff · 03.09.2013, 03:23

кстати использованные display: table, table-cell и тд. не поддерживаются браузерами ie6 и ie7

@Encoder · 03.09.2013, 03:48

display: table; /* Делает ul таблицей */
display: table-cell; /* Делает li ячейками для таблицы */

В итоге мы получаем таблицу c одной строкой, пункты меню становятся ячейками таблицы, и они автоматически выравниваются в один ряд. Именно поэтому и не нужен float: left;

Почитайте как устроены таблицы и все поймете.

@newJS · 03.09.2013, 07:02

jack_london, поройся
Не работает выпадающее меню на CSS в IE
Кроссбраузерность для вкладок
сложное меню

Сообщение от Encoder

В итоге мы получаем таблицу

Зачем делать через..., если можно сразу таблицей написать?
Да и спецификация говорит о 17.2 Табличная модель CSS

ПА могут игнорировать эти значения свойства 'display' для документов HTML, поскольку авторы не должны изменять ожидаемое поведение элемента.

Впрочем, списки тоже не для горизонтальных меню придумали.
Так уж получилось, все как то согласились что списки вроде как ни чё, а таблицы не фонтан.

Сообщение от jack_london

можешь расписать

Это была не шутка, это был правильный совет.

@Justff · 03.09.2013, 12:00

Сообщение от newJS

Да и спецификация говорит о 17.2 Табличная модель CSS

только это спецификация css2 для html4

Добавлено через 5 минут
спецификация говорит использовать как раз display, а не таблицей сразу писать )

сразу таблицу использовать предлагать не вариант, так как если сайт тяжелый, то пользователь с маленькой скоростью будет ждать пока прогрузится вся таблица полностью, прежде чем он вообще что-то там увидеть сможет

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@jack_london 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 20
	03.09.2013, 01:44 [ТС]
	всё получилось, но есть вопросы (я только учусь поэтому прошу не удивляться)) - не могли бы вы расписать что и почему изменилось? например почему float: left; был вообще убран, ведь с его помощью все пункты становились в горизонтальное положение, затем почему list-style: none; перешел в ul.menu и нужен ли он сейчас вообще? ведь ранее он убирал пунктиры, а сейчас я убираю это свойство, но их всё равно не видно, а также что дало display: table-cell и почему так важен display: table; спасибо заранее! 0

@Justff 48 / 87 / 11 Регистрация: 12.08.2013 Сообщений: 474
	03.09.2013, 03:23
	кстати использованные display: table, table-cell и тд. не поддерживаются браузерами ie6 и ie7 0

@Encoder 62 / 62 / 11 Регистрация: 31.01.2013 Сообщений: 186
	03.09.2013, 03:48
	display: table; /* Делает ul таблицей / display: table-cell; / Делает li ячейками для таблицы */ В итоге мы получаем таблицу c одной строкой, пункты меню становятся ячейками таблицы, и они автоматически выравниваются в один ряд. Именно поэтому и не нужен float: left; Почитайте как устроены таблицы и все поймете. 1