Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488

Подскажите пожалуйста

07.01.2016, 15:35. Показов 1031. Ответов 21
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго дня.
Сейчас тренируюсь в создании сайтов.
Ориентируюсь на адаптивную верстку.
На первый взгляд сделал все верно, но сайт плывет. Во второй строке сверху у галереии дырка в виде 3 пустых блоков. Нижний блок и черта тоже не очень правильно встали. Меню и главное название ушли в сторону, а надпись должна быть слева от меню, а меню справа. Похоже проблема с позиционирование блоков, либо я что-то где-то не дописал. Вот ссылка на код: https://jsfiddle.net/ArtSmm/7c... exNbk5io8j
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
<div class="main">
            <div class="header">
                <h1>Энциклопедия ремонта</h1>
                <div class="menu">
                
                    <!-- Разметка меню -->
                    <ul class="nav">
                        <li class="first">
                            <a href="index.html">Главная</a>
                            <div class="rightBorder"></div>
                        </li>
                        <li>
                            <a href="#">О сайте</a>
                            <div class="leftBorder"></div>
                            <div class="rightBorder"></div>
                        </li>
                        <li class="active">
                            <a href="#">Блог</a>
                            <div class="leftBorder"></div>
                            <div class="rightBorder"></div>
                        </li>
                        <li>
                            <a href="#">Контакты</a>
                            <div class="leftBorder"></div>
                            <div class="rightBorder"></div>
                        </li>
                    </ul>
                    
                    <!-- Иконки соц сетей -->
                    
                    <div class="social">
                        <a href="#"><div class="soc-icon od"></div></a>
                        <a href="#"><div class="soc-icon vk"></div></a>
                        <a href="#"><div class="soc-icon facebook"></div></a>
                    </div>
                            
                
                </div>
                        
            </div>
                        
            <div class="photo-gallery">
                <div>
                    <img src="images/armatura-truboprovodnaya1.jpg" title="Арматура трубопроводная" />
                </div>
                <div>
                    <img src="images/bezopasnost-i-zdorove1.jpg" title="Безопасность и здоровье" />
                </div>
                <div>
                    <img src="images/vannye-komnaty1.jpg" title="Ванные комнаты" />
                </div>
                <div>
                    <img src="images/gvozdi1.jpg" title="Гвозди" />
                </div>
                <div>
                    <img src="images/dveri1.jpg" title="Двери" />
                </div>
                <div>
                    <img src="images/zashchitnoe-snaryazhenie1.jpg" title="Защитное снаряжение" />
                </div>
                <div>
                    <img src="images/kaminy1.jpg" title="Камины" />
                </div>
                <div>
                    <img src="images/laki-i-polirovochnye-sredstva1.jpg" title="Лаки и полировочные средства" />
                </div>
                <div>
                    <img src="images/malyarnye-raboty1.jpg" title="Малярные работы" />
                </div>
                <div>
                    <img src="images/oboi1.jpg" title="Обои" />
                </div>
                <div>
                    <img src="images/plitka1.jpg" title="Плитка" />
                </div>
                <div>
                    <img src="images/radiatory1.jpg" title="Радиаторы" />
                </div>
                <div>
                    <img src="images/santekhnika1.jpg" title="Сантехника" />
                </div>
                <div>
                    <img src="images/teploizolyaciya1.jpg" title="Теплоизоляция" />
                </div>
                <div>
                    <img src="images/uplotneniya1.jpg" title="Уплотнения" />
                </div>
                <div>
                    <img src="images/Cement-i-rastvor1.jpg" title="Цемент и раствор" />
                </div>
                <div>
                    <img src="images/CHerdak1.jpg" title="Чердак" />
                </div>
                <div>
                    <img src="images/SHtukaturka1.jpg" title="Штукатурка" />
                </div>
                <div>
                    <img src="images/EHlektrooborudovanie1.jpg" title="Электрооборудование" />
                </div>
            </div>
            <div class="stroka">
            <hr>
            </div>
            <div class="block-slider">
                <div class="block1">
                    Первый блок
                </div>
                <div class="block2">
                    Второй блок
                </div>
                <div class="block3">
                    Третий блок
                </div>
                <div class="block4">
                    Четвертый блок
                </div>              
            </div>
            
        </div>
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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
/* Стиль для сайта */
 
.main {
    width: 100%;
    font-family: 'Kelly Slab', cursive;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
 
.header {
    margin-left: 25%;
    margin-right: 25%;
    float: center;
    text-align:center;
    width:1000px;
}
 
.leftside {
    float:right;
    width:20%;
}
 
.rightside {
    float:right;
    width:30%;
}
 
.leftside + .main {
    width: 80%;
    margin-left:20%; /* = leftseide width */
}
 
.rightside + .main {
    width:50%;
    margin-left:20%; /* = leftseide width */
    margin-right:30%;/* = rightside width */
}
 
/* Стиль для галереи */
 
.photo-gallery {
    margin: 0 auto;
    width: 1000px;
    text-align:center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float:left;
    max-width: 200px;
    height: auto;
    padding: 1% /*Небольшие отступы для изображений*/
}
 
h1 {
    ont-size: 250%;
    text-align:center;
}
 
@media screen and (max-width: 768px) { 
    h1 {
        font-size:25px;
    }
    
    div.photo-gallery {
        min-width:320px;
    }
    
    div.menu {
        min-width:320px;
    }
    
    img {
        max-width:48%;
        height:auto;
        padding:1%;
    }
}
 
@media screen and (max-width: 480px) {
    h1 {
        min-width:320px;
        font-size:20px;
    }
    div.photo-gallery {
        width:320px;
        min-width:320px;
    
    }
    
    div.menu {
        min-width:320px;
    }
    
    }
    img {
        max-width:98%;
        height:auto;
        padding:1%;
    }
    
}
 
* {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
 
/*Стиль для меню*/
 
.menu {
    float:right;
    position: relative;
    margin-left: 47%;
    margin-right: 25%;
    width:600px;
    margin-top:0.5%;
    margin-bottom:0.5%;
    text-decoration:none;
    min-height:42px;
    /*background-image: url('images/#');*/
    /*background-repeat:repeat-x;*/
    border: 1px solid #d4d4d4;
        
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
}
 
/*Стиль для пунктов меню*/
 
.nav {
    float:left;
}
 
.nav > li {
    list-style:none;
    float:left;
    height:42px;
    position: relative;
    border-right: 1px solid #c9c9c9;
}
 
.nav > li > a {
    padding: 14px 25px 14px;
    color: black;
    display: block;
}
 
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus,
.nav > .li > a:hover {
    background-color: #cae285;
    background-image: -moz-linear-gradient(top, #cae285, #9fcb56);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cae285), to(#9fcb56));
    background-image: -webkit-linear-gradient(top, #cae285, #9fcb56);
    background-image: -o-linear-gradient(top, #cae285, #9fcb56);
    background-image: linear-gradient(to bottom, #cae285, #9fcb56);
    
    /*Границы между пунктами меню*/
    
    border: 1px solid #9fcb56;
    border-left: none;
    border-right: none;
    border-color: #aec671 #9fbb62 #87ac4a;
    
    -moz-box-shadow: inset 0px 1px #d7e9a4;
    -webkit-box-shadow: inset  0px 1px #d7e9a4;
    box-shadow: inset 0px 1px #d7e9a4;
    
    padding: 13px 25px 14px;
}
 
/* стили для боковых бордеров */
.leftBorder, .rightBorder {
    display: none;
    position: absolute;
    width: 1px;
    height: 43px;
    background-color: #9fbb62;
    top: 0px;
    z-index: 1000;
}
 
.leftBorder {
    left: -1px;
}
.rightBorder {
    right: -1px;}
 
/* при наведении на пункт и у активного
пункта показываем боковые бордеры */
 
.active .leftBorder,
.active .rightBorder,
.nav > li:hover > .leftBorder,
.nav > li:hover > .rightBorder {
    display: block;
}
 
/* стили для первого пункта меню */
 
.first, .first a {
    -webkit-border-bottom-left-radius: 5px; /* уголок снизу-слева */
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
.first a {
    border-left: 1px solid #d4d4d4;
}
.first.active, .first a:hover {
    border-left: 1px solid #9fbb62!important;
}
.first.active a:hover {
    border-left: 0px solid #9fbb62!important;
}
 
/* стили для соц-иконок */
 
.social {
    float: right;
    padding: 9px 7px 0 10px;
}
.soc-icon {
    float: right;
    margin-left: 4px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}
.vk {
    background-image: url('images/social/vk.jpg');
}
.facebook {
    background-image: url('images/social/fb.jpg');
}
.od {
    background-image: url('images/social/ok.jpg');
}
 
.block-slider {
    margin-left: 20%;
    margin-right: 29%;
    float:left;
    width:50%;
    height:100px;;
    background:#D9D6D6; /*Убрать по завершении*/
}
 
.stroka {
    margin-left: 20%;
    margin-right: 29%;
    margin-top:1%;
    margin-bottom:1%;
    float:left;
    width:50%;
    position:relative;
    border:none;
    color:#000;
    height:5px;
}
Буду признателен за помощь
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
07.01.2016, 15:35
Ответы с готовыми решениями:

Подскажите пожалуйста
Подскажите пожалуйста как набраться опыта в верстке PSD макетов и просто в работе цсс и хтмл вместе?

Подскажите, пожалуйста
Здравствуйте! Подскажите, пожалуйста, у меня, есть 4 блока 500х1000px, как сделать что бы на странице в нормально состоянии они были...

Подскажите пожалуйста
Делаю разметку для интернет магазина,первый день в css. Как передвинуть нижний блок в верх,прям под block-header #block-body{ ...

21
 Аватар для SamcroSOA
8 / 8 / 5
Регистрация: 24.03.2015
Сообщений: 44
08.01.2016, 17:12
Вот смотрю я на css и складывается впечатление, что просто где-то куски стилей нашли и влепили просто все в один файл( и на первый взгляд тут верного мало...
Если ещё актуально, дайте знать - будем вносить ясность.
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 17:20  [ТС]
Спасибо за ответ. Не отрицаю, некоторые куски кода я брал при изучении. Скорее всего надо все брать, переписывать заново, начиная с основных блоков: Header, content, footer. Сначала прописать для них стили, потом уже добавлять содержимое - заглавие, галерею и тп. Если не трудно, подскажите, в верном ли направлении я мыслю? Сегодня вечером буду смотреть, что не так сделал, потом выложу результаты изысканий)
0
 Аватар для SamcroSOA
8 / 8 / 5
Регистрация: 24.03.2015
Сообщений: 44
08.01.2016, 17:57
ArtSmm, я не проф. конечно, но просто из кусков css и разметки выучить что-то ну... можно... наверное. Хотя я так не пробовала) И прежде чем прыгать в адаптивную версту, нужно с css и html как минимум быть хорошо ознакомленным.

К примеру, Вы хотите разместить в классе header все в одну строку: display: inline-block;. А у Вас там черт ногу сломит( ибо эти куски, как я понимаю, брались в слепую( А просто налепить бредятины и питаться с нее что-то толковое сделать - занятие не из приятнейших.

И да, правильней будет сделать изначально скелет сайта с основными блоками и правильным их размещением, а потом уже и css ваять.
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 21:34  [ТС]
Спасибо за совет) так и буду делать. Пока выкладываю свои изыскания, буду рад комментариям.
Ссылка на код: https://jsfiddle.net/ArtSmm/r2... 3jkf0T66Ah

Сделал, как вы и советовали - убрал весь код, потом стал постепенно заполнять стили для блоков. Удалось выровнять все блоки по центру, но в галерее по прежнему дырка, теперь в 4ой строке сверху. Буду разбираться, как ее убрать
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:12
Вот такие вещи
CSS
1
.header, .menu, .photo-gallery, .stroka, .block-slider
это жесть, давайте названия стилям конкретных блоков
Вставьте ссылки на картинки, чтобы было понятно, что сделать хотите.
В общем, непонятно, что это вообще
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:13  [ТС]
вроде бы названия конкретные. Я что-то не так понял?) или есть общие стандарты для названий основных элементов?
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:17
Есть какой то макет, что должно получится в итоге?
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:21  [ТС]
Да, в итоге должно так получиться: https://jsfiddle.net/ArtSmm/zq... dQ1QrfSDg1
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:24
Ссылка не открывется
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:24  [ТС]
сделал ссылку
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:27
Попробуйте на Bootstrap написать.
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:30  [ТС]
Хорошая платформа?
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:31
На нем такая верстка займет минут 20 и будет адаптивная
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:32  [ТС]
Спасибо, попробую
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:35
Выложу вашу верстку завтра)
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
08.01.2016, 23:35  [ТС]
Спасибо)
0
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:39
Ну, а вобще конечно учитесь верстке, основы, препроцессоры Sass, Less, и всё такое
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 488
09.01.2016, 22:19  [ТС]
Хорошо, буду знать, что изучать)

Добавлено через 22 часа 38 минут
Вроде бы решил вопрос с позиционированием блоков в галерее, но, наверное, это извращение, то что я сделал)))
Код: https://jsfiddle.net/ArtSmm/2a... 4ts0M9Fh0L
0
 Аватар для iAlexND
1 / 1 / 0
Регистрация: 17.12.2013
Сообщений: 23
09.01.2016, 22:29
Предлагаю для изучения HTML Academy и WebReference
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.01.2016, 22:29
Помогаю со студенческими работами здесь

Подскажите,пожалуйста
Здравствуйте! У меня проблема ,(блок увеличивается от команды padding) только содержимое этого блока(картанка),однозначно меньше размера...

Подскажите пожалуйста с input
Подскажите как сделать что бы при нажатии на input текст внутри поля анимацией поднялся на верх как на этом сайте...

Подскажите пожалуйста html код
Здравствуйте, программисты Я недавно начал изучать html, и у меня есть задача, которая мне пока не по силам, но может вы поможете? Мне...

Подскажите, пожалуйста, нормально ли сверстал?
Веб ссылка - http://b-games.hol.es/ И ссылка на исходники с псдшником - https://yadi.sk/d/vOZcTg0e3LRzbk Скажите, все ли...

Мастера, подскажите новичку пожалуйста
Приветствую форумчане. Буквально месяц назад начал изучать html и css абсолютно с нуля, до этого даже не представлял, что такое теги. ...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru