Сверстал сайт по макету, но нужен совет

@BosveL23 · Регистрация: 22.05.2014

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

Сверстал сайт по этому макету:

Нижняя менюшка плохо сея ведёт в разные браузерах. В гугл хром норм, а вот в опере, мозиле, ИЕ и т.д. они падает вниз + появляется большая полоса. При просмотре увидите.
Я делал вёрстку по красным (жирным) чёрточкам слева. Я разрежал эти "блоки" полосками по 1 px в ширину далее сделал блоки и в каждом сделал повторяющуюся по горизонтали полоску. Ещё проблемка: верхнее меню в разных браузерах скачет. При изменении масштаба на 90% между блоками появляется белая полоска, как её убрать?
А при изменении на ниже 50% блок начинают опускаться друг под друга. Что делать? Помогите пожалуйста. Может есть другой способ верстки данного макета. Спасибо!

Главная страница: index.php

PHP/HTML
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
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class="header" align="center">
<div class="karkas1">
<div class="logo"></div>
<?php $n="1"; include("blocks/menu.php"); ?> 
<div class="clr"></div>
<div class="search">
<form action="" method="get" name="search">
<input name="q" type="text" class="search_input" value="Поиск..." placeholder="Поиск">
</form>
</div>
</div>
</div>
 
<div class="header2" align="center">
<div class="karkas">
&nbsp;
<div class="monitor">
<div class="monitor_center">
<div class="monitor_left">
<div class="monitor_right" align="left">
<div align="left" class="monitor-all">
 
<div class="monitor-all_left">
<p class="title">Присоединяйся к нам<br>в команду!</p>
<p class="slogan">У нас самые лучшие инструменты для ведения бизнеса + бесплатное обучене. </p>
<p class="mar40"><a href="" class="button">Вступить бесплатно!</a></p>
<p class="importance">*Вступление в нашу группу абсолютно бесплатное. Если вы заплатили за это деньги, то обратитесь к продавцу с просьбой вернуть потраченные средства!</p>
</div>
<div class="monitor_all_right">Видео
</div>
 
 
</div>
</div></div></div></div>
</div>
</div>
<div class="content" align="center">
<div class="karkas2" align="left">
<div class="content_text">
 
 
 
<div class="content_block">
<p class="block_content_title">Нам не важно твоё местоположение</p>
<img src="img/img_content1.jpg" class="block_content_img">
<p class="block_content_text">Бла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст </p>
</div>
<div class="content_block" style="margin-left:56px;">
<p class="block_content_title">Нам не важно твоё образование</p>
<img src="img/img_content1.jpg" class="block_content_img">
<p class="block_content_text">Бла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст </p>
</div>
<br><br><br>
<div class="content_block" style="margin-top:20px;">
<p class="block_content_title">Нам не важен твой возраст</p>
<img src="img/img_content1.jpg" class="block_content_img">
<p class="block_content_text">Бла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст </p>
</div>
<div class="content_block" style="margin-left:56px; margin-top:20px;">
<p class="block_content_title">Нам не важен твой статус</p>
<img src="img/img_content1.jpg" class="block_content_img">
<p class="block_content_text">Бла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст текстБла бла бла текст текст </p>
</div>
 
<br>
</div>
</div>
</div>
<div class="footer" align="center">
<div class="karkas3">
 
</div>
</div>
<div class="footer2" align="center">
<div class="karkas4">
<div class="footer2_text">
<p class="title_footer2">Чем мы занимаемся?</p>
<div class="footer2_cont" align="left">
<p class="footer2_slogan">У нас самая лучшая работа! Мы работаем в Oriflame.</p>
<p class="footer2_slogan">Мы не продаём косметику, мы ведём свой бизнес. У нас есть 18% скидка и большие идеи, как сделать этот мир лучше.
</p>
<p class="footer2_slogan">Присоединяйся к нам прямо сейчас и получи возможность пройти бесплатное обчение!</p>
<a href="business.php">Полное описание...</a>
<br><br><br>
<p align="center"><a href="#" class="footer2_go">Вступить бесплатно</a></p>
</div>
</div>
<div class="footer2_ask">
<p class="title_footer2">F.A.Q.</p>
<div class="footer2_cont" align="left">
<a href="#">Какие критерии приёма в вашу группу?</a>
<p class="footer2_d_hr"></p>
<a href="#">Сколько стоит начать вести бизнес?</a>
<p class="footer2_d_hr"></p>
<a href="#">Как начисляются деньги?</a>
<p class="footer2_d_hr"></p>
<a href="#">В каких странах вы работаете?</a>
<p class="footer2_d_hr"></p>
<a href="#">Сколько я могу заработать?</a>
<br><br><br>
<p align="center"><a href="#" class="footer2_faq">Перейти к списку вопросов</a></p>
</div>
</div>
<div class="footer2_logo">
<p class="title_footer2">Наши партнёры</p>
<div class="footer2_cont" align="left">
asdasd<a href="#">Наливайко</a>
</div>
</div> 
</div>
</div>
<div class="footer3" align="center">
<div class="karkas5">
<div class="right_reserved">
Copyright © <?php echo date("Y"); ?>  Все права защищены.
</div>
 
<div class="second_menu">
<?php include("blocks/footer_menu.php"); ?>
 
 
</div>
</div>    
</div>
</body>
</html>

К нему 2 CSS:
style.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
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
@charset "utf-8";
/* CSS Document */
/********** All **********/
*{
    padding:0; margin:0;
}
body {
    background:#FFF; /* #e9e9db */
    min-width:1100px; /* 1085 */
}
.karkas {
    width:960px;
}
.karkas1 {
    width:1050px;
}
.karkas2 {
    width:960px;
    height:320px;
}
.karkas3 {
    width:960px;
    height:220px;
    border:1px solid #0CF;
}
.karkas4 {
    width:960px;
    height:330px;
}
.karkas5 {
    width:960px;
    height:58px;
}
.header {
    margin:0; padding:0;
    background:#fff url(img/header_fon.jpg) left top  repeat-x;
    height:175px;
    max-height:175px;
}
.header2 {
    margin:0; padding:0;
    background:#fff url(img/header2_fon.jpg) left repeat-x;
    height:385px;
    max-height:385px;
}
.header3 {
    margin:0; padding:0;
    background:#fff url(img/header2_fon.jpg) left repeat-x;
    height:385px;
    max-height:385px;
}
.content {
    background:#e9e9db;
}
.footer {
    margin:0; padding:0;
    background:#fff url(img/footer_fon.jpg) left repeat-x;
    height:240px;
    max-height:240px;
}
.footer2 {
    margin:0; padding:0;
    background:#fff url(img/footer2_fon.jpg) left repeat-x;
    height:390px;
    max-height:390px;
}
.footer3 {
    margin:0; padding:0;
    background:#fff url(img/footer3_fon.jpg) left repeat-x;
    height:60px;
    max-height:60px;
}
/********** Header **********/
.logo{
    width:230px;
    height:150px;
    position:absolute;
    top:0;
    left:120px;
    border-radius:0 0 8px 8px;
    background: url(img/logo.jpg) top no-repeat;
}
.menu_block {
    float:right;
    margin-right:10px;
    margin-top:45px;
    color:#FFF;
    -moz-border-radius:10px;
}
.clr {
    clear:both;
}
.menu_block ul {
    list-style:none;
    overflow:hidden;
    float:left;
}
.menu_block ul li {
    float:left;
    font:15px Arial; color:#FFF;
    margin-right: 15px;
}
.menu_block ul li a {
    color:#FFF;
    text-decoration:none;
    padding: 11px 12px;
    display:block;
}
.menu_block ul li a:hover {
    color:#FFF;
    text-decoration:none;
    background:#929e21;
    border-radius:15px;
}
.activ_menu {
    color:#FFF;
    text-decoration:none;
    background:#929e21;
    border-radius:15px;
}
.search {
    float:right;
    margin-top:35px;
    margin-right:120px;
    width:230px;
 
}
.search_input {
    width:220px;
    height:30px;
    border-radius:10px;
    font:15px Arial;
    color:#000;
    padding-left:7px;
    float:left;
}
 
.mar40 {
    margin-top:40px;
}

и index.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
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
@charset "utf-8";
/* CSS Document */
/********** Monitor **********/
.monitor {
    margin-top:13px;
    top:188px;
    width:960px;
}
.monitor_center{
    background:url(img/centre_monitor.jpg) left top repeat-x;
}
.monitor_left{
    background:url(img/left_monitor.jpg) left top no-repeat;
}
.monitor_right{
    background:url(img/right_monitor.jpg) right top no-repeat; height:340px;
}
.monitor-all {
    padding:30px 60px 20px 60px;
}
.monitor-all_left {
    width:370px;
    float:left;
    margin-right:15px;
}
.monitor-all_left .title {
    font:30px Arial;
    color:#FFF;
    font-weight:bold;
    margin-top:10px;
}
.monitor-all_left .slogan {
    font:18px Arial;
    color:#FFF;
    margin-top:25px;
}
.monitor-all_left .button {
    font:20px Arial;
    color:#FFF;
    font-weight:bold;
    background:#353535;
    margin-top:30px;
    padding:10px 17px;
    border-radius:15px;
}
.monitor-all_left .importance {
    font:12px Arial;
    color:#FFF;
    margin-top:20px;
}
 
.monitor_all_right {
    width:450px;
    border:1px solid #666;
    float:left;
}
 
/********** Content **********/
.content_text {
    padding:20px 50px;
}
.content_block {
    float:left;
    overflow:hidden;
    width:400px;
}
.block_content_title {
    font:18px Arial;
    color:#6d7808;
    font-weight:700;
}
.block_content_text {
    font:Arial 15px;
    color:#6b6b6c;
    margin-top:7px;
}
.block_content_img {
    float:right;
    padding:5px 0 8px 8px;
}
 
/********** Footer 1 **********/
.footer_title {
    color:#6d7808;
    font:18px Arial;
    margin-left:50px;
}
 
/********** Footer 2 **********/
.footer2_text {
    float:left;
    width:310px;
}
.footer2_ask {
    margin-left:30px;
    float:left;
    width:280px;
}
.footer2_logo {
    margin-left:30px;
    float:left;
    width:310px;
 
}
.title_footer2 {
    font:24px Arial;
    color:f5f5f5;
    font-weight:bold;
    margin-bottom:25px;
}
.footer2_d_hr {
    margin:10px 0;
    border-bottom:1px dashed #f5f5f5;
    width:280px; /* 235 */
}
.footer2_cont {
    color:ffffff;
    font:15px Arial;
}
.footer2_ask .footer2_cont a {
    text-decoration:none;
    color:ffffff;
    font:15px Arial;
}
.footer2_ask .footer2_cont a:hover {
    text-decoration:none;
    color:ffffff;
    font:15px Arial;
}
 
.footer2_text .footer2_cont a {
    color:ffffff;
    font:15px Arial;
}
.footer2_text .footer2_cont a:hover {
    color:ffffff;
    font:15px Arial;
}
.footer2_slogan {
    margin-bottom:13px;
}
.footer2_go {
    font:15px Arial;
    border:1px solid #c3cd90;
    color:#FFF;
    font-weight:bold;
    background:#93a53c;
    margin-top:30px;
    padding:10px 17px;
    text-decoration:none;
}
.footer2_go:hover {
    font:15px Arial;
    border:1px solid #B6C17E;
    color:#FFF;
    font-weight:bold;
    background:#7C8D25;
    margin-top:30px;
    padding:10px 17px;
    text-decoration:none;
}
.footer2_faq {
    font:15px Arial;
    color:#FFF;
    font-weight:bold;
    background:#a0b050;
    margin-top:30px;
    padding:10px 17px;
    text-decoration:none;
}
.footer2_faq:hover {
    font:15px Arial;
    color:#FFF;
    font-weight:bold;
    background:#8C9949;
    margin-top:30px;
    padding:10px 17px;
    text-decoration:none;
}
 
 
 
/********** Footer 3 **********/
.right_reserved {
    font:15px Arial;
    color:ffffff;
    float:left;
    margin-top:20px;
}
 
.menu_block1 {
    float:right;
    margin-right:5px;
    margin-top:10px;
    color:#FFF;
}
.menu_block1 ul {
    list-style:none;
    overflow:hidden;
    float:left;
}
.menu_block1 ul li {
    float:left;
    font:15px Arial; color:#FFF;
    margin-right: 5px;
}
.menu_block1 ul li a {
    color:#FFF;
    text-decoration:none;
    padding: 11px 5px;
    display:block;
}

Есть include с меню: menu.php

PHP/HTML
1
2
3
4
5
6
7
8
9
10
<div class="menu_block">
<ul>
<li><a href="index.php" <?php if($n == "1") { echo "class='activ_menu'"; } ?>>Главная</a></li>
<li><a href="about_us.php" <?php if($n == "2") { echo "class='activ_menu'"; } ?>>О Комманде</a></li>
<li><a href="business.php" <?php if($n == "3") { echo "class='activ_menu'"; } ?>>О Бизнесе</a></li>
<li><a href="reviews.php" <?php if($n == "4") { echo "class='activ_menu'"; } ?>>Отзывы</a></li>
<li><a href="blog.php" <?php if($n == "5") { echo "class='activ_menu'"; } ?>>Блог</a></li>
<li><a href="help.php" <?php if($n == "6") { echo "class='activ_menu'"; } ?>>Поддержка</a></li>
</ul>
</div>

и с меню внизу: footer_menu.php

PHP/HTML
1
2
3
4
5
6
7
8
9
10
<div class="menu_block1">
<ul>
<li><a href="index.php">Главная</a></li>
<li><a href="about_us.php">О Комманде</a></li>
<li><a href="business.php">О Бизнесе</a></li>
<li><a href="reviews.php">Отзывы</a></li>
<li><a href="blog.php">Блог</a></li>
<li><a href="help.php">Поддержка</a></li>
</ul>
</div>

Добавлено через 4 минуты
Кстати забыл сказать: сам сайт: http://new-life.ru.tf/

@BosveL23 · 24.05.2014, 16:53 **[ТС]**

Есть, кто живой?

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@BosveL23 0 / 0 / 0 Регистрация: 22.05.2014 Сообщений: 5
	24.05.2014, 16:53 [ТС]
	Есть, кто живой? 0