Масштаб сайта по умолчанию

@stjefim · Регистрация: 24.12.2014

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

Здравствуйте,

у меня такая проблема я создавал сайт и тестировал только на своем ПК. Все размеры задавал через CSS в px.
Когда после переустановки винды поменял разрешение, сайт уплыл в бок.(занимает только левую половину экрана)

Раньше при масштабировании по умолчанию в браузере(Chrome) сайт отображался как я и хотел.
А сейчас только при масштабе 150%

Как сделать чтобы первоначально сайт занимал весь экран.

В процентах указывать пробовал не получается!
(создаю свой первый сайт)

Заранее спасибо!

@SaumanBao · 24.12.2014, 23:59

Скиньте исходник. я вам помогу

@stjefim · 25.12.2014, 19:04 **[ТС]**

Сейчас стоит не в процентах, так как в процентах все ломалось.

Выглядит так:

Хочу чтобы выглядело так:

Исходники:

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
*{
    margin:0;
    padding: 0;
    outline:none;
    text-decoration: none;
}
 
body{
    background: #2d2d2d;
    
}
 
.b30radius{
 
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
}
 
.b50radius{
 
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
}
 
#novostj{
    background: url("../images/novostj.png") ;
    height: 491px;
    width: 667px;
    margin-top: 81px;
    margin-left:81px;
}
 
#novostj2{
    background: url("../images/novostj.png") ;
    height: 491px;
    width: 667px;
    margin-top: -550px;
    margin-left:550px;
}
 
#stream{
    height: 71px;
    width: 667px;
    background: #cccccc;
    margin-top: 30px;
    margin-left: 81px;
}
 
#chat{
    height: 205px;
    width: 667px;
    background: #cccccc;
    margin-top: 30px;
    margin-left: 81px;
    margin-bottom: 81px;
}
 
#vhod{
    height: 315px;
    width: 423px;
    background: #cccccc;
    margin-top: -908px;
    margin-left: 777px;
}
 
#top{
    height: 480px;
    width: 306px;
    background: #cccccc;
    margin-top: 30px;
    margin-left: 835px;
}
 
input[name=login]{
    border: none;
    background: #fff;
    padding: 10px 15px;
    height: 50px;
    width: 300px;
    font-size: 34px;
    margin-top: 30px;
    margin-left: 45px;
}
 
input[name=password]{
    border: none;
    background: #fff;
    padding: 10px 15px;
    height: 50px;
    width: 300px;
    font-size: 34px;
    margin-top: 30px;
    margin-left: 45px;
}
 
a{
    color:#707070;
    display: block;
}
 
 
#bvhod{
    border: none;
    background: #fff;
    padding: 10px 15px;
    height: 40px;
    width: 120px;
    font-size: 34px;
    margin-top: 30px;
    margin-left: 45px;
    text-align: center;
 
 
}
 
#breg{
    border: none;
    background: #fff;
    padding: 10px 15px;
    height: 40px;
    width: 170px;
    font-size: 34px;
    margin-top: -60px;
    margin-left: 215px;
    text-align: center;
    
}
 
#you{
    width: 270px;
    height: 67px;
    padding-left: 70px;
    padding-top: 3px;
    border-right: solid 3px #fff;
}
 
#twitch{
    width: 250px;
    height: 58px;
    padding-left: 70px;
    padding-top: 11px;
    margin-top: -70px;
    margin-left: 345px;
    
}
 
.pole{
    border: none;
    background: #fff;
    padding: 10px 15px;
    height: 50px;
    width: 300px;
    font-size: 34px;
    margin-top: 30px;
    margin-left: 45px;
}
 
h3{
    padding-left: 45px;
    margin-top: 30px;
    font-size: 20px;
    color: #cccccc;
    text-decoration: none;
}
 
#per{
    height: 40px;
    width:180px;
    background: #efdd79;
    border: solid 1px #000;
    padding-left: 15px;
    padding-top: 9px;
    margin-top:-880px ;
    margin-left: 81px;
}
 
h4{
    
    
    font-size: 20px;
    color: #003cff;
 
    
}

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
<!DOCTYPE html>
<html>
    <head>
 
        <title>play game d-pils.lv</title>
        <meta chraset="windows-1251">
        <link href="css/main.css" rel="stylesheet" type="text/css">
 
    </head>
 
    <body>
    
        <div id="novostj"></div>
        <div id="stream" class="b30radius">
 
            <a href="https://www.youtube.com" target="_blank"><div id="you"><img src="images/you.png" ></div></a>
            <a href="http://www.twitch.tv/" target="_blank"><div id="twitch"><img src="images/tw.png" ></div></a>
 
 
 
 
 
        </div>
 
        <div id="chat" class="b50radius"></div>
        <div id="vhod" class="b50radius">
 
            <form method="" action="">
            <input type="text" name="login" placeholder="login" class="b30radius">
            </form>
 
            <form method="" action="">
            <input type="text" name="password" placeholder="password" class="b30radius">
            </form>
 
            <a href="#"><div id="bvhod" class="b30radius">Вход</div></a>
            <a href="register.php"><div id="breg" class="b30radius">Регистрация</div></a>
 
        </div>
            <div id="top" class="b50radius"></div>
                <div id="per" class="b50radius">
                <a href="samp.php"><h4>Наш cервер!</h4></a>
                </div>
 
 
 
    </body>
 
</html>

Добавлено через 2 часа 52 минуты
Неужели никто не знает как решить?????

@Al_lord · 26.12.2014, 00:42

Весь прикол в px) переделайте сайт, задавайте размеры в % )

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

@stjefim · 26.12.2014, 01:36 **[ТС]**

Да я знаю что не дружу. Первый сайт в жизни делаю. По видео урокам делаю, днем скину шаблон, а может можете указать на ошибки. Заранее спасибо.

@Al_lord · 26.12.2014, 01:56

более менее адаптивный сайт

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
 body {
    background: #f00;
}
.all {
    width: 89%;
    margin: 0 auto;
    margin-top: 24px;
}
 
a.button {
    /*font-size: 14px;*/
    color: #003cff;
    display: block;
    padding: 16px 7px;
    text-decoration: none;
    background: #EFDD79;
    border-radius: 40px;
    width: 180px;
}
a.button p {
    margin: 0;
    padding: 0;
    padding-left: 10px;
    font-size: 19px;
    line-height: 16px;
}
.dvImg{
    width: 97.6%;
    border-radius: 59px;
    border: 8px solid #CCC;
    overflow: hidden;
    height: 475px;
    
}
.bar {
    width: 55.8%;
    display: inline-block;
    margin-top: 5px;
}
.bar.right {
    width: 35.5%;
    margin-right: 75px;
}
.bar.left {;
}
.left {
    float: left;
}
.right {
    float: right;
}
.cls{clear: both;}
.dvIcons {
    margin: 30px 0;
    width: 100%;
    height: 72px;
    background: #CCC;
    border-radius: 30px;
    overflow: hidden;
}
.dvGrey {
    width: 100%;
    height: 207px;
    background: #CCC;
    border-radius: 50px;
}
div {
}
.dvTop {
    width: 100%;
    height: 316px;
    border-radius: 50px;
    overflow: hidden;
    background: #CCC;
}
.dvBottom {
    width: 72%;
    height: 483px;
    margin: 0 auto;
    border-radius: 45px;
    margin-top: 31px;
    background: #CCC;
}
img {
    width: 100%;
    height: 100%;
}
 
.icon {
    width: 49.9%;
    height: 100%;
 
}
.icon.left {
    border-right: 1px solid #fff;;
}
.icon.right img {
    display: block;
    width: 80%;
    margin: 0 auto;
}
input[type="text"] {
}
 
.dvTopinner imput {
    width: 100%;
}
.input {
    width: 100%;
    border: none;
    background: none;
    height: 100%;
    font-size: 33px;
}
.dvTopinner {
    width: 96%;
    margin: 0 auto;
    padding-top: 31px;
}
.inputBody {
    background: #fff;
    padding-left: 15px;
    width: 94%;
    height: 70px;
    margin: 0px 0px 30px 0px;
    border-radius: 30px;
}
.dvTopinner a {
    background: #fff;
    margin-right: 1px;
    display: inline-block;
    height: 60px;
    border-radius: 30px;
    overflow: inherit;
}
.dvTopinner p {
    margin: 0;
    display: inline-block;
    height: 100%;
    font-size: 44px;
    padding-left: 30px;
    padding-right: 32px;
}
a.button2.reistr p {
    padding: 0px 20px;
}
a.button2.reistr {
    margin: 0;
    letter-spacing: -2px;
}

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
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
 <body>
    <div class="all">
        <a href="#" class="button"> <p> Наш SAMP Сервер! </p> </a>
        <div class="bar left">
            <div class="dvImg">
            <a href="#">
                <img src="http://img0.joyreactor.cc/pics/post/full/%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%B2-%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%80%D0%B8%D1%8F%D1%85-%D0%B5%D1%89%D1%91-%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D0%B0-647906.jpeg">
            </a>
            </div>
            <div class="dvIcons">
                <div class="icon left">
                <a href="#">    <img src="http://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"></a>
                </div>
                <div class="icon right">
                    <a href="#"><img src="http://img1.wikia.nocookie.net/__cb20140727180704/logopedia/images/thumb/f/fa/Twitch_logo_with_icon.svg/640px-Twitch_logo_with_icon.svg.png"></a>
                </div>
            </div>
            <div class="dvGrey"></div>
        </div>
        <div class="bar right">
            <div class="dvTop">
            <div class="dvTopinner">
                <div class="inputBody">
                    <input type="text" name="" class="input" id="" placeholder="login"> 
                </div>
                <div class="inputBody">
                    <input type="password" name="" class="input" id="" placeholder="password">  
                </div>
                <a href="" class="button2 enter">   <p>вход</p> </a>
                <a href="" class="button2 reistr">  <p>регистрация</p> </a>
            </div>
            </div>
            <div class="dvBottom"></div>
        </div>
        <div class="cls"></div>
    </div>
 </body>
 </html>

ошибки сами найдете
совет, используйте классы.
более менее нормальные уроки по верстке найдете здесь

верстка сайта от "а" до "я"
рекомендую посмотреть. Но лучше всего книги

@stjefim · 26.12.2014, 12:01 **[ТС]**

Огромное спасибо.+ кинул!

@WladVo · 18.11.2015, 22:37

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@stjefim 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 36

	Масштаб сайта по умолчанию 24.12.2014, 19:28. Показов 6820. Ответов 7 Метки нет (Все метки) Здравствуйте, у меня такая проблема я создавал сайт и тестировал только на своем ПК. Все размеры задавал через CSS в px. Когда после переустановки винды поменял разрешение, сайт уплыл в бок.(занимает только левую половину экрана) Раньше при масштабировании по умолчанию в браузере(Chrome) сайт отображался как я и хотел. А сейчас только при масштабе 150% Как сделать чтобы первоначально сайт занимал весь экран. В процентах указывать пробовал не получается! (создаю свой первый сайт) Заранее спасибо! 0

@SaumanBao 11 / 11 / 9 Регистрация: 24.12.2014 Сообщений: 39
	24.12.2014, 23:59
	Скиньте исходник. я вам помогу 0

@Al_lord 39 / 39 / 26 Регистрация: 11.01.2014 Сообщений: 343
	26.12.2014, 00:42
	Весь прикол в px) переделайте сайт, задавайте размеры в % ) Добавлено через 46 минут уфф да нет, вы явно не дружите с версткой ... дайте шаблон я попробую его сверстать как надо 0

@stjefim 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 36
	26.12.2014, 01:36 [ТС]
	Да я знаю что не дружу. Первый сайт в жизни делаю. По видео урокам делаю, днем скину шаблон, а может можете указать на ошибки. Заранее спасибо. 0

@stjefim 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 36
	26.12.2014, 12:01 [ТС]
	Огромное спасибо.+ кинул! 0

@WladVo 0 / 0 / 0 Регистрация: 18.11.2015 Сообщений: 6
	18.11.2015, 22:37
	<script language="javascript"> var y=1 function Size(step) { y=y+step; document.body.style.zoom = y; } </script> </head> <body> <p> <a href="javascript:void(0);" onclick="Size(-0.1);">Уменьшить</a>   <a href="javascript:void(0);" onclick="Size(0.1);">Увеличить</a> </p> 0