Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
JohnAlterat
6 / 0 / 1
Регистрация: 23.12.2013
Сообщений: 83
#1

Ряды (адаптивная верстка) - HTML, CSS

05.08.2014, 22:24. Просмотров 463. Ответов 4
Метки нет (Все метки)

Доброго времени суток. Существующие темы по данному запросу прочитал, кое что взял на вооружение, но исчерпывающего ответа так и не нашел. Адаптивная верстка, на данный момент, для меня дремучий лес. Некоторые моменты разобрал, но по большому счету вопросов больше чем ответов. Интересует исключительно верстка под разные размеры монитора.

Есть два ряда блоков (по задумке там будут размещаться картинки с кратким описанием (в виде ссылке на полную версию) или еще что нибудь в таком духе, пока не решил). На маленьком экране (или увеличении масштаба в браузере) кнопки должны смещаться в одну сторону до полного выравнивания в одну вертикаль (что кое как но получилось). При обратном действии блоки (по задумке) должны смещаться в предыдущий ряд, заполняя собой образовавшееся пространство. Грубо говоря при наличии, в изначальном виде, 4-5 рядов, остается меньше.

Буду очень признателен за помощь и советы, если будет желание ими поделится, на данную тему.
Черновой вариант

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html> 
<html>  
<head>
    <link href="css/style.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
<div id="global">
<div id="main">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="block3"></div>
    <div class="block4"></div>
    <div class="block5"></div>
    <div class="block6"></div>
    <div class="block7"></div>
    <div class="block8"></div>
</div>
</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
body{
    background: #000000;
}
 
#global{
    width: 100%;
}
 
#main{
    position: relative;
    width: 85.05%;
    max-width: 1800px;
    margin:15px auto;
 
 
}
 
.block1{
    width:25%;
    min-height: 300px;
    background: #f0ffff;
    float: left;
}
 
.block2{
    width:25%;
    min-height: 300px;
    background: #C0C0C0;
    float: left;
}
 
.block3{
    width:25%;
    min-height: 300px;
    background: #f0ffff;
    float: left;
}
 
.block4{
    width:25%;
    min-height: 300px;
    background: #C0C0C0;
    float: left;
}
 
.block5{
    width:25%;
    min-height: 300px;
    background: #C0C0C0;
    float: left;
}
 
.block6{
    width:25%;
    min-height: 300px;
    background: #f0ffff;
    float: left;
}
 
.block7{
    width:25%;
    min-height: 300px;
    background: #C0C0C0;
    float: left;
}
 
.block8{
    width:25%;
    min-height: 300px;
    background: #f0ffff;
    float: left;
}
 
*{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
@media screen and (max-width: 800px) {
 
    .block1{
             width: 100%;
             float: none;
         }
 
    .block2{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
 
    .block3{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
 
    .block4{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
 
    .block5{
        width: 100%;
        float: none;
    }
 
    .block6{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
 
    .block7{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
 
    .block8{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
}

http://www.cyberforum.ru/html/thread1249088.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.08.2014, 22:24
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Ряды (адаптивная верстка) (HTML, CSS):

адаптивная верстка
Не давно начал изучать адаптивную верстку, подскажите правильно я понял, что...

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

Адаптивная верстка
Всем привет! Нужен ваш совет. Верстала несколько раз уже адаптивные...

Адаптивная верстка
Здравствуйте. Такой вот вопрос, нужно сделать так чтобы на дисплеях разных...

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

4
Eugene-nsk
28 / 28 / 8
Регистрация: 27.07.2014
Сообщений: 185
05.08.2014, 23:10 #2
Сначала, хотя бы сократите верстку стилей:
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
body{
    background: #000;
}
 
#global{
    width: 100%;
}
 
#main{
    position: relative;
    width: 85.05%;
    max-width: 1800px;
    margin:15px auto;
}
 
.block{
    width:25%;
    min-height: 300px;  
    float: left;
}
 
.block:nth-child(odd){
    background: #f0ffff;
}
 
.block:nth-child(even){
    background: #C0C0C0;
}
 
*{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
@media screen and (max-width: 800px) { 
    .block{
        float: none;
        overflow: hidden;
        width: 100%;
        margin: 10px 0 0 0;
    }
}
Подправив верстку html:
HTML5
1
2
3
4
5
6
7
8
<div id="global">
  <div id="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>                   
  </div>
</div>
А вообще для этих целей лучше использовать Bootstrap 3. Этот фреймворк специально создан для адаптивной верстки
0
JohnAlterat
6 / 0 / 1
Регистрация: 23.12.2013
Сообщений: 83
05.08.2014, 23:48  [ТС] #3
Eugene-nsk, Спасибо. Читал за bootstrap, но почему то сложилось, после прочитанных мнений, впечатление, что этот фреймворк не рассматривается как достойное подсполье в работе с версткой сайтов. Посему "пошел дальше". Видимо сделал неправильные выводы.
0
Eugene-nsk
28 / 28 / 8
Регистрация: 27.07.2014
Сообщений: 185
06.08.2014, 02:31 #4
Цитата Сообщение от JohnAlterat Посмотреть сообщение
Eugene-nsk, Спасибо. Читал за bootstrap, но почему то сложилось, после прочитанных мнений, впечатление, что этот фреймворк не рассматривается как достойное подсполье в работе с версткой сайтов. Посему "пошел дальше". Видимо сделал неправильные выводы.
Я специально подчеркнул, что именно Bootstrap 3 (не ниже) отвечает за адаптивную верстку. Там все эти классы прописаны в стилях, нужно только их подключить к соответствующим блокам и все. Почитайте здесь http://bootstrap-3.ru/css.php Перевод так себе, но понять о чем речь, я думаю, не сложно.
0
JohnAlterat
6 / 0 / 1
Регистрация: 23.12.2013
Сообщений: 83
06.08.2014, 02:37  [ТС] #5
Eugene-nsk, Благодарю, приступлю к изучению на свежую голову.
0
06.08.2014, 02:37
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.08.2014, 02:37
Привет! Вот еще темы с решениями:

Адаптивная верстка
Доброго времени суток всем! Столкнулся с такой проблемой, создал некий...

адаптивная верстка
Доброе время суток, изучаю адаптивная верстка, сверстал свою первую страницу,...

Адаптивная верстка
Здравствуйте. Снова обращаюсь за помощью к гуру. Очень нужна помощь со...

Адаптивная верстка
Возможны ли проблемы адаптивной верстки с тегом &lt;map&gt; с привязанными...


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

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

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