Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
24.03.2014, 16:21   #1
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
Как уменьшить расстояние между подпунктами в выпадающем меню? / HTML, 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
#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)
24.03.2014, 16:21
AdAgent
Объявления
24.03.2014, 18:01   #2
Mr Coder
_._
286 / 286 / 49
Регистрация: 04.04.2013
Сообщений: 1,167
Как уменьшить расстояние между подпунктами в выпадающем меню?

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;
    }
Другие темы раздела
HTML, CSS Подскажите хороший конвертер шрифтов в веб-форматы
Здравствуйте. Подскажите пожалуйста хороший конвертер шрифтов. Очень нравится этот http://www.fontsquirrel.com/tools/webfont-generator , но у него есть такое понятие как черный список, поэтому конвертирует он не все, может подкинете идейку, а?
Фиксированная вёрстка HTML, CSS
Ребята подскажите какой технический подход использовать чтобы вёрстка не разьежалась ничего с ней не становилось при уменьшении увеличении размеров... http://function.vv.si, закинул небольшой кусок шапку. <body> <div class="header"> <div class="header-top"> <div class="container">...
24.03.2014, 21:28   #3
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 135
Как уменьшить расстояние между подпунктами в выпадающем меню?

Возможно поможет, могу предположить что у вас идет все так ul > li > a. Так вот в css можно для ссылок прописать font к примеру

Код CSS
1
font: 15px/20px Arial;
это значит что размер текста 15px , а значение через дробь это межстрочное расстояние. Введите ваши значения туда и должно все получиться!
24.03.2014, 21:49  [ТС]   #4
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
Как уменьшить расстояние между подпунктами в выпадающем меню?

Вот 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>
24.03.2014, 21:49
AdAgent
Объявления
24.03.2014, 21:51   #5
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 135
Как уменьшить расстояние между подпунктами в выпадающем меню?

Для второго ul создайте какой либо класс, и в css напишите что я вам отправил постом ранее!
24.03.2014, 21:53  [ТС]   #6
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
Как уменьшить расстояние между подпунктами в выпадающем меню?

Олег126, А куда вставить нужно эту строчки нужно? Вставил в стиль #menu li ul li не помогло....
24.03.2014, 21:58   #7
logicface
Новичок
2 / 2 / 0
Регистрация: 13.06.2013
Сообщений: 35
Как уменьшить расстояние между подпунктами в выпадающем меню?

Я плохо понял какое расстояние и между чем больше, если межу родительским Ul и дочерним то установите дочернему top:0
24.03.2014, 22:07   #8
Олег126
Форумчанин
43 / 43 / 3
Регистрация: 21.03.2013
Сообщений: 135
Как уменьшить расстояние между подпунктами в выпадающем меню?

Код 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 не помогло....
Вот так вообще нельзя делать!
24.03.2014, 22:15   #9
logicface
Новичок
2 / 2 / 0
Регистрация: 13.06.2013
Сообщений: 35
Как уменьшить расстояние между подпунктами в выпадающем меню?

Попробуйте сделать так:
Код CSS
1
2
3
4
5
6
7
8
.menu li a {
height:15px;
margin:0;
padding:0;
}
.menu li ul li {
height:15px;
}
Только не удаляйте то, что уже есть в значениях тез параметров.=)
25.03.2014, 06:08   #10
jwoordla
Новичок
0 / 0 / 1
Регистрация: 11.03.2014
Сообщений: 26
Как уменьшить расстояние между подпунктами в выпадающем меню? / HTML, CSS

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;
}
25.03.2014, 06:08
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
WordPress Уменьшить расстояние между лого и контентом
Помогите, кто знает как уменьшить это расстояние между лого и контентом? Загружайте изображения и файлы на форум и прикрепляйте к сообщению. Обновленная Памятка «Как работать в редакторе сообщений»
WordPress Bergs 22.06.2014 17:24
Turbo Pascal уменьшить расстояние между центрами окружностей
Попробуйте уменьшить расстояние между центрами окружностей, не изменяя их радиуса, нарисовав их плотнее, чтобы они пересекались, еще плотнее, пока они не образуют “трубу”.
Turbo Pascal Дмитрий7777777 28.06.2013 12:04
HTML, CSS уменьшить расстояние между h1 и таблицей!
в ие9 например это расстояние становится просто критичным!!!!!! смотреть рисунок!!! как его уменьшить???
HTML, CSS Sergio Aguero 30.11.2012 12:26
Опции темы

Текущее время: 22:30. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.