Выравнивание блоков

@Svetlana_123 · Регистрация: 22.05.2015

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

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

вот код
http://jsfiddle.net/AEDnA/4/

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
 <!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
    <title>Вывоз мусора и снега бункерами 8м3 в Москве и Подмосковье</title>
</head>
<body>
    <div id="body">
    <div id="top">
         <div class="logo">
         <a href="index.html"><img src="http://dorsnab.net/assets/images/musor.jpg" /></a>
         </div>
         <div class="title_top"><h1>Вывоз мусора от компании<br>"ГлавМусор"</h1></div>
         <div class="top_phone">
            <p>Заключение договоров <h3><strong>8 (965) 223-98-46</strong></h3></p><br/>
            <p>Заказ, замена, постановка бункеров <h3><strong>8 (495) 648-648-1</strong></h3></p>
         </div>
    </div>
    <div class="content">
    <div class="menu">
        <table>
            <tr>
                <td><a href="index.html"><h5>ГЛАВНАЯ</h5></a></td>
                <td><a href="services.html"><h5>УСЛУГИ</h5></a></td>
                <td><a href="about.html"><h5>О КОМПАНИИ</h5></a></td>
                <td><a href="form.php"><h5>КОНТАКТЫ</h5></a></td>
            </tr>
        </table>
    </div>
        <div id="main_text">
        <p>Мы предлагаем качественный <strong>вывоз мусора</strong> контейнером 8 м<sup>3</sup> на заказ недорого, а также поможем вывезти строительный и крупногабаритный мусор в любом округе Москвы и ближайшего Подмосковья до 10-15 км.</p>
        <p>За долгие годы работы компания «Главмусор» зарекомендовала себя как успешная и динамично развивающаяся компания со своим парком автомобилей.</p>
        <p>Опытные сотрудники выполнят работу качественно и в срок.</p>
        <p>Предоставляем полный пакет документов с последующим оформлением.</p>
        <p>Активное строительство, собственное дело, офисные и торговые площадки производящие мусор - это наши клиенты.</p>
        <p>Помимо вывоза отходов строительного происхождения, мы занимаемся также вывозом крупногабаритного бытового мусора и уборкой снега.</p>
        </div>
    <div class="line"></div>
    <div class="block">
    <div class="first">
    <a href="service1.html"><div class="title">Вывоз мусора и отходов</div></a>
    <p>Вы обращаетесь по адресу, если вас интересует вывоз бытового твердого мусора, его утилизация и захоронение, а также вывоз и ликвидация различных отходов с рынков и торговых площадей, жилых домов и предприятий, поселков и любых других мест.</p>
    </div>
    <div class="second">
    <a href="service2.html"><div class="title">Строительный мусор</div></a>
    <p>Утилизация строительного мусора – задача сложная и трудоемкая, которая требует наличия специального разрешения, определенной техники и свободного времени. Если ваша компания не специализируется на переработке отходов, лучше доверить исполнение задачи профессионалам.</p>
    </div>
    <div class="third">
    <a href="service3.html"><div class="title">Крупногабаритный мусор</div></a>
    <p>Полный комплекс услуг по сбору, вывозу и утилизации КГМ. Крупногабаритный мусор (КГМ) – это отходы, размер которых превышает стандартный и не позволяет выбрасывать их в обычные контейнеры.</p>
    </div>
    <div class="fourth">
    <a href="service4.html"><div class="title">Вывоз снега</div></a>
    <p>Компания «Главмусор» осуществляет уборку и вывоз снега специализированным транспортом в специально отведенные места в соответствии с санитарными нормами и требованиями.</p>
    </div>
    <div class="fifth">
    <a href="service5.html"><div class="title">Контейнер для мусора</div></a>
    <p>В компании «Главмусор» вы подберете контейнер для мусора и для вывоза снега, который полностью соответствует вашим запросам. Если вы затрудняетесь с выбором контейнера, свяжитесь с менеджером и расскажите ему о своих задачах.</p>
    </div>
    <div class="six">
    <a href="service6.html"><div class="title">Погрузка-разгрузка</div></a>
    <p>Для  вывоза и утилизации мусора после ремонта наша компания может обеспечить ручную погрузку. Наши грузчики помогут обеспечить погрузку бытового и строительного мусора.</p>
    </div>
    <div class="seventh">
    <a href="service7.html"><div class="title">Бункеровозы</div></a>
    <p>Бункеровоз-мусоровоз предназначен для подъема с земли, установки на автомобиль и транспортировки специальных съемных платформ с различными видами груза. Автомобиль снабжен устройством для разгрузки платформы самосвальным способом. </p>
    </div>
    <div class="eighth">
    <a href="service8.html"><div class="title">Вывоз и утилизация ТБО</div></a>
    <p>Вывоз и утилизация ТБО (твердых бытовых отходов) – важный вопрос для любого домовладельца и руководителя предприятия. Накапливать отходы – значит, нарушать экологические нормы и занимать полезное пространство. Самый простой выход из ситуации – доверить вывоз ТБО в Москве компании «Главмусор».</p>
    </div>
    </div>
    <div class="hFooter"></div>
    </div> 
    <div id="footer">
            <ul>
                <li><a href="news.html">Новости</a></li>
                <li><a href="reviews.html">Отзывы</a></li>
                <li><a href="#">Статьи</a></li>
                <li>115230, Москва, Электролитный проезд, д.1, корп.3</li>
                <li><!-- counter.1gb.ru -->
<script language="javascript" type="text/javascript">
cgb_js="1.0"; cgb_r=""+Math.random()+"&r="+
escape(document.referrer)+"&pg="+
escape(window.location.href);
document.cookie="rqbct=1; path=/"; cgb_r+="&c="+
(document.cookie?"Y":"N");
</script><script language="javascript1.1" type="text/javascript">
cgb_js="1.1";cgb_r+="&j="+
(navigator.javaEnabled()?"Y":"N")</script>
<script language="javascript1.2" type="text/javascript">
cgb_js="1.2"; cgb_r+="&wh="+screen.width+
'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3" type="text/javascript">
cgb_js="1.3"</script>
<script language="javascript" 
type="text/javascript">cgb_r+="&js="+cgb_js; 
document.write("<a href='http://www.1gb.ru?cnt=88761'>"+
"<img src='http://counter.1gb.ru/cnt.aspx?"+
"u=88761&"+cgb_r+
"&' border=0 width=88 height=31 "+
"alt='1Gb.ru counter'><\/a>")</script>
<noscript><a href='http://www.1gb.ru?cnt=88761'>
<img src="http://counter.1gb.ru/cnt.aspx?u=88761" 
border=0 width="88" height="31" alt="1Gb.ru counter"></a>
</noscript>
<!-- /counter.1gb.ru --></li>
            </ul>
    </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
* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
    min-width: 1200px;
}
html {
    background: #fe860c;
}
#body{
    width: 100%;
    min-height: 100%;
}
#top {
    height: 290px;
    width: 100%;
    background: #FFFFFF;
    border-top: 10px solid #000000;
}
.logo {
    float: left;
    width: 250px;
    height: 230px;
    margin: 30px 0 0 50px;
}
#top img {
    height: 230px;
    width: 250px;
}
.title_top{
    height: 80px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 30px;
    width: 440px;
}
.top_phone {
    background-color: #DC143C;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #FFFFFF;
    float: right;
    font-size: 18px;
    height: 170px;
    padding-top: 20px;
    position: relative;
    text-align: center;
    top: -90px;
    width: 280px;
}
.content {
    width: 100%;
    background: #fe860c;
}
.menu {
    color: #FFFFFF;
}
.menu table {
    border-collapse: collapse;
    width: 100%;
}
.menu table td {
    width: 25%;
    background: linear-gradient(to bottom, #696969, #000000);
    text-align: center;
    padding: 15px 0;
    border-right: 1px solid #000000;
    font-weight: bold;
}
.menu table td:last-child {
    border-right: none;
}
.menu td:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
.menu td:active {
    color: #DC143C;
}
.menu table a {
    text-decoration: none;
    color: #FFFFFF;
}
#main_text {
    padding: 30px 20px;
    text-align: left;
}   
#main_text p {
    font-size: 15px;
    margin-left: 20px;
}
.line {
    border-top: 1px dashed #000000;
    width: 95%;
    height: 18px;
    margin: auto;
}
.block {
    margin-left: 60px;
}
.block a {
    text-decoration: none;
    color: #FFFFFF;
}
.block .first, .second, .third, .fourth, .fifth, .six, .seventh, .eighth{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-bottom: 34px;
    padding: 0px 20px;
}
.block .title {
    background: #000000;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 17px;
}
.block div p{
    text-align: justify;
    font-size: 15px;
}
.title:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
#footer {
    background: #000000;
    width: 100%;
    height: 120px;
    position: relative;
    bottom: 0;
    margin-top: -120px;
    font-size: 15px;
}
.hFooter {  
    clear: both;  
    height: 120px;
}
#footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-top: 60px;
    color: #FFFFFF;
    border-top: 10px solid #FFFFFF;
}
#footer ul li {
    display: inline-block;
    margin-left: 50px;
}
#footer ul li a {
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    display: inline;
}
#footer ul li a:hover {
    color: #DC143C;
}
#footer ul li:last-child{
    float: right;
    margin-right: 50px;
}

спасибо

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@andrey1994 · 25.06.2015, 15:15

блоки с услугами в середине страницы прижаты к левому краю

пропишите блоку(у него должна быть задана ширина), содержащему блоки услуг

CSS
1
margin:0 auto;

почему футер не хочет прижиматься к низу

высота не задана у верхних блоков.

@Svetlana_123 · 25.06.2015, 16:08 **[ТС]**

andrey1994, с футером все ок, а вот с центральным блоком не выходит
http://jsfiddle.net/AEDnA/5/

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
 <!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
    <title>Вывоз мусора и снега бункерами 8м3 в Москве и Подмосковье</title>
</head>
<body>
    <div id="body">
    <div id="top">
         <div class="logo">
         <a href="index.html"><img src="http://dorsnab.net/assets/images/musor.jpg" /></a>
         </div>
         <div class="title_top"><h1>Вывоз мусора от компании<br>"ГлавМусор"</h1></div>
         <div class="top_phone">
            <p>Заключение договоров <h3><strong>8 (965) 223-98-46</strong></h3></p><br/>
            <p>Заказ, замена, постановка бункеров <h3><strong>8 (495) 648-648-1</strong></h3></p>
         </div>
    </div>
    <div class="content">
    <div class="menu">
        <table>
            <tr>
                <td><a href="index.html"><h5>ГЛАВНАЯ</h5></a></td>
                <td><a href="services.html"><h5>УСЛУГИ</h5></a></td>
                <td><a href="about.html"><h5>О КОМПАНИИ</h5></a></td>
                <td><a href="form.php"><h5>КОНТАКТЫ</h5></a></td>
            </tr>
        </table>
    </div>
        <div id="main_text">
        <p>Мы предлагаем качественный <strong>вывоз мусора</strong> контейнером 8 м<sup>3</sup> на заказ недорого, а также поможем вывезти строительный и крупногабаритный мусор в любом округе Москвы и ближайшего Подмосковья до 10-15 км.</p>
        <p>За долгие годы работы компания «Главмусор» зарекомендовала себя как успешная и динамично развивающаяся компания со своим парком автомобилей.</p>
        <p>Опытные сотрудники выполнят работу качественно и в срок.</p>
        <p>Предоставляем полный пакет документов с последующим оформлением.</p>
        <p>Активное строительство, собственное дело, офисные и торговые площадки производящие мусор - это наши клиенты.</p>
        <p>Помимо вывоза отходов строительного происхождения, мы занимаемся также вывозом крупногабаритного бытового мусора и уборкой снега.</p>
        </div>
    <div class="line"></div>
    <div class="block">
    <div class="first">
    <a href="service1.html"><div class="title">Вывоз мусора и отходов</div></a>
    <p>Вы обращаетесь по адресу, если вас интересует вывоз бытового твердого мусора, его утилизация и захоронение, а также вывоз и ликвидация различных отходов с рынков и торговых площадей, жилых домов и предприятий, поселков и любых других мест.</p>
    </div>
    <div class="second">
    <a href="service2.html"><div class="title">Строительный мусор</div></a>
    <p>Утилизация строительного мусора – задача сложная и трудоемкая, которая требует наличия специального разрешения, определенной техники и свободного времени. Если ваша компания не специализируется на переработке отходов, лучше доверить исполнение задачи профессионалам.</p>
    </div>
    <div class="third">
    <a href="service3.html"><div class="title">Крупногабаритный мусор</div></a>
    <p>Полный комплекс услуг по сбору, вывозу и утилизации КГМ. Крупногабаритный мусор (КГМ) – это отходы, размер которых превышает стандартный и не позволяет выбрасывать их в обычные контейнеры.</p>
    </div>
    <div class="fourth">
    <a href="service4.html"><div class="title">Вывоз снега</div></a>
    <p>Компания «Главмусор» осуществляет уборку и вывоз снега специализированным транспортом в специально отведенные места в соответствии с санитарными нормами и требованиями.</p>
    </div>
    <div class="fifth">
    <a href="service5.html"><div class="title">Контейнер для мусора</div></a>
    <p>В компании «Главмусор» вы подберете контейнер для мусора и для вывоза снега, который полностью соответствует вашим запросам. Если вы затрудняетесь с выбором контейнера, свяжитесь с менеджером и расскажите ему о своих задачах.</p>
    </div>
    <div class="six">
    <a href="service6.html"><div class="title">Погрузка-разгрузка</div></a>
    <p>Для  вывоза и утилизации мусора после ремонта наша компания может обеспечить ручную погрузку. Наши грузчики помогут обеспечить погрузку бытового и строительного мусора.</p>
    </div>
    <div class="seventh">
    <a href="service7.html"><div class="title">Бункеровозы</div></a>
    <p>Бункеровоз-мусоровоз предназначен для подъема с земли, установки на автомобиль и транспортировки специальных съемных платформ с различными видами груза. Автомобиль снабжен устройством для разгрузки платформы самосвальным способом. </p>
    </div>
    <div class="eighth">
    <a href="service8.html"><div class="title">Вывоз и утилизация ТБО</div></a>
    <p>Вывоз и утилизация ТБО (твердых бытовых отходов) – важный вопрос для любого домовладельца и руководителя предприятия. Накапливать отходы – значит, нарушать экологические нормы и занимать полезное пространство. Самый простой выход из ситуации – доверить вывоз ТБО в Москве компании «Главмусор».</p>
    </div>
    </div>
    <div class="hFooter"></div>
    </div> 
    <div id="footer">
            <ul>
                <li><a href="news.html">Новости</a></li>
                <li><a href="reviews.html">Отзывы</a></li>
                <li><a href="#">Статьи</a></li>
                <li>115230, Москва, Электролитный проезд, д.1, корп.3</li>
                <li><!-- counter.1gb.ru -->
<script language="javascript" type="text/javascript">
cgb_js="1.0"; cgb_r=""+Math.random()+"&r="+
escape(document.referrer)+"&pg="+
escape(window.location.href);
document.cookie="rqbct=1; path=/"; cgb_r+="&c="+
(document.cookie?"Y":"N");
</script><script language="javascript1.1" type="text/javascript">
cgb_js="1.1";cgb_r+="&j="+
(navigator.javaEnabled()?"Y":"N")</script>
<script language="javascript1.2" type="text/javascript">
cgb_js="1.2"; cgb_r+="&wh="+screen.width+
'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3" type="text/javascript">
cgb_js="1.3"</script>
<script language="javascript" 
type="text/javascript">cgb_r+="&js="+cgb_js; 
document.write("<a href='http://www.1gb.ru?cnt=88761'>"+
"<img src='http://counter.1gb.ru/cnt.aspx?"+
"u=88761&"+cgb_r+
"&' border=0 width=88 height=31 "+
"alt='1Gb.ru counter'><\/a>")</script>
<noscript><a href='http://www.1gb.ru?cnt=88761'>
<img src="http://counter.1gb.ru/cnt.aspx?u=88761" 
border=0 width="88" height="31" alt="1Gb.ru counter"></a>
</noscript>
<!-- /counter.1gb.ru --></li>
            </ul>
    </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
* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
    min-width: 1200px;
}
html {
    background: #fe860c;
}
#body{
    width: 100%;
    min-height: 100%;
    position: relative;
}
#top {
    height: 290px;
    width: 100%;
    background: #FFFFFF;
    border-top: 10px solid #000000;
}
.logo {
    float: left;
    width: 250px;
    height: 230px;
    margin: 30px 0 0 50px;
}
#top img {
    height: 230px;
    width: 250px;
}
.title_top{
    height: 80px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 30px;
    width: 440px;
}
.top_phone {
    background-color: #DC143C;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #FFFFFF;
    float: right;
    font-size: 18px;
    height: 170px;
    padding-top: 20px;
    position: relative;
    text-align: center;
    top: -90px;
    width: 280px;
}
.content {
    width: 100%;
    height: 100%;
    background: #fe860c;
}
.menu {
    color: #FFFFFF;
}
.menu table {
    border-collapse: collapse;
    width: 100%;
}
.menu table td {
    width: 25%;
    background: linear-gradient(to bottom, #696969, #000000);
    text-align: center;
    padding: 15px 0;
    border-right: 1px solid #000000;
    font-weight: bold;
}
.menu table td:last-child {
    border-right: none;
}
.menu td:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
.menu td:active {
    color: #DC143C;
}
.menu table a {
    text-decoration: none;
    color: #FFFFFF;
}
#main_text {
    padding: 30px 20px;
    text-align: left;
}   
#main_text p {
    font-size: 15px;
    margin-left: 20px;
}
.line {
    border-top: 1px dashed #000000;
    width: 95%;
    height: 18px;
    margin: auto;
}
.block {
    margin-left: 60px;
}
.block a {
    text-decoration: none;
    color: #FFFFFF;
}
.block .first, .second, .third, .fourth, .fifth, .six, .seventh, .eighth{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-bottom: 34px;
    padding: 0px 20px;
}
.block .title {
    background: #000000;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 17px;
}
.block div p{
    text-align: justify;
    font-size: 15px;
}
.title:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
#footer {
    background: #000000;
    bottom: 0;
    font-size: 15px;
    height: 120px;
    margin-top: -120px;
    position: absolute;
    width: 100%;
}
.hFooter {  
    clear: both;  
    height: 120px;
}
#footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-top: 60px;
    color: #FFFFFF;
    border-top: 10px solid #FFFFFF;
}
#footer ul li {
    display: inline-block;
    margin-left: 50px;
}
#footer ul li a {
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    display: inline;
}
#footer ul li a:hover {
    color: #DC143C;
}
#footer ul li:last-child{
    float: right;
    margin-right: 50px;
}

@Сусанин_ Иван · 25.06.2015, 16:09

Классный сайт, отличный минимализм!

@Svetlana_123 · 25.06.2015, 16:13 **[ТС]**

Сусанин_ Иван, спасибо, но это вы серьезно или я шутки не поняла? ))

@andrey1994 · 25.06.2015, 16:18

Svetlana_123,

Пропишите:

CSS
1
2
3
4
5
.block {
        width:80%;
    margin:0 auto;
    
}

@Сусанин_ Иван · 25.06.2015, 16:23

Svetlana_123, на полном серьезе, не люблю всяких понтов на сайтах, лучше минимализма ничего нет. Сразу понимаешь о чем сайт.

@andrey1994 · 25.06.2015, 16:23

Кривая верстка, конечно. Пропишите: устраните одну ошибку - появятся две новые.

@Svetlana_123 · 25.06.2015, 16:47 **[ТС]**

да знаю что кривая, хочу выправить

@Svetlana_123 · 25.06.2015, 16:56 **[ТС]**

andrey1994, не совсем подходит такой вариант, т.к. выглядеть должно вот так на любом мониторе

нужно, чтобы при уменьшении масштаба/на большом мониторе равномерно изменялось расстояние между блоками

@Svetlana_123 · 25.06.2015, 16:56 **[ТС]**

andrey1994, а по верстке вообще-вообще беда?

@Taatshi · 28.06.2015, 10:58

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

нужно, чтобы при уменьшении масштаба/на большом мониторе равномерно изменялось расстояние между блоками

Используйте проценты для ширины колонок и отступов

@Сусанин_ Иван · 28.06.2015, 18:21

Напишите пожалуйста адрес вашего сайта в сети. И каким вы браузером пользуетесь?

@Svetlana_123 · 29.06.2015, 14:22 **[ТС]**

Сусанин_ Иван, http://musor-uborka.ru/
мозила или хром

Добавлено через 3 часа 56 минут
не знаю правильно или нет, но проблема решена с шапкой и средними блоками.

@Yulunga · 29.06.2015, 14:39

если убрать

CSS
1
min-width: 1200px;

то останется только вписать названия длинные ( типа "крупногабаритный мусор" ) в уменьшающиеся кнопочки, и можно сжимать не только до 1200 пикселов, но и гораздо меньше

@Svetlana_123 · 29.06.2015, 15:30 **[ТС]**

Yulunga, тогда вся верстка распадается

Добавлено через 2 минуты
Yulunga,

html, body {
width: 100%;
height: 100%;
min-width: 1024px;
}

получается получше

@Yulunga · 29.06.2015, 15:40

вы Это имеете в виду под распадается ?
ну не знаю. окей, пусть будет так, как вы сказали )

@Svetlana_123 · 29.06.2015, 16:57 **[ТС]**

Yulunga, у меня вот что выходит в целом, если убрать минимальную ширину (в мозиле и хроме)

@Yulunga · 29.06.2015, 19:51

у меня вот так.
ну только у правого верхнего блока убрать ширину в пикселах, а вставить в %%, и должно заработать вроде как
картинка

Новые блоги и статьи Все статьи Все блоги /
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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Сусанин_ Иван 0 / 0 / 0 Регистрация: 22.06.2015 Сообщений: 25
	25.06.2015, 16:09
	Классный сайт, отличный минимализм! 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	25.06.2015, 16:13 [ТС]
	Сусанин_ Иван, спасибо, но это вы серьезно или я шутки не поняла? )) 0

@Сусанин_ Иван 0 / 0 / 0 Регистрация: 22.06.2015 Сообщений: 25
	25.06.2015, 16:23
	Svetlana_123, на полном серьезе, не люблю всяких понтов на сайтах, лучше минимализма ничего нет. Сразу понимаешь о чем сайт. 0

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	25.06.2015, 16:23
	Кривая верстка, конечно. Пропишите: устраните одну ошибку - появятся две новые. 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	25.06.2015, 16:47 [ТС]
	да знаю что кривая, хочу выправить 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	25.06.2015, 16:56 [ТС]
	andrey1994, не совсем подходит такой вариант, т.к. выглядеть должно вот так на любом мониторе нужно, чтобы при уменьшении масштаба/на большом мониторе равномерно изменялось расстояние между блоками 0

@Сусанин_ Иван 0 / 0 / 0 Регистрация: 22.06.2015 Сообщений: 25
	28.06.2015, 18:21
	Напишите пожалуйста адрес вашего сайта в сети. И каким вы браузером пользуетесь? 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	29.06.2015, 14:22 [ТС]
	Сусанин_ Иван, http://musor-uborka.ru/ мозила или хром Добавлено через 3 часа 56 минут не знаю правильно или нет, но проблема решена с шапкой и средними блоками. 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	29.06.2015, 15:30 [ТС]
	Yulunga, тогда вся верстка распадается Добавлено через 2 минуты Yulunga, html, body { width: 100%; height: 100%; min-width: 1024px; } получается получше 0

@Yulunga Модератор 4132 / 940 / 264 Регистрация: 22.04.2013 Сообщений: 6,557 Записей в блоге: 1
	29.06.2015, 15:40
	вы Это имеете в виду под распадается ? ну не знаю. окей, пусть будет так, как вы сказали ) 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	29.06.2015, 16:57 [ТС]
	Yulunga, у меня вот что выходит в целом, если убрать минимальную ширину (в мозиле и хроме) 0

@Yulunga Модератор 4132 / 940 / 264 Регистрация: 22.04.2013 Сообщений: 6,557 Записей в блоге: 1
	29.06.2015, 19:51
	у меня вот так. ну только у правого верхнего блока убрать ширину в пикселах, а вставить в %%, и должно заработать вроде как картинка 0