Выровнять пункты меню вертикально по центру

@antidemon92 · Регистрация: 29.11.2013

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

Подскажите в вертикальным выравниванием. есть менюшка нужно чтобы пункты меню были выровнены вертикально по центру, но почему то ни чего не работает.

HTML5
1
2
3
4
5
6
7
8
9
10
            <ul class="header_bottom_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>
                    <li><a href="">Туризм и отдых</a></li>
                    <li><a href="">Домашняя техника</a></li>
                </ul>

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
.header_bottom_menu{
position:relative;
margin:0px;
padding:0px;
}
.header_bottom_menu li{
list-style:none;
}
.header_bottom_menu>li{
display:inline-block;
vertical-align:middle;
height:26px;
margin-top:2px;
border-right:1px solid #315a83;
max-width:127px;
text-align:center;
line-height:1;
float:left;
}
.header_bottom_menu>li:last-child{
border:none;
}
.header_bottom_menu>li>a{
text-decoration:none;
font-family:Myriad Pro;
text-decoration:nnoe;
display:inline-block;
padding:0 5px;
font-size:14px;
color:#fff;
}

@maximus2011 · 15.07.2014, 17:13

у .header_bottom_menu>li нужно писать не display:inline-block; а display:table-cell;

вот пример, недавно делал http://257500.ru/

@Micheal · 15.07.2014, 17:14

Я чуть, конечно, поменял стили, но вертикальное центрирование получилось

(Обрати внимание на строки 16-17).
Кстати, maximus2011 тоже верно подсказывает, можно использовать и display: table-cell вместе с vertical-align: middle;

HTML5
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
<!doctype html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .header_bottom_menu
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
            .header_bottom_menu li
            {                
                display: inline-block;
                height: 26px;
                line-height: 26px;
                border-left: 1px solid #000000;
            }
 
                .header_bottom_menu li:first-child
                {
                    border: none;
                }
 
                .header_bottom_menu li a
                {
                    display: inline-block;        
                    text-decoration: none;
                    color: #000000; 
                    padding-left: 5px;                               
                }
    </style>
</head>
<body>
    <ul class="header_bottom_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>
        <li><a href="#">Туризм и отдых</a></li>
        <li><a href="#">Домашняя техника</a></li>
    </ul>
</body>
</html>

@antidemon92 · 15.07.2014, 17:52 **[ТС]**

maximus2011, Micheal, Спасибо большое использовал первый способ буду знать очень полезно. А еще подскажете с одним вопросом. С этим же меню. Есть блок header с тенью. В нем выпадающее меню.

HTML5
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
<div class="header">
<ul class="header_bottom_menu">
                    <li><a href="">Автозвук и мультимедиа</a>
                        <ul>
                            <li><a href="">Уровень 2</a>
                                <ul>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                </ul>
                            </li>
                            <li><a href="">Уровень 2</a>
                                <ul>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                </ul>
                            </li>
                            <li><a href="">Уровень 2</a>
                                <ul>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                </ul>
                            </li>
                            <li><a href="">Уровень 2</a>
                                <ul>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                    <li><a href="">Уровень 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
 
</ul>
</div>

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
.header{
border-radius:0 0 12px 12px;
-moz-border-radius:0 0 12px 12px;
-webkit-border-radius:0 0 12px 12px;
box-shadow:1px 1px 6px #888, -1px -1px 6px 1px #888;
-moz-box-shadow:1px 1px 6px #888, -1px -1px 6px 1px #888;
-webkit-box-shadow:1px 1px 6px #888, -1px -1px 6px 1px #888;
width:990px;
margin:0 auto;
background:url('images/header_fon.jpg') repeat-x;
height:98px;
}
.header_bottom_menu>li:hover >ul{
display:block;
}
.header_bottom_menu>li>ul{
display:none;
margin:0px;
padding:0px;
background-color:#fff;
width:990px;
position:absolute;
}
.header_bottom_menu>li>ul>li{
float:left;
}
.header_bottom_menu>li>ul>li>a{
color:#232424;
font-family:Arial;
font-size:12px;
text-decoration:none;
font-weight:bold;
}
.header_bottom_menu>li>ul>li>ul>li>a{
color:#232424;
font-family:Arial;
font-size:13px;
}

Когда меню выпадаает оно закрывает своим фоном тень. как сделать чтобы выпадающее меню ушло под блок хеадер. Пробовал задавать хеадеру position:absolut и задавать z-index, но почему то тень не хочет выходить поверх выпадающего меню

@Micheal · 15.07.2014, 17:59

Замените для этих селекторов свои стили на эти:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.header
        {
            position: relative;
            border-radius: 0 0 12px 12px;
            -moz-border-radius: 0 0 12px 12px;
            -webkit-border-radius: 0 0 12px 12px;
            box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -moz-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -webkit-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            width: 990px;
            margin: 0 auto;
            background: url('images/header_fon.jpg') repeat-x;
            height: 98px;
        }
 
        .header_bottom_menu > li:hover > ul
        {
            position: absolute;
            left: 50px;
            top: 120px; /* тут нужна точная высота первого блока + размытие тени я для демонстрации эффекта поставил наверняка больше*/
            display: block;
        }

Хммм....тут есть проблема...

если опустить курсор - меню сворачивается

Сейчас, ...надо подумать...

@maximus2011 · 15.07.2014, 17:59

ну тут уже никак. У вас тень идет для блока header, значит она хоть как принадлежит ему. А выпадающее меню уже идет уровнем выше. Соответственно оно будет закрывать тень. Это вполне нормально. Так что не переживайте

Ну или если вы имете ввиду, что тень закрывается справа, сделайте выпадающее меню в ширину поменьше

А ну понял о чем речь

Micheal правильно вам написал

@antidemon92 · 15.07.2014, 18:02 **[ТС]**

maximus2011, а почему z-index не работает. он же распространяется на отображении всех элементов с absolute и relative

@vovandr · 15.07.2014, 18:02

В брайзерах firefox наблюдал серьёзные проблемы при попытки спозиционировать относительно display:table-cell; Это так, может кому-то пригодится

После этого забыл про это свойство, как страшный сон

@antidemon92 · 15.07.2014, 18:07 **[ТС]**

vovandr, не у меня в фаерфоксе отлично установилось

@maximus2011 · 15.07.2014, 18:10

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

В брайзерах firefox наблюдал серьёзные проблемы

странно! я все время его пользую, никаких проблем

Добавлено через 2 минуты

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

а почему z-index не работает. он же распространяется на отображении всех элементов с absolute и relative

ну так вы поймите, что если, к примеру у header стоит z-index:10; то и у его тени будет z-index:10; так как тень это не элемент а свойство, свойству свойство не припишешь

@antidemon92 · 15.07.2014, 18:10 **[ТС]**

maximus2011, Micheal, Должно получится вот так. но если использовать методMicheal, с тенью по бокам будут проблемы она не встанет как нужно

@vovandr · 15.07.2014, 18:11

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

странно! я все время его пользую, никаких проблем

Сейчас точно не смогу сказать контекст в котором это было, но трабл точно есть

Если интересно можете на stackoverflow поискать там этих тем с этой проблемой много

@antidemon92 · 15.07.2014, 18:11 **[ТС]**

@Micheal · 15.07.2014, 18:12

Вот такой вот вариант:

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
.header
        {
            
            border-radius: 0 0 12px 12px;
            -moz-border-radius: 0 0 12px 12px;
            -webkit-border-radius: 0 0 12px 12px;
            box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -moz-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -webkit-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            width: 990px;
            margin: 0 auto;
            background: url('images/header_fon.jpg') repeat-x;
            height: 98px;
        }
 
        .header_bottom_menu > li:hover > ul
        {
            padding-top: 100px;
            display: block;
            background: RGBA(255, 255, 255, 0.0);
        }
 
        .header_bottom_menu > li > ul
        {
            display: none;
            margin: 0px;
            padding: 0px;
            background-color: #FFF;
            width: 990px;
            position: absolute;
            z-index: 9999;
            background: red;
        }
 
            .header_bottom_menu > li > ul > li
            {
                float: left;
                background: #FFF;
            }
 
                .header_bottom_menu > li > ul > li > a
                {
                    color: #232424;
                    font-family: Arial;
                    font-size: 12px;
                    text-decoration: none;
                    font-weight: bold;
                }
 
                .header_bottom_menu > li > ul > li > ul > li > a
                {
                    color: #232424;
                    font-family: Arial;
                    font-size: 13px;
                }

@antidemon92 · 15.07.2014, 18:17 **[ТС]**

maximus2011, дак я так и хочу. я понимаю что свойство 10. мне и нужно чтобы z-index свойства был выше чем у меню и оно ушло под тень.

Добавлено через 4 минуты
Micheal, не. там дырень. через нее все видно. фон должен быть белый сплошняком и заходить под тень хеадер как на картинке

@maximus2011 · 15.07.2014, 18:18

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

дак я так и хочу

ааа, вот как должно быть! ну тут надо смотреть по z-index; С ними тоже могут быть проблемы, если неправильно изначально сделано. Если дадите верстку, я посмотрю, но только завтра. Сегодня к сожалению не смогу. У меня сейчас 21 час. Так что смотрите по часовому поясу

Если устраивает, к завтрашнему вечеру или может к обеду сделаю

@Micheal · 15.07.2014, 18:19

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

не. там дырень. через нее все видно

да, я про это и писал автору вопроса, ему нужно подогнать padding-top в строке 18 так, чтобы дыры не было...
padding-top должен быть равен высоте главного блока + размерность тени

@vovandr · 15.07.2014, 18:29

А если просто фон прозрачный сделать для меню?

CSS
1
2
3
4
5
6
7
8
.header_bottom_menu>li>ul{
display:none;
margin:0px;
padding:0px;
background-color: transparent;
width:990px;
position:absolute;
}

Добавлено через 1 минуту
Хотя нет по картинке понял что не подойдет) тогда padding только как до меня коллеги писали

@antidemon92 · 15.07.2014, 18:33 **[ТС]**

Micheal, сделал паддинг. фишка в том что не зависимо от кол-во пунктов меню оно должно быть 990 в ширину и примерно 300 в высоту. как тогда быть с фоном он должен быть белым

@Micheal · 15.07.2014, 18:36

Ну lightgreen я чисто демонстрационно поставил

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
57
body
        {
            background: lightgreen;
        }
 
        .header
        {
            border-radius: 0 0 12px 12px;
            -moz-border-radius: 0 0 12px 12px;
            -webkit-border-radius: 0 0 12px 12px;
            box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -moz-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            -webkit-box-shadow: 1px 1px 6px #888, -1px -1px 6px 1px #888;
            width: 990px;
            margin: 0 auto;
            background: url('images/header_fon.jpg') repeat-x;
            height: 98px;
        }
 
        .header_bottom_menu > li:hover > ul
        {            
            padding-top: 85px;
            display: block;            
        }
 
        .header_bottom_menu > li > ul
        {
            display: none;
            margin: 0px;
            padding: 0px;
            background-color: #FFF;
            width: 990px;
            position: absolute;
            background: RGBA(0, 0, 0, 0);            
        }
 
            .header_bottom_menu > li > ul > li
            {
                float: left;
                background: #FFF;
            }
 
                .header_bottom_menu > li > ul > li > a
                {
                    color: #232424;
                    font-family: Arial;
                    font-size: 12px;
                    text-decoration: none;
                    font-weight: bold;
                }
 
                .header_bottom_menu > li > ul > li > ul > li > a
                {
                    color: #232424;
                    font-family: Arial;
                    font-size: 13px;
                }

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.07.2014, 17:13
	у .header_bottom_menu>li нужно писать не display:inline-block; а display:table-cell; вот пример, недавно делал http://257500.ru/ 1

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.07.2014, 17:59
	ну тут уже никак. У вас тень идет для блока header, значит она хоть как принадлежит ему. А выпадающее меню уже идет уровнем выше. Соответственно оно будет закрывать тень. Это вполне нормально. Так что не переживайте Ну или если вы имете ввиду, что тень закрывается справа, сделайте выпадающее меню в ширину поменьше А ну понял о чем речь Micheal правильно вам написал 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:02 [ТС]
	maximus2011, а почему z-index не работает. он же распространяется на отображении всех элементов с absolute и relative 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	15.07.2014, 18:02
	В брайзерах firefox наблюдал серьёзные проблемы при попытки спозиционировать относительно display:table-cell; Это так, может кому-то пригодится После этого забыл про это свойство, как страшный сон 1

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:07 [ТС]
	vovandr, не у меня в фаерфоксе отлично установилось 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:10 [ТС]
	maximus2011, Micheal, Должно получится вот так. но если использовать методMicheal, с тенью по бокам будут проблемы она не встанет как нужно 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:11 [ТС]
	0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:17 [ТС]
	maximus2011, дак я так и хочу. я понимаю что свойство 10. мне и нужно чтобы z-index свойства был выше чем у меню и оно ушло под тень. Добавлено через 4 минуты Micheal, не. там дырень. через нее все видно. фон должен быть белый сплошняком и заходить под тень хеадер как на картинке 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	15.07.2014, 18:33 [ТС]
	Micheal, сделал паддинг. фишка в том что не зависимо от кол-во пунктов меню оно должно быть 990 в ширину и примерно 300 в высоту. как тогда быть с фоном он должен быть белым 0