Создание адаптивного сайта

@Ycidenis · Регистрация: 07.11.2015

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

Делаю первый адаптивный сайт,но столкнулся с проблемой, при широкоформатном монике блоки разьезжаются а на телефоне сьезжаются
Есть скрины и код :
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
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>LogoType - просто сайт</title>
        <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" >
        <link rel="stylesheet" href="style/style.css">
    </head>
    
    <body>
        <div id="b1">
            <header>
                
                <div id="hed">
                    <a href="# " ><img src="img/Logo.png" id="LogoP" alt=""> </a>
                    <h1><span id="LogoText1">Logo</span><span id="LogoText2">Type</span></h1>
                    <div id="menu">
                        <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Фото</a></li>
                            <li><a href="#">Сервис</a></li>
                            <li><a href="#">Отзывы</a></li>
                            <li><a href="#">О нас</a></li>
                        </ul>
                    </div>  
                </div>
            </header>
        
            <div id="all">
                <div>
                    <content id="content1">
                        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                        <p> Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
                        
                        <p> Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <br></p>
                    </content>
            
                    <content id="content2">
                        <h2>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</h2>
                        <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p>
                        <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. 
                        <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci.</p>
                        
                        <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.<br><p>                 
                        <em>Nam nec ante
                        
                        </em>
                    </content>
                </div>
                
                <div id="sidebar">
                    <h4>News 2015</h4>
                    <p>Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa......</p>
                    <h4>News 2014</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq......</p>
                    <h4>News 2013</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.....</p>
                </div>
            
        
                <footer>
                    <p>COPYRIGHT LOGOTYPE</p>
                </footer>
            </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
@charset utf-8;
#b1{
margin:0 auto;
width:90%;
height:100%;
background-color:#ffffff;
box-shadow: 0 0 13px rgba(0,0,0,0.5);
}
header , footer {
width:100%;
}
 
#all{
margin-top:880px;
border-right:2px solid #000000;
}
 
 
content{
float:left;
  width:50%
 
}
#content1{
padding-right:20px;
border-right:2px solid #000000;
position:absolute;
top:518px;
left:7%;
 
}
#content2{
padding-right:20px;
border-right:2px solid #000000;
position:absolute;
top:745px;
left:7%;
}
#sidebar {
position:absolute;
top:520px;
left:63%;
  width:25%
}
 
/*#hed{
position:absolute;
z-index:2;
top:0;
}*/
#LogoP{
position:absolute;
left:250px;
top:59px;
}
header {
height:469px;
background-image:url(../img/header.png);
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
min-height:49px;
background-repeat:no-repeat;
}
ul li{
padding-left:3%;
display:inline;
text-shadow:2 2 2 ;
}
ul {
margin-left:28%;
margin-right:28%;
width:100%;
display:inline;
}
#menu {
margin-top:187px;
border-bottom:3px solid #FFFFFF;
}
 
li a  {
font-size:17pt;
font-family:'Cooper Std' sans-serif;
text-shadow: 1px 0px 3px black, 0 0 1em black;
text-decoration:none;
color:#F6F6F6;
}
li a:hover {
text-decoration:none;
color:#004EAA;
transition:all 2s ease;
}
li a:active {
text-decoration:none;
}
 
footer p{
position:absolute;
right: 10%;
margin-top:40px;
font-weight:bold;
text-decoration:underline;
}
 
footer {
background: #ffffff url(../img/footer.png) no-repeat;
height:80px;
width:100%;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
}
h1 {
position:relative;
top:189px;
margin-left:27%;
font-family:'Lithos Pro', Geneva, Arial, Helvetica, sans-serif;
font-size:27.38pt;
}
 
#LogoText1 {
color:#0101FA;
}
#LogoText2{
color:#FFFFFF;
}
 
body {
padding:0;
margin:0 auto;
width:100%;
height:100%;
color:#333;
background-color:#F3EEEE;
}
 
p {
}

Ссылка на сайт
http://kirgis.esy.es/

@Shakalaka · 07.11.2015, 22:28

ctrl+a -> shift+delete и верстать все заново, по-человечески. Не использовать position:absolute для построения сетки, не использовать херню типа

Сообщение от Ycidenis

@Ycidenis · 07.11.2015, 22:40 **[ТС]**

благодарю за совет

Добавлено через 1 минуту
но вроде как можно не удалять а все исправить

@Shakalaka · 07.11.2015, 22:47

Сообщение от Ycidenis

но вроде как можно не удалять а все исправить

В том то и дело, что гораздо проще удалить все и быстро сверстать нормально и правильно(ведь вы, видимо, учитесь верстать). Это будет гораздо проще, быстрее, а главное познавательнее для вас. Макет у вас нулячий, прежде чем что-то верстать - посмотрите типовые примеры.
http://htmlbook.ru/samlayout/tipovye-makety
http://habrahabr.ru/sandbox/48835/
в гугле полно примеров.

@Ycidenis · 07.11.2015, 23:46 **[ТС]**

вот сейчас правда помогли, спасибо,буду исправляться

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Ycidenis 0 / 0 / 0 Регистрация: 07.11.2015 Сообщений: 57
	07.11.2015, 22:40 [ТС]
	благодарю за совет Добавлено через 1 минуту но вроде как можно не удалять а все исправить 0

@Ycidenis 0 / 0 / 0 Регистрация: 07.11.2015 Сообщений: 57
	07.11.2015, 23:46 [ТС]
	вот сейчас правда помогли, спасибо,буду исправляться 0

Создание адаптивного сайта

Решение