Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
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
Mr Coder
_._
287 / 287 / 50
Регистрация: 04.04.2013
Сообщений: 1,174
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
Сообщений: 138
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
Сообщений: 9
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
Сообщений: 138
24.03.2014, 21:51
  #5
Для второго ul создайте какой либо класс, и в css напишите что я вам отправил постом ранее!
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
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
Сообщений: 138
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;
}
PetrC
Новичок
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 9
25.03.2014, 11:32  [ТС]     Как уменьшить расстояние между подпунктами в выпадающем меню?
  #11
Всем спасибо, аккуратнее всего получился вариант jwoordla.
Yandex
Объявления
25.03.2014, 11:32
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Ответов Автор Дата
HTML, CSS Уменьшить расстояние между двумя DIV
Здравствуйте профессионалы веб программирования, И снова обращяюсь к вам за помощью, подскажите как уменьшить расстояние между <div id= "menu"> и <div id="header"> Теоретически это свойство...
HTML, CSS 6 tatbud Вчера 20:19
HTML, CSS Как уменьшить отступ от border таблицы до ячеек, если у ячеек есть расстояние между ними?
В общем, есть таблица у которой есть border, так же есть расстояние между ячеек border-spacing, дак вот, как уменьшить отступ от border до ячейки и при этом оставить расстояние между ячеек? ...
HTML, CSS 7 SotGE 13.08.2013 11:28
HTML, CSS Уменьшить расстояние между буквами в строке, дробные отрицательные значения
Как уменьшить расстояние между буквами в строке, т.е. сделать letter-spacing меньше 0, к примеру - 0.5? Пробовал ставить отрицательные дробные значения, их понял только firefox, opera с chrome не...
HTML, CSS 4 Mailo 08.07.2013 11:24
HTML, CSS Расстояние между пунктами меню
Как сделать разное расстояние между пунктами меню? типо 1--2------3--4.
HTML, CSS 5 Kovy 16.04.2013 01:01
HTML, CSS Как убрать расстояние между основным меню и выпадающими из него пунктами?
Как убрать расстояние : http://s019.radikal.ru/i639/1304/05/605c9c3f9f5b.png При наведении на пункт меню выпадают под пункты , но между ними расстояние , и трудно перейти с 1 уровня меню на 2 ой ,...
HTML, CSS 7 opium95 16.04.2013 00:16
HTML, CSS уменьшить расстояние между h1 и таблицей!
в ие9 например это расстояние становится просто критичным!!!!!! смотреть рисунок!!! как его уменьшить???
HTML, CSS 5 Sergio Aguero 30.11.2012 12:26
HTML, CSS как убрать ссылку и добавить картинки в выпадающем меню
вообщем хочу сделать выпадающее меню,но вот проблема в том,что не знаю как отключить ссылку с пункта перехода в меню (слова фильмы, музыка, игры- вот с них убрать) и ещё.... можно ли как-то добавить...
HTML, CSS 13 Veygon 22.07.2012 20:36
HTML, CSS увеличиное расстояние между строк меню
Здравствуйте! Я тут новенькая и очень надеюсь на помощь умных людей. Есть сайт http://www.icavresearch.org/ , в IE7 и ниже, расстояние между строками вертикального меню сильно увеличено. ...
HTML, CSS 2 karinakro 25.01.2010 07:15
Опции темы

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