Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 26.07.2013
Сообщений: 20

Некорректное центрирование меню и отступ от футера!

15.10.2013, 03:28. Показов 1060. Ответов 3
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
1. Почему главное меню становится по центру только при применении margin-left: -40px; в данном случае.
2. Почему я не могу сделать внешний отступ от футера? margin: 10px 0px 10px; работает в мозиле, но в опере футер прибит к низу браузера - margin-bottom также не помогает.

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
122
123
124
125
126
127
128
129
130
131
132
133
134

    
<html>
<body>
        <div class="site">
            <div class="header"></div>
                <ul class="menu">
                    <li><a href="main.html">Главная</a></li>
                    <li><a href="">Прайсы</a></li>
                    <li><a href="">Аренда</a></li>
                    <li><a href="">Доставка</a></li>
                    <li><a href="">Бренды</a></li>
                    <li><a href="">Контакты</a></li>
                </ul>
            <div class="content">
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Блендеры, соковыжималки, миксеры, измельчители льда, термодиспенсеры.</span></div>
                        <img src="bar_equipment.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Барное оборудование</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Шейкеры, гейзеры, мадлеры, кулера, барные организаторы и т.д.</span></div>
                        <img src="bar_accessories.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Граниты, шоты, бокалы для вина и коньяка, маргаритки, мартинки и т.д.</span></div>
                        <img src="steklo_dlya_bara.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text"></span></div>
                        <img src="farfor.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text"></span></div>
                        <img src="farfor.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Чашки для кофе и чая с блюдцами, чайники, подносы пластиковые</span></div>
                        <img src="cups.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Ложки, вилки, ножи</span></div>
                        <img src="stolovie_pribori.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Ведра для льда и шампанского, баранчики, стальные блюда</span></div>
                        <img src="furshet.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">У нас представлены льдогенераторы торговых марок BREMA и Hendy</span></div>
                        <img src="ldogeneratory.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Итальянские пароконвектоматы - Unox и Piron.</span></div>
                        <img src="parokonvektomaty.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Холодильные столы, барные станции, кофе станции, столешницы.</span></div>
                        <img src="nerzhaveika.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Холодильные шкафы, столы и морозильные ящики.</span></div>
                        <img src="holodilniki.jpg">
                    </div>
                    <span class="title_big"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Печи для пиццы, индукционные плиты, жарочные поверхности.</span></div>
                        <img src="kitchen.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Сковородки, сотейники, чафиндишы, гастроемкости, слайсеры и многое другое.</span></div>
                        <img src="kitchen2.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Большой выбор кофемашин и кофемолок из Европы.</span></div>
                        <img src="cofeemachines.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
                <div class="bar">
                    <div class="imgBlock">
                        <div id="shortText"><span id="text">Темперы, подставки под холдер, ведра для жмиха, набор бариста.</span></div>
                        <img src="coffe_accessories.jpg">
                    </div>
                    <span class="title"><a class="links" href="#">Категория</a></span>
                </div>
            </div>
            <div class="footer">
                <div class="copyright">© fdsfdsdfs</div>
                <div class="contacts">fdsfsd</div>
            </div>
        </div>
    </body>
</html>
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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #eaeaea;
    background: -moz-linear-gradient(top, #eaeaea 0%, #d8d8d8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#d8d8d8));
    background: -webkit-linear-gradient(top, #eaeaea 0%,#d8d8d8 100%);
    background: -o-linear-gradient(top, #eaeaea 0%,#d8d8d8 100%);
    background: -ms-linear-gradient(top, #eaeaea 0%,#d8d8d8 100%);
    background: linear-gradient(to bottom, #eaeaea 0%,#d8d8d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d8d8d8',GradientType=0 );
    background-attachment: fixed;
}
 
.site {
    width: 880px;
    min-height: 500px;
    margin: 0 auto;
    position: relative;
}
 
.header {
    width: 880px;
    height: 120px;
    background: url(header.jpg);
}
 
.menu {
    width: 880px;
    display: table;
    list-style: none;
    margin-left: -40px;
    margin-top: 2px;
    margin-bottom: 15px;
}
 
.menu li  {
    display: table-cell;
    text-align: center;
    border-left: 2px solid #e7e7e7;
    background: #52c1ea;
    background: -moz-linear-gradient(top, #52c1ea 0%, #52c1ea 50%, #11b0e0 51%, #11b0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#52c1ea), color-stop(50%,#52c1ea), color-stop(51%,#11b0e0), color-stop(100%,#11b0e0));
    background: -webkit-linear-gradient(top, #52c1ea 0%,#52c1ea 50%,#11b0e0 51%,#11b0e0 100%);
    background: -o-linear-gradient(top, #52c1ea 0%,#52c1ea 50%,#11b0e0 51%,#11b0e0 100%);
    background: -ms-linear-gradient(top, #52c1ea 0%,#52c1ea 50%,#11b0e0 51%,#11b0e0 100%);
    background: linear-gradient(to bottom, #52c1ea 0%,#52c1ea 50%,#11b0e0 51%,#11b0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52c1ea', endColorstr='#11b0e0',GradientType=0 );
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-bottom-left-radius: 7px;
    -o-border-bottom-left-radius: 7px;
    -webkit-bottom-right-radius: 7px;
    -moz-bottom-right-radius: 7px;
    -o-bottom-right-radius: 7px;
}
 
.menu li:first-child {
    border: none;
}
 
.menu li a {
    padding: 8px 35px 8px;
    display: block;
    font-family: Arial;
    font-size: 13px;
    color: white;
    text-decoration: none;
}
 
.menu li:hover {
    background: #e4f5fc;
    background: -moz-linear-gradient(top, #e4f5fc 0%, #aee4f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#aee4f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
    background: -webkit-linear-gradient(top, #e4f5fc 0%,#aee4f9 50%,#9fd8ef 51%,#2ab0ed 100%);
    background: -o-linear-gradient(top, #e4f5fc 0%,#aee4f9 50%,#9fd8ef 51%,#2ab0ed 100%);
    background: -ms-linear-gradient(top, #e4f5fc 0%,#aee4f9 50%,#9fd8ef 51%,#2ab0ed 100%);
    background: linear-gradient(to bottom, #e4f5fc 0%,#aee4f9 50%,#9fd8ef 51%,#2ab0ed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 );
}
 
.content {
    overflow: hidden;
    background-color: rgba(192,192,192,0.1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.4);
}
 
.bar{
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
}
 
.bar:hover #shortText{
    opacity: 0.9;
    background-color: white;
    bottom: 0px;
}
 
.imgBlock {
    width: 200px;
    height: 176px;
    position: relative;
    overflow: hidden;
}
 
#shortText{
    width: 190px;
    height: 50px;
    position: absolute;
    padding: 5px;
    opacity: 0;
    background: rgba(255,255,255,0.7);
    bottom: -50px;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
}
 
#text {
    display: block;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
}
 
.links {
    color: white;
    text-decoration: none;
}
 
.title {
    display: block;
    font-family: Arial;
    font-size: 17px;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    color: white;
    text-decoration: none;
    padding: 2px;
}
 
.title_big {
    display: block;
    font-family: Arial;
    font-size: 15.4px;
    text-align: left;
    background-color: rgba(0,0,0,0.6);
    color: white;
    text-decoration: none;
    padding: 2px;
}
 
.footer {
    width: 850px;
    height: 105px;
    background-color: rgba(255,255,255,0.5);
    margin: 10px 0px 10px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}
 
.copyright {
    float: left;
}
 
.contacts {
    text-align: right;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 15.10.2013, 03:28
Ответы с готовыми решениями:

Убрать отступ после футера
Не могу разобраться, от чего появляется расстояние после футера?(обозначено коричневой стрелкой) и еще вопрос,относящийся к красной...

Некорректное отображение на мобильных устройствах и пустой отступ справа
Доброго времени суток! Помогите решить проблему: сайт некорректно отображается на мобильных устройствах - номер телефона и и кнопка...

В меню с категориями отображается информация из футера
Здравствуйте! Вот есть тема шоппика для OpenCart, так получилось, что в меню с категориями, отображается информация из футера. Вот код...

3
 Аватар для natapro
9 / 9 / 0
Регистрация: 11.09.2013
Сообщений: 23
15.10.2013, 14:16
1). Сбросьте отступы и поля, заданные браузерами по умолчанию. Либо с помощью reset.css, либо
CSS
1

*{ padding: 0; margin: 0; }
Добавлено через 12 минут
2) В CSS у тега html исправьте height на min-height:
CSS
1
2
3
4
5

html {
    ...
    min-height: 100%;
    ...
}
Дополнительно: проверьте на валидность html и css, исправьте ошибки. Например, вместо id="shortText" требуется использовать class="shortText".
1
0 / 0 / 0
Регистрация: 26.07.2013
Сообщений: 20
16.10.2013, 17:31  [ТС]
спасибо за помощь, но вот касаемо первого - то у меня изначально были обнулены отступы в теге html

но вот когда прописал отдельно со * , то всё стало ок - в чем разница?

спасибо
0
 Аватар для natapro
9 / 9 / 0
Регистрация: 11.09.2013
Сообщений: 23
16.10.2013, 17:44
Про сброс стилей почитайте, например, здесь
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 16.10.2013, 17:44
Помогаю со студенческими работами здесь

Как задать выпадающему меню отступ от главного меню?
Добрый вечер, подскажите как задать выпадающему меню отступ от главного меню? Padding:10px - не работает! ...

Центрирование меню
Здравствуйте. Изучаю верстку. Вот споткнулся на одном моменте, не могу понять почему не центрируется менюшка. Подскажите пожалуйста где...

Центрирование верхнего меню
http://algosource.esy.es/. как заставить меню встать четко по центру?

Не работает центрирование ссылок в меню
Здравствуйте. Впервые с таким сталкиваюсь. Не работает центрирование ссылок в Навбаре. Имеется код: Это код самого меню. ...

Отступ между меню и выпадающим меню
Здравствуйте! Делаю меню и выпадающее меню. Если между меню и выпадающем меню сверху нет отступа, то все ок. Если же я добавляю...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru