Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7

Как увеличить пространство ul

14.11.2015, 22:55. Показов 2584. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите: есть три пункта горизонтального меню, которые должны располагаться посередине (я для этого прописала margin), у списка сейчас нет пространства слева, оно нужно для того, чтобы фоновое изображение выпадающего меню не срезалось.
Пунктам списка (основного) указано display: inline;
Какие есть варианты?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
14.11.2015, 22:55
Ответы с готовыми решениями:

Увеличить пространство между горизонтальными блоками
Уважаемые! На сайте подключен бутстрап, подскажите как разделить горизонтальные блоки,а то слиплись верхний с нижним, <div...

Как увеличить рабочее пространство формы по вертикали
Нехватает места для увеличения рабочего пространства ну гдето пикселей 400 ,как это пространство можно раширить? Добавлено через 57...

Как увеличить свободное пространство за счет другого винчестера
Добрый день! ОС - вин 8.1, имеется винт на 60 Гб, поставил второй винт на 500 Гб, необходимо, всё свободное пространство с нового винта...

11
В поисках себя
 Аватар для Glart
115 / 89 / 34
Регистрация: 12.11.2015
Сообщений: 529
14.11.2015, 23:01
Цитата Сообщение от di17 Посмотреть сообщение
Какие есть варианты?
Какие есть коды?
0
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
15.11.2015, 11:40  [ТС]
HTML5
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
<div class = "topmenu">
       <ul class = "menu">
        <li><a href = "#">Пункт1</a>
         <ul class = "dropdown m1">
         <div class = "dl1">
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>     
         </div>
         </ul>
        </li>
        <li><a name = "#">Пункт2</a>
         <ul class = "dropdown m2">
         <div class = "dl2">
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
         </div>
         </ul>
        </li>
        <li><a href = "#">Пункт3</a></li>
      </ul>
</div>
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
76
77
78
79
80
81
82
83
84
85
/* Главное меню */
 
.topmenu {
 height: 45px;
 background: url(topmenu1.png);
 position: relative;
}
 
.topmenu>ul {
 margin-left: 300px;
}
 
.topmenu>ul>li {
 display: inline;
}
 
.topmenu>ul>li>a {
 line-height: 46px;
}
 
.topmenu a {
 line-height: 83px;
 font: 17px Arial, Helvetica, sans-serif;
}
 
.menu>li {
 padding: 20px;
}
 
.topmenu li {
 cursor: pointer;
}
 
/* Выпадающее меню */
 
.menu>li:hover ul.dropdown {
 display: block;
}
 
.menu ul.dropdown a {
 display: block;
 padding: 5px;
}
 
ul.dropdown {
 padding: 0;
 display: none;
 position: absolute;
 margin-top: 5px;
 width: 300px;
}
 
.m1 {
 background: url(dmenu.png) no-repeat;
 background-position: -60% 0%;
 height: 180px;
}
 
.m1 li {
 display: inline-block;
}
 
.dl1 {
 margin-left: -15px;
 margin-top: 23px;
}
 
.m2 {
 background: url(dmenu.png) no-repeat;
 background-position: 50% 0%;
 height: 150px;
}
 
.dl2 {
 margin-left: 115px;
 margin-top: 21px;
}
 
ul {
 list-style-type: none;
}
 
a {
 text-decoration: none;
}
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
15.11.2015, 11:57
di17, а так к примеру? Ширину отрегулируйте, если новые пункты будете добавлять...
Кликните здесь для просмотра всего текста
HTML5
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
/* Главное меню */
 html,body{width:100%; height:100%; margin:0}
.topmenu {
 height: 45px;
 background: url(topmenu1.png);
 position: relative;
}
 
.topmenu>ul {
width:21%;
 margin: 0 auto;
}
 
.topmenu>ul>li {
 display: inline;
}
 
.topmenu>ul>li>a {
 line-height: 46px;
}
 
.topmenu a {
 line-height: 83px;
 font: 17px Arial, Helvetica, sans-serif;
}
 
.menu>li {
 padding: 20px;
}
 
.topmenu li {
 cursor: pointer;
}
 
/* Выпадающее меню */
 
.menu>li:hover ul.dropdown {
 display: block;
}
 
.menu ul.dropdown a {
 display: block;
 padding: 5px;
}
 
ul.dropdown {
 padding: 0;
 display: none;
 position: absolute;
 margin-top: 5px;
 width: 300px;
}
 
.m1 {
 background: url(dmenu.png) no-repeat;
 background-position: -60% 0%;
 height: 180px;
}
 
.m1 li {
 display: inline-block;
}
 
.dl1 {
 margin-left: -15px;
 margin-top: 23px;
}
 
.m2 {
 background: url(dmenu.png) no-repeat;
 background-position: 50% 0%;
 height: 150px;
}
 
.dl2 {
 margin: 115px;
 margin-top: 21px;
}
 
ul {
 list-style-type: none;
} </style>
</head>
 
<body>
<div class = "topmenu">
       <ul class = "menu">
        <li><a href = "#">Пункт1</a>
         <ul class = "dropdown m1">
         <div class = "dl1">
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li><br/>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>   
         </div>
         </ul>
        </li>
        <li><a name = "#">Пункт2</a>
         <ul class = "dropdown m2">
         <div class = "dl2">
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
          <li><a href = "#">Ссылка</a></li>
         </div>
         </ul>
        </li>
        <li><a href = "#">Пункт3</a></li>
      </ul>
</div>
</body>
</html>
0
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
15.11.2015, 17:25  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
di17, а так к примеру? Ширину отрегулируйте, если новые пункты будете добавлять...
Нет, это не то. width: 21% - мало пространства, если увеличивать процент - пространства слева не добавляется. Посередине меню не становится, да мне и не нужно чтобы оно было точно посередине - там есть нюансы.
Я пробовала прописать text-align: center, пространство растянулось почти по всему диву, но выпадающий список появлялся с краю и переместить его можно было только до границы начала основного меню, дальше изображение срезается.

Добавлено через 1 минуту
Дополнение:

Содержимое сайта находится в диве
CSS
1
2
3
4
#main {
 width: 1020px;
 margin: 0 auto;
}
Див .topmenu имеет ширину 1020px.

Ниже него находится див
CSS
1
2
3
.content {
 overflow: hidden;
}
в котором есть два изображения наподобие бордера, расположенные по бокам; им прописан float (left, right), position: relative. И два изображения (float (left, right), width: 70px, margin-top: 185px) по бокам дива с текстом (width: 500px, height: 500px).
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
15.11.2015, 17:57
Цитата Сообщение от di17 Посмотреть сообщение
Нет, это не то.
Я предложил вариант на скорую руку... Очень тяжело себе представить, как выглядит Ваша страница только по описанию... Если можно выложите код странички с контентом или дайте ссылку на ресурс, где можно посмотреть, что у Вас получается и максимально точно переформулируйте вопрос что именно Вы хотите получить, чтобы я мог Вам помочь...
0
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
15.11.2015, 18:17  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
Я предложил вариант на скорую руку... Очень тяжело себе представить, как выглядит Ваша страница только по описанию... Если можно выложите код странички с контентом или дайте ссылку на ресурс, где можно посмотреть, что у Вас получается и максимально точно переформулируйте вопрос что именно Вы хотите получить, чтобы я мог Вам помочь...
Мне нужно чтобы background выпадающего меню (в первом пункте основного меню) не срезался при смещении влево. Список перемещается без проблем, дело только в изображении.
0
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
15.11.2015, 19:26  [ТС]
Fedor92,
Вот то, что нужно для представления о происходящем
Вложения
Тип файла: rar site.rar (9.9 Кб, 5 просмотров)
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
15.11.2015, 20:33
di17, вот что получается в контексте того кода который Вы предоставили: site.rar Но я бы предложил Вам переделать код, если Вы страничку планируете выложить в Интернет... Ну а если просто изучаете свойства и тренируетесь можете не обращать внимания на мои придирки...
1
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
16.11.2015, 14:43  [ТС]
Fedor92,
Спасибо за избавление от мучений. Изучаю и тренируюсь.

Добавлено через 2 минуты
Цитата Сообщение от Fedor92 Посмотреть сообщение
вот что получается в контексте того кода который Вы предоставили: site.rar Но я бы предложил Вам переделать код, если Вы страничку планируете выложить в Интернет... Ну а если просто изучаете свойства и тренируетесь можете не обращать внимания на мои придирки...
А как сделать, чтобы выпадающий список появлялся посередине относительно пункта, в котором он расположен? Я поместила li в див, чтобы разместить список как мне нужно, но так, наверное, не делается.
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
16.11.2015, 15:09
Цитата Сообщение от di17 Посмотреть сообщение
Я поместила li в див, чтобы разместить список как мне нужно, но так, наверное, не делается.
Да так не делается Вы верно подметили... Вот Вам новый вариантик: site.rar Новые стили внизу файла css...
1
0 / 0 / 0
Регистрация: 14.11.2015
Сообщений: 7
16.11.2015, 15:28  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
Да так не делается Вы верно подметили... Вот Вам новый вариантик: site.rar Новые стили внизу файла css...
Спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.11.2015, 15:28
Помогаю со студенческими работами здесь

Увеличить дисковое пространство за счёт другого диска
Такая ситуация. В каталоге пользователя заканчивается свободное место. Есть винт (раздел создан, отформатирован, подсоединён, вижу его как...

Как удалить незанятое пространство?
Написал в раздел XP, поскольку сам пока сижу на ней. Увеличивал свободное пространство из-под доса Acronis DDS 10.0. От одного раздела...

Как убрать лишнее пространство
Приветствую вас. Подскажите пожалуйста, как убрать лишнее пространство отмеченное на картинке. Тема называется academica Спасибо ПС ...

Как убрать белое пространство?
Не могу убрать вот это белое пространство что справа под меню http://s005.***********/i209/1002/81/1a2af983751c.jpg Я вот думал...

Как заполнить пустое пространство?
Задача заключается в следующем. Как сделать, что бы точками было заполнено все пустое пространство между текстом слева и числовым...


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

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru