Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
1 из 2 1 2 »
 
Рейтинг 4.90/21: Рейтинг темы: голосов - 21, средняя оценка - 4.90
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
1

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

15.07.2014, 16:10. Показов 3972. Ответов 25
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Подскажите в вертикальным выравниванием. есть менюшка нужно чтобы пункты меню были выровнены вертикально по центру, но почему то ни чего не работает.

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;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 15.07.2014, 16:10
Ответы с готовыми решениями:

Выровнять изображение вертикально по центру
Всем привет я новичок в программировании. Помогите пожалуйста. Когда вставляю картинку моя кнопка...

Выровнять строку текста вертикально по центру
Здравствуйте В диве .cap_contact_2 есть текст, этот текст нужно выровнять вертикально по центру -...

Выровнять пункты меню
Здравствуйте и хороших вам праздников. У меня вот какая проблема: создал пункты меню и решил...

Выровнять меню вертикально по середине блока
&lt;div class=&quot;nav&quot;&gt; &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;logo&quot;&gt; &lt;img...

25
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 17:13 2
у .header_bottom_menu>li нужно писать не display:inline-block; а display:table-cell;

вот пример, недавно делал http://257500.ru/
1
53 / 53 / 28
Регистрация: 23.04.2011
Сообщений: 214
15.07.2014, 17:14 3
Я чуть, конечно, поменял стили, но вертикальное центрирование получилось
(Обрати внимание на строки 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>
1
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 17:52  [ТС] 4
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, но почему то тень не хочет выходить поверх выпадающего меню
0
53 / 53 / 28
Регистрация: 23.04.2011
Сообщений: 214
15.07.2014, 17:59 5
Замените для этих селекторов свои стили на эти:

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;
        }
Хммм....тут есть проблема... если опустить курсор - меню сворачивается
Сейчас, ...надо подумать...
0
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 17:59 6
ну тут уже никак. У вас тень идет для блока header, значит она хоть как принадлежит ему. А выпадающее меню уже идет уровнем выше. Соответственно оно будет закрывать тень. Это вполне нормально. Так что не переживайте

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

А ну понял о чем речь Micheal правильно вам написал
0
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:02  [ТС] 7
maximus2011, а почему z-index не работает. он же распространяется на отображении всех элементов с absolute и relative
0
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.07.2014, 18:02 8
В брайзерах firefox наблюдал серьёзные проблемы при попытки спозиционировать относительно display:table-cell; Это так, может кому-то пригодится После этого забыл про это свойство, как страшный сон
1
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:07  [ТС] 9
vovandr, не у меня в фаерфоксе отлично установилось
0
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 18:10 10
Цитата Сообщение от vovandr Посмотреть сообщение
В брайзерах firefox наблюдал серьёзные проблемы
странно! я все время его пользую, никаких проблем

Добавлено через 2 минуты
Цитата Сообщение от antidemon92 Посмотреть сообщение
а почему z-index не работает. он же распространяется на отображении всех элементов с absolute и relative
ну так вы поймите, что если, к примеру у header стоит z-index:10; то и у его тени будет z-index:10; так как тень это не элемент а свойство, свойству свойство не припишешь
0
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:10  [ТС] 11
maximus2011, Micheal, Должно получится вот так. но если использовать методMicheal, с тенью по бокам будут проблемы она не встанет как нужно
0
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.07.2014, 18:11 12
Цитата Сообщение от maximus2011 Посмотреть сообщение
странно! я все время его пользую, никаких проблем
Сейчас точно не смогу сказать контекст в котором это было, но трабл точно есть Если интересно можете на stackoverflow поискать там этих тем с этой проблемой много
0
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:11  [ТС] 13
0
53 / 53 / 28
Регистрация: 23.04.2011
Сообщений: 214
15.07.2014, 18:12 14
Вот такой вот вариант:
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;
                }
0
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:17  [ТС] 15
maximus2011, дак я так и хочу. я понимаю что свойство 10. мне и нужно чтобы z-index свойства был выше чем у меню и оно ушло под тень.

Добавлено через 4 минуты
Micheal, не. там дырень. через нее все видно. фон должен быть белый сплошняком и заходить под тень хеадер как на картинке
0
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 18:18 16
Цитата Сообщение от antidemon92 Посмотреть сообщение
дак я так и хочу
ааа, вот как должно быть! ну тут надо смотреть по z-index; С ними тоже могут быть проблемы, если неправильно изначально сделано. Если дадите верстку, я посмотрю, но только завтра. Сегодня к сожалению не смогу. У меня сейчас 21 час. Так что смотрите по часовому поясу Если устраивает, к завтрашнему вечеру или может к обеду сделаю
0
53 / 53 / 28
Регистрация: 23.04.2011
Сообщений: 214
15.07.2014, 18:19 17
Цитата Сообщение от antidemon92 Посмотреть сообщение
не. там дырень. через нее все видно
да, я про это и писал автору вопроса, ему нужно подогнать padding-top в строке 18 так, чтобы дыры не было...
padding-top должен быть равен высоте главного блока + размерность тени
0
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.07.2014, 18:29 18
А если просто фон прозрачный сделать для меню?
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 только как до меня коллеги писали
0
1 / 1 / 6
Регистрация: 29.11.2013
Сообщений: 233
15.07.2014, 18:33  [ТС] 19
Micheal, сделал паддинг. фишка в том что не зависимо от кол-во пунктов меню оно должно быть 990 в ширину и примерно 300 в высоту. как тогда быть с фоном он должен быть белым
0
53 / 53 / 28
Регистрация: 23.04.2011
Сообщений: 214
15.07.2014, 18:36 20
Ну 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;
                }
0
15.07.2014, 18:36
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 15.07.2014, 18:36
Помогаю со студенческими работами здесь

Выровнять пункты меню, при этом не задавая им ширины
Если не задавать ширины кнопки меню, то подпункты съезжают, а мне нужно чтобы было без задачи...

Выровнять меню по центру
&lt;div id=&quot;maim-menu&quot;&gt; &lt;div class=&quot;menu&quot;&gt; &lt;jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;xhtml&quot;...

Выровнять меню по центру
помогите выровнять меню по центру вот rод html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...

Выровнять меню по центру
Приветствую. Никак не доходит как мне оцентровать меню. Вот исходные данные: .menu-copyright { ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
1 из 2 1 2 »
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru