Заполнить всю страницу блоком

@Hi4ko · Регистрация: 21.10.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте,
Не нравится мне, что все блоки не могут занять всю ширину страницы. Особенно это видно в меню и блоке с белым фоном. Как мне это исправить?

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ООО СОЯР бурсервис</title>
  <link rel="stylesheet" href="style.css" />
  <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]-->
</head>
<body>
    <div id="header">
        <div>
        <a href="index.html"><img id="pic" src="logo.png" alt="ООО СОЯР бурсервис"></a>
        <a href="contacts.html"><img id="name" src="phones.png" alt="Контакты"></a> 
        </div>
    <div id="navbar">
                <ul id="menu">
                    <li><a href="index.html">Главная страница</a></li>
                    <li><a href="contacts.html">Контакты</a></li>
                    <li>
                        <a href="pricelist.html">Цены</a>
                    </li>
                    <li><a href="vacations.html">Вакансии</a>
                        <ul>
                            <li><a href="#">Буровик</a></li>
                        </ul>
                    </li>
                    <li><a href="about.html">О компании</a></li>
                </ul>
        </div>  
    </div>
        
    <div class="txt">
        <p>Компания «Сояр Бурсервис» бурит скважины на воду в Екатеринбурге и Свердловской области.</p>
        <ul>
            <li>Бурение скважин на воду</li>
            <li>Бесплатный выезд специалиста</li>
            <li>бесплатный выезд специалиста</li>
            <li>метр бурения от 900 рублей</li>
            <li>гарантия на работу 5 лет,послегарантийное обслуживание.</li>
            <li>круглогодичное бурение</li>
            <li>скважина "под ключ"</li>
            <li>паспорт скважины</li>
        </ul>
    </div>
        <div id="footer">
        <table width=100%>
        <tr>
            <td>
                ©ООО СОЯР бурсервис. 2013
            </td>
            <td>
                <a href="index.html"><img id="pic" src="logo.png"  alt="ООО СОЯР бурсервис"></a>
            </td>
            <td>  
                Тел: +79028797737; <br /><br /> 
                Тел: +79193847015; <br /><br />
                Тел: +79126362578; <br /><br /> 
                <a href="mailto:oleg.yaparov@ya.ru" id="mail"><p>oleg.yaparov@ya.ru</p></a>
            </td>
        </tr>
        </table>
    </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
body{
    background:#00a6ff;
}
#mail{
    text-decoration:none;
    color: #ffffff;
}
#mail:hover{
    font-weight:bold;
}
#email:hover{
    font-weight:bold;
}
#header{
    width:100%;
position:relative;
backdround:#00a6ff;
}
#name{
    float:right;
    margin-right: 5px;
    font-size: 70px;
    font-family: Impact, "Charcoal CY", sans-serif;
    color: #000;
}
#pic{
clear:both;
}
#navbar{
    z-index:1;
    position:relative;
    float:left;
    width:100%;
    background-image: linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.55, #FFFFFF),
    color-stop(1, #00A6FF)
);
    height:43px;
}
#menu{
    margin:0px;
    width=100%;
        background-image: linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.55, #FFFFFF),
    color-stop(1, #00A6FF)
);
    list-style:none; 
    position:relative;
    display:inline-table;
}
#menu ul{
    display:none;
    list-style:none;
}
#menu li{
    float:left;
}
#menu li:hover{
            background-image: linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.55, #FFFFFF),
    color-stop(1, #00A6FF)
);
 
}
#menu li a{
    font-family: "Helvetica CY", "Nimbus Sans L" sans-serif;
    display:block;
    padding:10px 15px;
    color:#ff0000;
    text-decoration:none;
    }
#menu li a:hover{
    font-weight:bold;
}
    
#menu ul{
    background-image: linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 55%, #00A6FF 100%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.55, #FFFFFF),
    color-stop(1, #00A6FF)
);
    border-radius:0px;
    padding:0px;
    position: absolute;
    top: 100%;
}
#menu li:hover > ul{
    display:block;
}
#menu ul li{
    float:none;
}
.txt{
position:relative;
background:#ffffff;
/*background-image: linear-gradient(bottom, rgb(255,255,255) 40%, rgb(0,166,255) 70%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 40%, rgb(0,166,255) 70%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 40%, rgb(0,166,255) 70%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 40%, rgb(0,166,255) 70%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 40%, rgb(0,166,255) 70%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.4, rgb(255,255,255)),
    color-stop(0.7, rgb(0,166,255))
); */
    width:100%;
    font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
    font-size: 16px;
}
#footer{
position:relative;
padding-top: 50px;
padding-bottom: 50px;
/*background-image: linear-gradient(bottom, rgb(0,166,255) 40%, rgb(255,255,255) 70%);
background-image: -o-linear-gradient(bottom, rgb(0,166,255) 40%, rgb(255,255,255) 70%);
background-image: -moz-linear-gradient(bottom, rgb(0,166,255) 40%, rgb(255,255,255) 70%);
background-image: -webkit-linear-gradient(bottom, rgb(0,166,255) 40%, rgb(255,255,255) 70%);
background-image: -ms-linear-gradient(bottom, rgb(0,166,255) 40%, rgb(255,255,255) 70%);
 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.4, rgb(0,166,255)),
    color-stop(0.7, rgb(255,255,255))
);*/
    background:#00a6ff;
    margin-top:-16px;
    font-size: 12px;
    font-family: "Trebuchet MS", "Helvetica CY", sans-serif;
    color:#ffffff;
}
#footer img{
    opacity:0.5;
}
#footer td{
    float:left;
}

@Academik · 31.07.2013, 16:45

Попробуйте в body добавить:

CSS
1
2
3
4
5
body{
    background:#00a6ff;
    margin: 0;
    padding: 0;
}

@Hi4ko · 31.07.2013, 16:47 **[ТС]**

сработало, спасибо)

@Taatshi · 03.08.2013, 19:16

Hi4ko, почитайте про сбросы стилей - избавите себя от массы проблем в будущем

@carambaman · 03.08.2013, 20:25

Сообщение от 35cm

Попробуйте в body добавить:

CSS
1
2
3
4
5
body{
    background:#00a6ff;
    margin: 0;
    padding: 0;
}

рекомендую даже сделать вот так

CSS
1
*{margin: 0; padding 0;}

это позволит сбросить отступы не только у боди, а и у всех тегов на странице. По скольку если вам известно, по умолчанию у очень многих тегов уже есть свой margin и padding. К примеру добавив <p> вы можете увидеть что у вас есть паддниг. И это происходит с многими тегами.

Еще смотря на верстку, советую тегам давать не id а class, поскольку в будущем когда возможно будете ставить скрипты, в скрипт может быть уже прописан какой-то id который у вас просто где-то использовался в верстке, и будет конфликт, и вы будете думать еще и над тем почему он не работает

@Academik · 03.08.2013, 20:26

Отступы у абзацев вам не нужны что ли?

@carambaman · 03.08.2013, 20:43

иногда нет, иногда да, это уже в css проставляется.

@Academik · 05.08.2013, 14:18

Сообщение от carambaman

иногда нет, иногда да

Ну зачем же тогда советовать такое. Я вот например не обнуляю никогда отступы у абзацев и другим не советую этого делать.

@carambaman · 05.08.2013, 14:22

тут насколько я знаю идет речь а margin и padding, и если я вас правильно понял, то абзац это первый отступ табом в предложении. А вот как вы мне интересно сделаете его при помощи margin и padding? их нужно всегда ресетить. Поскольку как правило, ну если вы конечно верстальщик вообще, пишутся каждому свой margin и padding. Если мне не верите, могу показать верстку в которой нет сброса margin и padding и в которой есть, и вы поймете разницу...

@Academik · 05.08.2013, 15:19

Сообщение от carambaman

то абзац это первый отступ табом в предложении

Нет, у тега <p> есть вертикальные отступы, я про них говорю.

@carambaman · 05.08.2013, 18:25

так а толку вам с тех отступов, покажите хоть один макет, в котором дизайнер учел эти отступы. И если например не нужен этот отступ, то вы же его отключаете.
И вы же учитывайте, и тот момент что на верстке не заканчивается, и далее будет натяжка на цмс, попробуйте сейчас зайти на любой сайт, и отключить сброс стилей, и вы увидите что все полезло хто куда. И...даже...если вы откроете урок по сбросу стилей, то там это тоже описано, что первым делом для всех элементов сбрасываем маржины и падинги

@Lovrentiy · 05.08.2013, 19:27

общий сброс делается только в случае если всем элементам будет дан стиль по умолчанию, а не только в конкретных случаях.

@Taatshi · 05.08.2013, 20:36

35cm, значения по умолчанию в разных браузерах могут отличаться. Будет разница в отображении.

Предпочитаю сбрасывать все и задавать явно.

@carambaman · 05.08.2013, 20:44

Taatshi поддерживаю)) как я сразу не вспомнил про это

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Hi4ko 74 / 74 / 13 Регистрация: 21.10.2010 Сообщений: 376
	31.07.2013, 16:47 [ТС]
	сработало, спасибо) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	03.08.2013, 19:16
	Hi4ko, почитайте про сбросы стилей - избавите себя от массы проблем в будущем 1

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	03.08.2013, 20:26
	Отступы у абзацев вам не нужны что ли? 0

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	03.08.2013, 20:43
	иногда нет, иногда да, это уже в css проставляется. 0

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	05.08.2013, 14:22
	тут насколько я знаю идет речь а margin и padding, и если я вас правильно понял, то абзац это первый отступ табом в предложении. А вот как вы мне интересно сделаете его при помощи margin и padding? их нужно всегда ресетить. Поскольку как правило, ну если вы конечно верстальщик вообще, пишутся каждому свой margin и padding. Если мне не верите, могу показать верстку в которой нет сброса margin и padding и в которой есть, и вы поймете разницу... 0

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	05.08.2013, 18:25
	так а толку вам с тех отступов, покажите хоть один макет, в котором дизайнер учел эти отступы. И если например не нужен этот отступ, то вы же его отключаете. И вы же учитывайте, и тот момент что на верстке не заканчивается, и далее будет натяжка на цмс, попробуйте сейчас зайти на любой сайт, и отключить сброс стилей, и вы увидите что все полезло хто куда. И...даже...если вы откроете урок по сбросу стилей, то там это тоже описано, что первым делом для всех элементов сбрасываем маржины и падинги 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	05.08.2013, 19:27
	общий сброс делается только в случае если всем элементам будет дан стиль по умолчанию, а не только в конкретных случаях. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	05.08.2013, 20:36
	35cm, значения по умолчанию в разных браузерах могут отличаться. Будет разница в отображении. Предпочитаю сбрасывать все и задавать явно. 1

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	05.08.2013, 20:44
	Taatshi поддерживаю)) как я сразу не вспомнил про это 0