Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
Mafia50000
0 / 0 / 2
Регистрация: 10.07.2016
Сообщений: 45
1

Адаптивная верстка сайта

10.12.2016, 15:24. Просмотров 892. Ответов 2
Метки css, html (Все метки)

Ребят помогите я делаю вёрстку сайта, мне нужно сделать адаптивность шаблона.
Я прописал в css
CSS
1
2
3
4
.contener{
    width: 2026px;
    margin: 0 auto;
}
Теперь, при уменьшение страниц, шаблон уменьшается, но мне нужно, чтобы при уменьшение или увеличение все элементы оставались на месте.

Вот скриншот шаблона, при уменьшении
0
Миниатюры
Адаптивная верстка сайта  
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.12.2016, 15:24
Ответы с готовыми решениями:

Адаптивная верстка сайта
Всем добрый вечер! Есть трехколоночный сайт. Давно назревала необходимость в адаптивной верстке....

Резиновая (адаптивная) верстка сайта на css
Доброе время суток!, в этом разделе я хочу поделиться с вами тем что я знаю о резиновой...

Адаптивная верстка
Кто может подсказать нормальное руководство, или поделиться примером, который показывает как делать...

Адаптивная верстка
Всем привет, Прошу Вас дать мне ответы по адаптивной верстке. Я делал проект по адаптивной верстке...

Адаптивная верстка
Здравствуйте, подскажите кто знает. Сверстал сайт при помощи селектора @media screen and...

2
mrtoxas
Модератор
Эксперт HTML/CSS
2669 / 1974 / 1218
Регистрация: 12.07.2015
Сообщений: 5,271
Записей в блоге: 3
10.12.2016, 16:19 2
Приложите файлы проекта или код, все, что даст возможность воспроизвести проблему.
0
Mafia50000
0 / 0 / 2
Регистрация: 10.07.2016
Сообщений: 45
10.12.2016, 16:28  [ТС] 3
Лучший ответ Сообщение было отмечено Mafia50000 как решение

Решение

mrtoxas,
Код html
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
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel='stylesheet' type='text/css' href='style.css'>
        <title>Шаблон</title>
    </head>
    <body>
    <div class="contener">
        <div class="heder"> <!--Шапка сайта-->
            <div class="clear"></div>
                <div class = "logo_text"><img src = "img/logo.png"><h1>Protecly</h1></div> <!--Логотип и название-->
        <div class="clear"></div>
            <div class = "menu"> <!--Меню сайта-->
                <ul>
                    <li>Product</li>
                    <li>Industries</li>
                    <li>Pricing</li>
                    <li>Features</li>
                </ul>
            </div>
        <div class="clear"></div>
            <div class = "contact">
                <div class = "phone"><img src = "img/phone.png"></div> <!--Иконка телефона-->
                <div class = "phoneText"><p>+1 (888) 675-4998</p> <!--Абзац--></div> 
            </div>
        <div class="clear"></div>
            <div class = "info">
                <h1>Protect Your sensitive <br> <!--Устанавливает перевод строки--> files across cloud services.</h1> <!--Заголовок-->
            </div>
            <div class = "knopka">
                <h1>Try it out for free !</h1> <!--Загаловок-->
            </div>
            <div class = "video">
                <div class = "text"><p>Watch the Video</p><!--Абзац--></div>
                <div class = "videokp"><img src = "img/video.png"></div>
            </div>
        </div>
        <div class="clear"></div>
            <div class = "content"> <!--Контент сайта-->
            <div class = "comp"> <!--Логотипы которые находятся в content-->
                <div class="clear"></div>       
                    <div class = "imgOne"><img src = "img/logo/pin.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgTwo"><img src = "img/logo/design.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgThree"><img src = "img/logo/dis.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFour"><img src = "img/logo/fresh.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFive"><img src = "img/logo/new.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgSix"><img src = "img/logo/lout.png"></div> <!--Иконки логотипа-->
            </div>
        <div class = "slide">
        <div class = "textslider"><h1>Lorem ipsum sit Amet Dolor</h1><!--Заголовок--></div>
        <div class = "slde_info">
            <!--Абзац-->
            <p>We’re all about making sure you have a great experience with our software.</p> <!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>Our real, live customer support team will go out of their way to help you—by phone or by email.</p><!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>For free. We also have free video tutorials, forums, training webinars, whitepapers,</p><!--Устанавливает перевод строки-->
            <br><!--Устанавливает перевод строки-->
            <p>and a great knowledgebase you can access 24/7.</p><!--Заголовок-->
            </div>
        <div class = "slide_cnopka">
            <div class = "knopka_odin"><img src = "img/slide/1.png"></div>
                <div class="clear"></div>
                <div class = "knopka_dva"><img src = "img/slide/2.png"></div>
            </div>
            <div class = "text_dva">
                <p>Alice Anderson,99designs.com</p><!--Заголовок-->
            </div>
            <br><br><br>
            <hr>
        </div>
        <div class = "content2">
            <div = "zagolovok"><h1 style ="text-align: center;">Protectly protects your sensitive files.</h1><!--Загаловок, находится по середине--></div>
            <div class = "textcontent">
                <p>We protect your sensitive files across all popular cloud services and devices, by encrypting them,</p><!--Это абзац-->
                <br> <!--Устанавливает перевод строки-->
                <p>controlling access to them and providing an audit trail for all changes to your files.</p><!--Эьто абзац-->
            </div>
            <div class = "info_img">
                <div class = "info_img"><p><img src = "img/info_img.png"></p> <!--Абзац--></div> 
            </div>
    <div class="clear"></div>
                <div class = "info_text">
                    <div class = "infotextOne"><h1>Compliant file Sharing</h1> <!--Загаловог--></div>
                    <div class = "infotextTwo"><h1>Endpoint Security</h1> <!--Загаловок--></div>
                    <div class = "infotextThree"><h1>Access Control</h1> <!--Загаловок--></div>
            </div>
        </div>
        <br><br><br><br><br><br><br><br> <!--Устанавливаети перевод строки-->
        </div>
        <div class = "footer"> <!--Низ сайта-->
            <div class="clear"></div>
                <div class ="blog">
                    <div class ="blogOne">
                        <div>Protectly</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Getting Started</div>  <!--Блочный элемент-->
                        <div>Enterprise Features</div>  <!--Блочный элемент-->
                        <div>Why Us?</div>  <!--Блочный элемент-->
                        <div>Solution</div>  <!--Блочный элемент-->
                        <div>Pricing</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogTwo">
                        <div>About Us</div>  <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Our Story</div>  <!--Блочный элемент-->
                        <div>Our Leadership</div>  <!--Блочный элемент-->
                        <div>Our Investors</div>  <!--Блочный элемент-->
                        <div>Jobs</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogThree">
                        <div>Support</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Help</div>  <!--Блочный элемент-->
                        <div>Privacy Policy</div> <!--Блочный элемент-->
                        <div>Terms of Use</div> <!--Блочный элемент-->
                    </div>
            <div class ="kontakt">
                <div class ="social"><p><img src = "img/social.png"></p></div>          
                <div class ="phoneThree"><img src = "img/phone2.png"><p>+1 (888) 675-4998</p></div>
            </div>  
        <div class="clear"></div>           
            <div class ="mail">
                <div class ="img_mail"><img src = "img/mail.png"></div> <!--Блочный элемент-->
                <div class ="text_mail"><p>info@mail.com</p> <!--Абзац--></div> <!--Блочный элемент-->
            </div>
        <div class="clear"></div>           
            <div class = "text_niz"><p>All rights reserved. Posted by Dospel & GanjaParker 2013</p> <!--Абзац--></div>
            </div>
        </div>
    </div>
    </body>
</html>
Код 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
*{
    margin: 0;
    padding: 0; 
}
 
.clear{clear:both;}
 
.contener{
    width: 2026px;
    margin: 0 auto;
}
 
 
img {
    max-width: 100%;
    height: auto;
}
 
.heder{                                 /*Шапка сайта*/
    width: 100%;
    height: 660px;
    margin-top: -20px;
    padding-top: 20px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: url(img/banner.jpg);  /*Изображение в формате jpg*/
}
 
.logo_text h1{                  /*Текст в логотипе, с заголовком*/
    color: #fff;
    margin-left: 11%;  /*Устанавливает величину отступа от левого края элемента*/
    font-size: 24px;  /*Размер шрифта элемента*/
    margin-top: -49px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.logo_text img{             /*Картинка логотипа*/
    margin-top: 20px;
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
}
 
.menu{                  /*Меню сайта*/
    float: left;
    margin-left: 30%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
.menu li{                   /*Меню сайта, пишится маркированным спископ*/
    float: left;
    margin-top: -20px;
    margin-right: 40px; /*Устанавливает величину отступа от правого края элемента.*/
    list-style: none;
    color: #fff; /*Цвет*/
    font-size: 25px; /*Размер шрифта элемента*/
}
 
.phone img{             /*Картинка*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    float: right;   /*Определяет по какой будет выравниваться элемент*/
    margin-right: 40%; /*Устанавливает величину отступа от правого края элемента.*/
}
.phoneText{         /*Текст, который пишется рядом с картинкой. Прописан в классе ".phone img"*/
    float: left; /*Устанавливает величину отступа от левого края элемента*/
    margin-left: 60%; /*Устанавливает величину отступа от левого края элемента.*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff; /*Цвет*/
    font-size: 20px; /*Размер шрифта элемента*/
}
    
.info h1{           /*Пишится текст, ниже меню*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 150px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;
}
 
.knopka h1{     /*Кнопка с заголовком, и цветом где прописан текст*/
    color: #fff;
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    width: 150px;
    height: 25px;
    background: #1f6ca0;
    padding-left: 20px;  /*Устанавливает значение поля от левого края содержимого элемента.*/
    padding-top: 5px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
}
 
.text{
    margin-left: 462px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;        /*Устанавливает цвет*/
    font-size: 16px; /*Размер шрифта элемента*/
}
 
.videokp{
    margin-left: 430px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -24px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content{
    width: 56%; 
    margin: 0 auto; 
    background: #efb7c6;
    margin-top: 10px /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.comp{                      /*Картинки логотипов*/
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.imgOne{                /*Картинка логотипа 1*/
    padding-top: -10px;
}
 
.imgTwo{            /*Картинка логотипа 2*/
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgThree{              /*Картинка логотипа 3*/
    margin-left: 300px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -45px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFour{           /*Картинка логотипа 4*/
    margin-left: 490px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFive{           /*Картинка логотипа 5*/
    margin-left: 700px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -80px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgSix{            /*Картинка логотипа 6*/
    margin-left: 910px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -75px; /*Устанавливает величину отступа от верхнего края элемента.*/
}   
 
.textslider h1 {
    text-align:  center; /*Текст выравнивается по середине*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    font-size: 20px; /*Размер шрифта элемента*/
}
 
.slde_info p{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 10px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_odin{
    margin-top: -150px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_dva{
    float: right;
    margin-top: -56px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.text_dva{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 140px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content2 {
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.textcontent{
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.info_img{
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.infotextOne h1{
    margin-left: 15%;  /*Устанавливает величину отступа от левого края элемента.*/
    font-size: 15px; /*Размер шрифта элемента*/
}
 
.infotextTwo h1{
    text-align: center; /*Текст выравнивается по середине*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.infotextThree h1{
    margin-left: 75%; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
.footer{                    /*Низ сайта*/
    padding: 100px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: #3498db; 
    color: #fff; 
     
}
 
.blog{
    margin-top: 0; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogOne{
    margin-left: 27%; /*Устанавливает величину отступа от левого края элемента*/
}
 
.blogTwo{
    margin-left: 40%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -120px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogThree{
    margin-left: 52%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -105px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.social p{
    float: right;
    margin-top: -90px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree img{
    float:  right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 160px;
    margin-top: -20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree p{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    
}
 
.img_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 190px;
}
 
.text_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-left: 90px;
}
 
.text_niz{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.12.2016, 16:28

Адаптивная верстка
Уважаемые форумчане! Пожалуйста, помогите человеку, впервые пытающемуся сделать адаптивный сайт....

Адаптивная верстка
Всем привет. Вот моя парочка вопросов: 1. Адаптивная верстка - это верстка подстраиваемая под...

Адаптивная верстка
Всем привет! Учусь верстать сайты на HTML+CSS без фреймворков, js и т.д., но получается пока не...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru