Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Где можно найти макеты для верстки сайтов?

Где можно найти макеты для верстки сайтов?Просто с целью потренироваться.
Ответ:
В поисковике ввести запрос) много сайтов с готовыми макетами.
Вопрос: Что можно использовать для верстки дизайна сайта вместо css?

Как написать сайт не используя css? Что можно использовать для верстки дизайна сайта вместо css?
Ответ:
Сообщение от rura
Как написать сайт не используя css? Что можно использовать для верстки дизайна сайта вместо css?
Никак, как уже сказали до меня форумчане, но есть подозрение, что препод заставляет Вас прописать внутренний стиль для сайта без использования файла-css, как такового(тег <style> - либо атрибут style), всё зависит от курса...
Сообщение от rura
Java скрипты очень приветствуются.
А js разве не с помощью css, свойства для элементов задаёт? Если Вы так не считаете, то Вам очень jquery подойдёт, там очень просто задаются стили-справится даже ребёнок...

Совсем забыл про презентационные и устаревшие теги - i,b,em, sup,sub,font, strong, s и т.д. + сематика: footer, header, select, article и т.д. + старые добрые таблицы и их атрибуты... Вот Вам и сайт аля 90-е...
Вопрос: Резиновая (адаптивная) верстка сайта на css

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

Что такое резиновая верстка?
Итак, резиновая верстка это когда ваш сайт настроен под разные разрешения экранов. Это делается для удобства ваших посетителей на сайте, с какого устройства они не зайдут - будут видеть красивый и приятный дизайн.

Каким образом она создается?
Существует много разных способов для осуществления адаптивной верстки. Лично я знаю только 2:
  • C помощью использования функции media screen;
  • Задавая блокам ширину в процентах.
  • Я также слышал о способе с использованием Bootstrap, но как - не знаю.
А сейчас я о них вам подробно расскажу.

CSS функция @media screen
@media screen, также называемая media queries - лично я использую именно этот вариант, в моём мнении, он является самым лучшим и простым. А являет он собой вот этот код:
CSS
1
@media screen and (max-width: AAApx) { }
Точнее, это только 1 условие, самое популярное, а в общем существует их 4, но об этом позже, а сейчас давайте разберем куда этот код вставлять и как ним пользоваться.

@media screen and (max-width: AAApx) { } - внутри фигурных скобок будет такой же код как и во всех обычных файлах css (но с некоторыми изменениями):

Во первых, если вы хотите чтобы какой-то блок исчез когда экран становится менее допустим 400px, то надо сбивать стили того блока внутри @media screen, а для этого есть три способа:
  1. Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
  2. Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
  3. А лучше всего, прописать блоку position: absolute; и left: -4000px; (чтобы убрать блок за экран), и таким способом он вооообще никак не сможет помешать дизайну вашего сайта.
Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
@media screen and (max-width: 400px) {
    #block{
        position: absolute;
        left: -4000px;
     }
}

Во вторых, если вам нужно какой-то блок поменять, то вы копируете его стили из изначального кода css опять таки внутрь @media screen и изменяете его стили:
Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
    #block{
        background-color: white;
     }
@media screen and (max-width: 400px) {
    #block{
        background-color: blue;     /*тоесть, если ширина экрана устройства будет равна или менее 400px, то фоновый цвет блока будет синим*/
     }
}

В третьих, самый важный момент! - если вам нужно добавить блок, то вам нужно будет его добавить в обычный html код. А в изначальном CSS коде, вам его нужно будет сбить, так как я уже раньше упомянул, с помощью позиционирования его за экран или display: none. А уже в @media screen вы задаете ему стили и, обязательно, не забудьте поместить его обратно на экран =)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
Начну с боди
    <body>
            <div id="header">
            </div>
            <div id="footer">
            </div>
    </body>
При ширине экрана равной или менее 400px, у меня появится подвал(просто пример)
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    #header{
        height: 50px;
        width: 100%;
        background-color: blue;
     }
    #footer{
        height: 50px;
        width: 100%;
        background-color: red;
        position: relative;
        bottom: 0;
        display: none;
     }
@media screen and (max-width: 400px) {
    #footer{
        height: 50px;
        width: 100%;
        background-color: blue;
        position: relative;
        bottom: 0;
        display: block; /*В этом случае я использовал display: none и block; по скольку ширина подвала у нас 100%*/
     }
}


Так, мы разобрались как работает media screen (media queries). А теперь можно и разобрать все остальные детали. Давайте начнем с условий:
CSS
1
2
3
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }
эти условия делают такие же чудеса как и первое, но вот разница:
  • @media screen and (min-width: XXXpx) { } - это условие позволяет задавать стили для экранов больше или равным к заданной вами ширине(противоположное max-width).
  • @media screen and (min-width: XXXpx) and (max-width: YYYpx) { } - это условие позволяет вам задавать стили для экранов как я называю их "от и до" =) ширины заданной вами. Тоесть, вы задаете минимальную и максимальную ширину экрана.
  • @media screen and (max-device-width: XXXpx) { } - его я не совсем понимаю как использовать, если знаете, пожалуйста поделитесь.
И последнее о media queries: ее также можно задать с помощью html, тоесть внутри <head></head> вы можете подключить стили media screen css также как и любой другой css файл. Вот пример:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - Для корректной работы стилей
    <link href="css/style1.css" type="text/css" rel="stylesheet" media="screen and (min-width: 400px)">
    <link href="css/style2.css" type="text/css" rel="stylesheet" media="screen and (max-width: 399px)">
    <title>Тестовая страница</title>
</head>

тоесть это означает что если ширина экрана будет больше или равна 400px, то подключить стили1 css, а если менее 400px то подключить стили2 css. А, и кстати, все IE до 8 включительно не поддерживают media queries. Это можно исправить с помощью JQuery, но это уже тема раздела по JQuery.

Ширина блоков в процентах
И несколько слов о ширине в процентах. Ширину в процентах не советую использовать во время создания адаптивной верстки, почему? Потому что если кто-то зайдет на ваш сайт допустим с очень маленького устройства посмотреть вашу галерею у которой ширина будет допустим 80% от ширины экрана, то они ваших фотографий даже не увидят, так как ваши фото могут быть в одном ряду и все они сожмутся до очень маленьких размеров, а с помощью media queries, вы можете поставить их в горизонтальное положение а не вертикальное, чтобы их размеры были больше. А если кто-то зайдет с очень большого экрана то ваши фото могут растянуться до очень больших размеров и в итоге будут выглядеть не качественно. А также, чтобы вы знали, когда вы задаете ширину в процентах, то эти проценты, это проценты ширины по их родительскому блоку.

Вот, вроде бы и все, если кто может еще чем-то поделится из своих знаний и опыта по созданию адаптивной верстки, пожалуйста, делитесь =)

Ответ: может поможет
пример создание адаптивной страницы сайта
Вопрос: Иконки соц.сетей в верстке сайта

Доброго вечер!
Есть верстка сайта,в файле index.html есть строки:
HTML5
1
2
3
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
итд
Пример на скрине. Подскажите откуда берутся эти иконки? Картинок не нашел в папке верстки..
Ответ: mrtoxas, дело не в том сколько он весит, а в решении, как таковом... Спасибо за дополнение, но на моей практике данный генератор шрифтов, не лучшее решение и если говорить о создании шрифтов, то их лучше создавать их через специализированные программы, которые предназначены для их создания, не доверяясь слепо генераторам... К тому же Font Awesome можно подключить удалённо, при этом не нагружая сервер...
Вопрос: Набираю портфолио по верстке сайтов

Здравствуйте, дорогие друзья. 
Решил начать набирать портфолио по верстке сайтов. Предлагаю создать сайт любой тематики по вашему дизайну (можно по описанию) за просто так. Знаю HTML,HTML5,CSS,CSS3,PHP,JS(слабо). Примеров полноценных нет, поэтому и создана эта тема. 

Контакты: 
Skype - pahan0852 
Mail - sysanov@mail.ru 
Gmail - sysanov0852@gmail.com 
Vk - vk.com/sysanov 
Ну и личка на форуме.
Ответ:
TiiRiiX, т.е. ты просто решил верстать всем сайты просто так? Что-то непонятно  :-D 
Цитата

Знаю ... HTML5 .... CSS3 .....
Сделай адаптивный шаблон простого новостного сайта 

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

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

Вот скриншот шаблона, при уменьшении
Ответ: 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; /*Устанавливает величину отступа от верхнего края элемента.*/
}
Вопрос: Как можно сделать поиск по сайту ?

как можно сделать поиск по сайту ?
Ответ: Kobek, средствами браузерного javascript'a поиск по сайту осуществить нельзя, потому что браузерный javascript работает в пределах одной страницы, открытой в браузере, а сайт -- это несколько страниц под одним доменным именем

поиск по сайту можно сделать только серверными средствами, например, написав специальный файл на языке PHP,
Вопрос: Можно ли сделать фон сайта картинкой?

Помогите плз можно ли сделать фон сайта картинкой?Если да то как?И напишите теги плз.Пример вот siniyvoin.ucoz.ru, но мож я чего не понмаю так как в Html недавно.
Ответ: Можно сделать даже видео)
Вопрос: Несколько вопросов по верстке сайта

Сейчас делается верстка для сайта по сантехнике. Я выступаю в роли заказчика.

Ссылка на сверстанные страницы:

Появилось несколько вопросов по верстки сайта. Ответьте на них, пожалуйста:

1) Под какие браузеры и какие их версии стоит делать кроссбраузерную верстку?

2) При ввертке был создан резиновый дизайн. Но сейчас от него больше проблем, чем пользы, так некоторые страницы в разных размерах отображаются некорректно и придется вносить правки. В связи с этим вопрос: можно ли на этом отключить резиновый дизайн для сайта?

3) Если настраивать верстку под мобильные устройства, то под какие? Ведь их много от смартфонов до планшетов, и всех устройств разные размеры экранов. Я заходил в инструмент Google Chrome Developer Tools, там много устройств, не понятно какие выбирать для проверки:

4) При открытии сайта на браузере компьютера будут появляться всплывающие окна. Можно ли сделать, чтобы на мобильных устройствах не появлялись всплывающие окна, чтобы они не загораживали экран?

5) При верстке 18 страниц, скрипты должны находится на каждой странице или они должны хранится в отдельной папке, а страницы должны ссылаться на скрипты, запрашивая их из папки при необходимости?

6) Плохая верстка (если специалистом по верстке были допущены какие-то ошибки при верстке) как-то влияет на SEO продвижение?
Ответ:
Zuldek писал(а):Ошибаетесь если полагаете что этим исчерпываются возможные ошибки.

Чего?
Хыиуду писал(а):Но IE выше них :)

Напалеон. =)
Запарил он.
Ganzal писал(а):да-да. перед законом все равны. но кто-то ровнее =) из-за этого приходится верстать "кроссбраузерно" хотя сама верста под некоторый стандарт уже обязана работать одинаково на клиентах, заявляющих что они поддерживают этот стандарт.

Кроме ие все остальное работает правильно.
Ну покрайне мере Амиго, форса, гугл, сафари, не встречаю проблем с ними.
А на ие ниже 10ки, положил болт. От них нет смысла.
Вопрос: Уроки по верстке сайтов для новичков

Всем привет! Вот хочу поделиться нашел классный сайт где много уроков по верстке сайтов
Ответ:
Куда еще меньше? И так до 8 ккал. сократил рацион. Всего 2 пачки пельменей на завтрак :D