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

HTML, CSS

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

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

24.03.2014, 16:21. Просмотров 1237. Ответов 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;
    }
Во вложении приложил картинку, как это выглядит. Нужно, чтобы расстояние между пунктами контекстная реклама было меньше.

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

Как убрать щели между вертикальными подпунктами меню? - HTML, CSS
Есть сайт: http://www.mojweb.org/celplast/ Между выпадающими подпунктами меню в левой колонке щели между некоторыми пунктами, и левая...

Как уменьшить расстояние Между блоками? - HTML, CSS
Добрый вечер. Как начинающий верстальщик,хочу обратиться к умным людям. Помогите убрать расстояние,начиная с 4 блока. <html> <head>...

Как уменьшить расстояние между картинками? Padding не работает - HTML, CSS
HTML <p class="thumb" id="kek"> <a href="mejkom_dveri.html"><img src="http://www.cyberforum.ru/images/1%20(1).jpeg"...

уменьшить расстояние между h1 и таблицей! - HTML, CSS
в ие9 например это расстояние становится просто критичным!!!!!! смотреть рисунок!!! как его уменьшить???

Уменьшить расстояние между двумя DIV - HTML, CSS
Здравствуйте профессионалы веб программирования, И снова обращяюсь к вам за помощью, подскажите как уменьшить расстояние между <div...

Как уменьшить отступ от border таблицы до ячеек, если у ячеек есть расстояние между ними? - HTML, CSS
В общем, есть таблица у которой есть border, так же есть расстояние между ячеек border-spacing, дак вот, как уменьшить отступ от border до...

10
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,556
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;
    }
0
Олег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 , а значение через дробь это межстрочное расстояние. Введите ваши значения туда и должно все получиться!
0
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>
0
Олег126
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
24.03.2014, 21:51 #5
Для второго ul создайте какой либо класс, и в css напишите что я вам отправил постом ранее!
0
PetrC
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 38
24.03.2014, 21:53  [ТС] #6
Олег126, А куда вставить нужно эту строчки нужно? Вставил в стиль #menu li ul li не помогло....
0
logicface
2 / 2 / 0
Регистрация: 13.06.2013
Сообщений: 35
24.03.2014, 21:58 #7
Я плохо понял какое расстояние и между чем больше, если межу родительским Ul и дочерним то установите дочернему top:0
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 не помогло....
Вот так вообще нельзя делать!
0
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;
}
Только не удаляйте то, что уже есть в значениях тез параметров.=)
0
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;
}
0
PetrC
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 38
25.03.2014, 11:32  [ТС] #11
Всем спасибо, аккуратнее всего получился вариант jwoordla.
0
25.03.2014, 11:32
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2014, 11:32
Привет! Вот еще темы с ответами:

Уменьшить расстояние между буквами в строке, дробные отрицательные значения - HTML, CSS
Как уменьшить расстояние между буквами в строке, т.е. сделать letter-spacing меньше 0, к примеру - 0.5? Пробовал ставить отрицательные...

Как убрать расстояние между основным меню и выпадающими из него пунктами? - HTML, CSS
Как убрать расстояние : http://s019.***********/i639/1304/05/605c9c3f9f5b.png При наведении на пункт меню выпадают под пункты , но между...

Не могу закрепить текстовый слой к странице и уменьшить расстояние между строк - HTML, CSS
Народ хелп! Работаю в dreamweaver. Сделал второй слой с текстом, который в программе позиционируется как надо (в css), а при экспорте...

Расстояние между пунктами меню - HTML, CSS
Как сделать разное расстояние между пунктами меню? типо 1--2------3--4.


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

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