Форум программистов, компьютерный форум CyberForum.ru

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 9, средняя оценка - 4.89
PetrC
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 38
#1

Как уменьшить расстояние между подпунктами в выпадающем меню? - HTML, CSS

24.03.2014, 16:21. Просмотров 1180. Ответов 10
Метки нет (Все метки)

Здравствуйте.
Имеется выпадающее меню, но расстояние между элементами подпунктов слишком большие, подскажите пожалуйста, как уменьшить эти расстояния.
Вот стили:

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)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.03.2014, 16:21     Как уменьшить расстояние между подпунктами в выпадающем меню?
Посмотрите здесь:
Как убрать щели между вертикальными подпунктами меню? HTML, CSS
Как уменьшить расстояние Между блоками? HTML, CSS
HTML, CSS Как уменьшить расстояние между картинками? Padding не работает
HTML, CSS уменьшить расстояние между h1 и таблицей!
HTML, CSS Уменьшить расстояние между двумя DIV
HTML, CSS Как уменьшить отступ от border таблицы до ячеек, если у ячеек есть расстояние между ними?
HTML, CSS Уменьшить расстояние между буквами в строке, дробные отрицательные значения
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Mr Coder
357 / 357 / 77
Регистрация: 04.04.2013
Сообщений: 1,516
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
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
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
Сообщений: 38
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
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
24.03.2014, 21:51     Как уменьшить расстояние между подпунктами в выпадающем меню? #5
Для второго ul создайте какой либо класс, и в css напишите что я вам отправил постом ранее!
PetrC
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 38
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
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
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;
}
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2014, 11:32     Как уменьшить расстояние между подпунктами в выпадающем меню?
Еще ссылки по теме:
HTML, CSS Как убрать расстояние между основным меню и выпадающими из него пунктами?
Не могу закрепить текстовый слой к странице и уменьшить расстояние между строк HTML, CSS
HTML, CSS Расстояние между пунктами меню
HTML, CSS Горизонтальное меню, расстояние между границами
HTML, CSS увеличиное расстояние между строк меню

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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru