Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация
 
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 14
24.03.2014, 16:21     Как уменьшить расстояние между подпунктами в выпадающем меню?   #1
Здравствуйте.
Имеется выпадающее меню, но расстояние между элементами подпунктов слишком большие, подскажите пожалуйста, как уменьшить эти расстояния.
Вот стили:

Код 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
#menu {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-family: Georgia;
    }
 
#menu li {
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    margin: 0;
    width: 150px;
    text-align: left;
    
    position: relative;
    padding-top: 12px;
    background-image: url([url]);[/url]
    font-size: 105%;
    }
 
#menu li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
    }
 
#menu li ul li {
    float:none ;
    height: 19px;
    margin: 0;
    width: 250px;
    text-align: left;
    background: #0590fa;
    }
 
#menu li a {
    display: block;
    width: 250px;
    height: 19px;
    color: #fff;
    text-decoration: none;
    }
 
#menu li:hover ul, #menu li.jshover ul {
    display: block;
    }
 
#menu li:hover, #menu li.jshover {
    background: #0590fa;
    }
Во вложении приложил картинку, как это выглядит. Нужно, чтобы расстояние между пунктами контекстная реклама было меньше.

Спасибо за помощь!
Миниатюры
Как уменьшить расстояние между подпунктами в выпадающем меню?  
Лучшие ответы (1)
AdAgent
Объявления
24.03.2014, 16:21     Как уменьшить расстояние между подпунктами в выпадающем меню?
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.03.2014, 16:21     Как уменьшить расстояние между подпунктами в выпадающем меню?
Посмотрите здесь:

HTML, CSS увеличиное расстояние между строк меню
HTML, CSS уменьшить расстояние между h1 и таблицей!
HTML, CSS Как убрать расстояние между основным меню и выпадающими из него пунктами?
HTML, CSS Расстояние между пунктами меню
HTML, CSS Уменьшить расстояние между буквами в строке, дробные отрицательные значения
Mr Coder
ƒ
297 / 297 / 52
Регистрация: 04.04.2013
Сообщений: 1,223
24.03.2014, 18:01     Как уменьшить расстояние между подпунктами в выпадающем меню?   #2
PetrC, html дайте для полной картины.
Могу предположить что тут высоту надо убрать:
Код CSS
1
2
3
4
5
6
7
8
#menu li ul li {
    float:none ;
    height: 19px;
    margin: 0;
    width: 250px;
    text-align: left;
    background: #0590fa;
    }
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 147
24.03.2014, 21:28     Как уменьшить расстояние между подпунктами в выпадающем меню?   #3
Возможно поможет, могу предположить что у вас идет все так ul > li > a. Так вот в css можно для ссылок прописать font к примеру

Код CSS
1
font: 15px/20px Arial;
это значит что размер текста 15px , а значение через дробь это межстрочное расстояние. Введите ваши значения туда и должно все получиться!
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 14
24.03.2014, 21:49  [ТС]     Как уменьшить расстояние между подпунктами в выпадающем меню?   #4
Вот html код:
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
<ul id="menu">
              <li> <a href="#"><img src="http://chuikov.net/77777777777777777.png" alt="" width="38" height="34" class="leftimg1"/>Начинающим</a>
                <ul>
                  <li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
                  <li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
                  <li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
                  <li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
                  <li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
                </ul>
              </li>
            </ul>
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 147
24.03.2014, 21:51     Как уменьшить расстояние между подпунктами в выпадающем меню?   #5
Для второго ul создайте какой либо класс, и в css напишите что я вам отправил постом ранее!
AdAgent
Объявления
24.03.2014, 21:51     Как уменьшить расстояние между подпунктами в выпадающем меню?
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 14
24.03.2014, 21:53  [ТС]     Как уменьшить расстояние между подпунктами в выпадающем меню?   #6
Олег126, А куда вставить нужно эту строчки нужно? Вставил в стиль #menu li ul li не помогло....
logicface
Новичок
2 / 2 / 0
Регистрация: 13.06.2013
Сообщений: 35
24.03.2014, 21:58     Как уменьшить расстояние между подпунктами в выпадающем меню?   #7
Я плохо понял какое расстояние и между чем больше, если межу родительским Ul и дочерним то установите дочернему top:0
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 147
24.03.2014, 22:07     Как уменьшить расстояние между подпунктами в выпадающем меню?   #8
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
<ul id="menu">
<li> <a href="#"><img src="http://chuikov.net/77777777777777777.png" alt="" width="38" height="34" class="leftimg1"/>Начинающим</a>
<ul class="podmenu">
<li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
<li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
<li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
<li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
<li><img src="http://chuikov.net/11111111.jpg" alt="" width="6" height="6" class="leftimg5"/><a href="#">Контекстная реклама </a></li>
</ul>
</li>
</ul>
Код CSS
1
2
3
.podmenu ul li a{
font: 15px/20px Arial;
}

Вот что то типа этого должно получиться!

Добавлено через 29 секунд
Цитата Сообщение от PetrC Посмотреть сообщение
Олег126, А куда вставить нужно эту строчки нужно? Вставил в стиль #menu li ul li не помогло....
Вот так вообще нельзя делать!
logicface
Новичок
2 / 2 / 0
Регистрация: 13.06.2013
Сообщений: 35
24.03.2014, 22:15     Как уменьшить расстояние между подпунктами в выпадающем меню?   #9
Попробуйте сделать так:
Код CSS
1
2
3
4
5
6
7
8
.menu li a {
height:15px;
margin:0;
padding:0;
}
.menu li ul li {
height:15px;
}
Только не удаляйте то, что уже есть в значениях тез параметров.=)
jwoordla
Новичок
0 / 0 / 1
Регистрация: 11.03.2014
Сообщений: 26
25.03.2014, 06:08     Как уменьшить расстояние между подпунктами в выпадающем меню?   #10
Сообщение было отмечено автором темы, экспертом или модератором как ответ
PetrC, попробуй использовать этот css:
Код 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#menu {
    padding:0;
    margin:0;
    font-size:100%;
    font-family:Georgia;
}
#menu li {
    float:left;
    padding:0;
    margin:0;
    width:150px;
    text-align:left;
    position:relative;
    font-size:105%;
}
#menu li {
    height:20px;
    line-height:20px;
    position:relative;
}
#menu > li {
    background-color:#007EDF;
    height:45px;
    line-height:45px;
    width:160px;
}
#menu li ul {
    height:30px;
    padding:0;
    margin:0;
    width:150px;
    display:none;
    position:absolute;
    left:0;
    top:45px;
}
#menu li ul li {
    background-color:#0590fa;
    height:30px;
    line-height:30px;
    margin:0;
    width:270px;
}
#menu li ul li:hover {
    background-color:#cde;
}
#menu li a {
    color:#fff;
    display:inline-block;
    height:25px;
    line-height:25px;
    text-decoration:none;
    width:250px;
}
#menu > li > a {
    width:160px;
}
#menu ul li img {
    bottom:0;
    left:8px;
    margin:auto;
    position:absolute;
    top:0;
}
#menu ul li a {
    background-color:#0590fa;
    left:20px;
    position:absolute;
}
#menu ul li:hover a {
    background-color:#cde;
}
#menu li:hover ul, #menu li.jshover ul {
    display:inline-block;
}
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.03.2014, 11:32     Как уменьшить расстояние между подпунктами в выпадающем меню?
Еще ссылки по теме:

HTML, CSS Как уменьшить отступ от border таблицы до ячеек, если у ячеек есть расстояние между ними?
HTML, CSS Уменьшить расстояние между двумя DIV
HTML, CSS Не могу закрепить текстовый слой к странице и уменьшить расстояние между строк
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 14
25.03.2014, 11:32  [ТС]     Как уменьшить расстояние между подпунктами в выпадающем меню?   #11
Всем спасибо, аккуратнее всего получился вариант jwoordla.
Yandex
Объявления
25.03.2014, 11:32     Как уменьшить расстояние между подпунктами в выпадающем меню?
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Опции темы

Текущее время: 20:04. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Яндекс.Метрика