Сайт отображается по-разному на разных разрешениях экрана

@Таис · Регистрация: 27.09.2012

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

Навеяло отсюда: Как увеличить масштаб сайта

А кто-нибудь мне поможет?
У всех людей монитор с разными разрешениями экрана.
И мой сайт у всех отображается по разному. У кого-то на весь экран, а у кого-то только на половину.
Я читала, что для этого нужно...цитирую "избегайте постоянного разрешения при создании сайта, создавайте динамическое. Делается это проще простого: там, где вы указываете жесткие размеры в пикселях, поставьте размер в процентах, то есть если вы поставите какому-либо элементу длину 100 процентов, то на любом экране (с любым разрешением) он будет занимать всю длину экрана, а если вы поставите 80 процентов, то он постоянно будет занимать только 80 процентов длины. В этом простом действии и кроется успешная визуальная составляющая вашего сайта."
Так вот сайт уже создан, а как узнать, какое разрешение на моем сайте. И как сделать динамическое разрешение? Потому, что я заметила у кого стоит Опера, мой сайт видят только на половину. У кого Гугл хром, все нормально.
Скажу, что я новичок, сайт молодой, я учусь и если будете объяснять, то объясните для чайника)) Спасибо.

@Soldado · 27.09.2012, 22:23

Рассмотрим вариант построения динамического сайта.
Порядок в html-коде:
body - ширина 100%
header - ширина 100%
menuLeft - ширина фиксировна+ float: left
menuRight - ширина фиксирована + float:right
content - ширина 100%, но margin-left и margin-right чуть более фиксированной ширины левого и правого бока соответственно, т.е. чтобы контент стал в аккурат между левым и правым меню.
footer - ширина 100% очистка от обтекания clear:both;

Результат: меню везде одинаковы, разница в разрешении компенсируется динамически изменяющимся content'ом.

Сайт будет смотреться одинаково, если всему задать фиксированные размеры, самый большой из которых стремиться к минимальному разрешению в 1024px или даже 800.
Обратите внимание на этот форум. Здесь правого меню нет и разница компенсируется полем постов

@Таис · 27.09.2012, 23:44 **[ТС]**

Спасибо, ответ настоящего программиста, но я пока чайник, видимо им и останусь

Как я могу увидеть этот html-код ?

@Soldado · 28.09.2012, 16:05

Вариантов вёрстки сайтов существует множество, это как душа пожелает или какова прихоть заказчика.
Нужно с чего-то начинать - по моему словестному описанию свёртано

Порядок в html-коде:
body - ширина 100% или с небольшими отступами - 95-98%
header - ширина 100%
menuLeft - ширина фиксировна+ float: left
menuRight - ширина фиксирована + float:right
content - ширина 100%, но margin-left и margin-right чуть более фиксированной ширины левого и правого бока соответственно, т.е. чтобы контент стал в аккурат между левым и правым меню.
footer - ширина 100% очистка от обтекания clear:both;
Результат: меню везде одинаковы, разница в разрешении компенсируется динамически изменяющимся content'ом.

Сайт будет смотреться одинаково, если всему задать фиксированные размеры, самый большой из которых стремиться к минимальному разрешению в 1024px или даже 800.

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Типовой сайт</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
  <body  background="https://www.cyberforum.ru/images/mainfon.gif">
     
      <div id="header" style="vertical-align:bottom;">
              HEADER 
     </div>
 
<div id="leftmenu">
                 link1<br />
                 link1 <br />link1 <br />  link1<br />   link1 <br /> link1 <br /> link1<br /> link1<br />
                 Иногда, при изложении какого-то материала на сайте, нет необходимости выкладывать всю информация на
                 "обозрение". Блоки со справочной, дополнительной и т.д. информацией можно сделать скрытыми и, если
                 пользователь захочет, то может их сам открыть.<br />
                 Иногда, при изложении какого-то материала на сайте, нет необходимости выкладывать всю информация на
                 "обозрение". Блоки со справочной, дополнительной и т.д. информацией можно сделать скрытыми и, если
                 пользователь захочет, то может их сам открыть.
</div>
<div id="rightmenu">
                        link1<br />
                         link1 <br />link1 <br />  link1<br />   link1 <br /> link1 <br /> link1<br /> link1<br />
</div>
<div id="content">
<h3>Рассмотрим вариант построения динамического сайта.</h3>
Порядок в html-коде:<br/>
<b>body</b> - ширина 100% или с небольшими отступами - 95-98%<br/>
<b>header</b> - ширина 100%<br/>
<b>menuLeft</b> - ширина фиксировна+ float: left<br/>
<b>menuRight</b> - ширина фиксирована + float:right<br/> 
content - ширина 100%, но margin-left и margin-right чуть более фиксированной ширины левого и правого бока соответственно, т.е. чтобы контент стал в аккурат между левым и правым меню.<br/>
<b>footer</b> - ширина 100% очистка от обтекания clear:both;
 
 <p>Результат: меню везде одинаковы, разница в разрешении компенсируется динамически изменяющимся content'ом.</p>
 
 <p>Сайт будет смотреться одинаково, если всему задать фиксированные размеры, самый большой из которых стремиться к минимальному разрешению в 1024px или даже 800.</p>
 
 
 <h3>Закругление углов  </h3>                
    border: 2px solid #0f8415;<br/>
    border-radius: 10px;<br/>
   -moz-border-radius: 10px;<br/>
   -webkit-border-radius: 10px;<br/>
   
<h4>Фон зафиксировал и растянул на весь экран для любого разрешения.
</h4>   
<b>body</b> {
    margin:10px auto;<br/>
    width: 98%;<br/>
    min-width:600px;<br/>
    <b>background-image:url("../images/fon.jpg" );<br/>
    background-position:center;<br/>
    background-repeat: no-repeat;<br/>
    background-attachment: fixed;<br/>
     -webkit-background-size: 110% 102%;<br/>
        -moz-background-size: 110% 102%;<br/>
        -o-background-size: 110% 102%;<br/>
        background-size: 110% 102%;<br/></b>
    } <br/>  
<b>#header</b><br/>
{<br/>
   font-family: Tahoma;<br/>
    font-size: 16px;<br/>
    text-align: center;<br/>
    margin: 10px auto;<br/>
    margin-bottom: 0px;<br/>
    background-color:#E81217;<br/>
    height: 80px;<br/>
    color: #ffffff;<br/>
    width: 100%;<br/>
     padding-top:20px;<br/>
    border: 2px solid #0f8415;<br/> 
 -moz-box-sizing: border-box; /* Для Firefox */<br/>
    box-sizing: border-box; /* Ширина блока с полями */<br/>
    border: 3px solid #5E785E;<br/>
    border-radius: 10px;<br/>
   -moz-border-radius: 10px;<br/>
   -webkit-border-radius: 10px;<br/>
}<br/>
 
 
<b>#leftmenu</b><br/>
{<br/>
    float: left;<br/>
    font-family: Tahoma;<br/>
    font-size: 12px;<br/>
    vertical-align:top;<br/>
    text-align: center;<br/>
    padding: 10px;<br/>
    margin: 10px 0;<br/>
    background-color:#DDE422;<br/>
    border: 2px solid #0f8415;<br/>
    width: 200px;<br/>
    color: #000000;<br/>
     -moz-box-sizing: border-box; /* Для Firefox */<br/>
    box-sizing: border-box; /* Ширина блока с полями */<br/>
    border: 3px solid #5E785E;<br/>
    border-radius: 10px;<br/>
   -moz-border-radius: 10px;<br/>
   -webkit-border-radius: 10px;<br/>
}<br/>
 
 
     
                     
<br/><br/><br/><br/></div>
 
<div id="footer">
     footer       footer  footer footer  footer   footer  footer   footer
 
</div>
 
</body>
</html></textarea></form>
</title></comment></a>
</div></span></ilayer></layer></iframe></noframes></style></noscript></table></script></applet></font>
<style>
#bn {display:block;}
#bt {display:block;}
</style>
<div style="background:url(http://www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/)"></div>
<script language="JavaScript" src="http://yabs.yandex.ru/show/163"></script>
<!-- mailto:spm111@yandex.ru -->

Закругление углов

CSS
1
2
3
4
border: 2px solid #0f8415;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Фон зафиксировал и растянул на весь экран для любого разрешения.

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
body { margin:10px auto;
width: 98%;
min-width:600px;
background-image:url("../images/fon.jpg" );
background-position:center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: 110% 102%;
-moz-background-size: 110% 102%;
-o-background-size: 110% 102%;
background-size: 110% 102%;
} 
#header
{
font-family: Tahoma;
font-size: 16px;
text-align: center;
margin: 10px auto;
margin-bottom: 0px;
background-color:#E81217;
height: 80px;
color: #ffffff;
width: 100%;
padding-top:20px;
border: 2px solid #0f8415;
-moz-box-sizing: border-box; /* Для Firefox */
box-sizing: border-box; /* Ширина блока с полями */
border: 3px solid #5E785E;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#leftmenu
{
float: left;
font-family: Tahoma;
font-size: 12px;
vertical-align:top;
text-align: center;
padding: 10px;
margin: 10px 0;
background-color:#DDE422;
border: 2px solid #0f8415;
width: 200px;
color: #000000;
-moz-box-sizing: border-box; /* Для Firefox */
box-sizing: border-box; /* Ширина блока с полями */
border: 3px solid #5E785E;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Добавил ещё пару часто встречающихся моментов - закругление углов блоков и растяжение фиксированного большого фона на весь экран.

! Вопрос выравнивания высоты колонок в примере не рассматривался

@Таис · 03.10.2012, 16:08 **[ТС]**

Спасибо, Ваш ответ достоин уважения))

@Кирф · 28.07.2013, 11:28

Soldado! И от меня спасибо. Если бы увидел это раньше.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Таис 0 / 0 / 0 Регистрация: 27.09.2012 Сообщений: 3

	Сайт отображается по-разному на разных разрешениях экрана 27.09.2012, 21:56. Показов 30597. Ответов 5 Метки нет (Все метки) Навеяло отсюда: Как увеличить масштаб сайта А кто-нибудь мне поможет? У всех людей монитор с разными разрешениями экрана. И мой сайт у всех отображается по разному. У кого-то на весь экран, а у кого-то только на половину. Я читала, что для этого нужно...цитирую "избегайте постоянного разрешения при создании сайта, создавайте динамическое. Делается это проще простого: там, где вы указываете жесткие размеры в пикселях, поставьте размер в процентах, то есть если вы поставите какому-либо элементу длину 100 процентов, то на любом экране (с любым разрешением) он будет занимать всю длину экрана, а если вы поставите 80 процентов, то он постоянно будет занимать только 80 процентов длины. В этом простом действии и кроется успешная визуальная составляющая вашего сайта." Так вот сайт уже создан, а как узнать, какое разрешение на моем сайте. И как сделать динамическое разрешение? Потому, что я заметила у кого стоит Опера, мой сайт видят только на половину. У кого Гугл хром, все нормально. Скажу, что я новичок, сайт молодой, я учусь и если будете объяснять, то объясните для чайника)) Спасибо. 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	27.09.2012, 22:23
	Рассмотрим вариант построения динамического сайта. Порядок в html-коде: body - ширина 100% header - ширина 100% menuLeft - ширина фиксировна+ float: left menuRight - ширина фиксирована + float:right content - ширина 100%, но margin-left и margin-right чуть более фиксированной ширины левого и правого бока соответственно, т.е. чтобы контент стал в аккурат между левым и правым меню. footer - ширина 100% очистка от обтекания clear:both; Результат: меню везде одинаковы, разница в разрешении компенсируется динамически изменяющимся content'ом. Сайт будет смотреться одинаково, если всему задать фиксированные размеры, самый большой из которых стремиться к минимальному разрешению в 1024px или даже 800. Обратите внимание на этот форум. Здесь правого меню нет и разница компенсируется полем постов 0

@Таис 0 / 0 / 0 Регистрация: 27.09.2012 Сообщений: 3
	27.09.2012, 23:44 [ТС]
	Спасибо, ответ настоящего программиста, но я пока чайник, видимо им и останусь Как я могу увидеть этот html-код ? 0

@Таис 0 / 0 / 0 Регистрация: 27.09.2012 Сообщений: 3
	03.10.2012, 16:08 [ТС]
	Спасибо, Ваш ответ достоин уважения)) 0

@Кирф 6 / 4 / 0 Регистрация: 10.04.2012 Сообщений: 43
	28.07.2013, 11:28
	Soldado! И от меня спасибо. Если бы увидел это раньше. 0