При увеличении масштаба страницы, весь текст съезжает

@NoInfo · Регистрация: 02.01.2018

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

Я вроде понял в чём проблема, но это не точно. Я думаю, это случается в связи с тем, что у меня указана ширина в процентах, а не в пикселях. Но не указывать же везде "width: 1920px;", а вдруг у кого-то разрешение 1920x1080? Есть ли другое решение этой проблемы? Может как-то указать соотношение сторон, т.к. у меня 2 монитора с разным разрешением, а вдруг у кого-то оно 800x600(ну к примеру XD), то у него будет съезжать шрифт или например у кого-то телефон(я сейчас просто так это ляпнул, я видел на некоторых сайтах, что там в head указывать что-то нужно).

@Freeze_Breeze · 02.01.2018, 22:52

NoInfo, Вы о чем?

@NoInfo · 02.01.2018, 22:55 **[ТС]**

Ну смотрите, есть обычная страница, там есть "Главная, обо мне, инфо и т.д.", при увеличении масштаба страницы, они просто наезжают друг на друга, текст из header переезжает в center и всякая вакханалия.

@Freeze_Breeze · 02.01.2018, 23:02

NoInfo, Покажите весь код, разберемся. Так я Вам ничего сказать не могу, вариантов может быть масса.

@NoInfo · 02.01.2018, 23:05 **[ТС]**

Если у Вас сейчас глаза вытекут, простите, я не очень красиво код пишу

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>MadRaid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../CSS/main-style.css" />
    <meta name="keywords" content="mad, raid, shop, безумный, рейд, врыв" />
    <meta name="description" content="Продажа/заказ сайтов/программ"/>
    <link href="../Image/Icon.png" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<header>
    <div class="head">
        <a id="MadRaid" href="main.html">MadRaid</a>
        <a id="about" href="about.html">О нас</a>
        <input type="text" class="field" placeholder="Потерялся?" />
        <span class="right">
            <span title="Войти">
                <a href="auth.html" class="LoginAndCreate">Войти</a>
            </span>
            <span title="Зарегистрироваться">
                <a href="reg.html" class="LoginAndCreate">Зарегистрироваться</a>
            </span>
        </span>
    </div>
</header>
<center>
    <ul class="panel">
        <li id="mainP">
            <a href="main.html">Главная</a>
        </li>
        <li id="bosp">              <!-- bosp - buy/order site/programs -->
            <a href="bosp.html">Купить/заказать сайт/программу</a>
        </li>
        <li id="projects">
            <a href="projects.html">Проекты</a>
        </li>
        <li id="aboutme">
            <a href="aboutme.html">Обо мне</a>
        </li>
        <li id="support">
            <a href="support.html">Поддержка</a>
        </li>
 
    </ul>
</center>
<footer>
</footer>
</body>
</html>

CSS

@charset "utf-8";
* {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    outline: none;
    text-decoration: none;
}
 
header {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #817E7E;
    background-color: #575757;
}
 
header .head {
    width: 100%;
    height: 100px;
    font-family: "Segoe Print", sans-serif;
}
 
header .head #MadRaid {
    padding-left: 15px;
    margin-right: 30px;
    font-size: 3em;
    color: #8D6262;
}
 
header .head #MadRaid:hover {
    color: #AA8383;
}
 
header .head #about {
    margin-right: 30px;
    font-size: 2em;
    color: #C9C9C9;
}
 
header .head #about:hover {
    color: #F2F2F2;
}
 
header .head input[type=text].field {
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border: 2px solid grey;
    border-radius: 20px;
    font-family: "Segoe Print", sans-serif;
    font-size: 1em;
}
 
header .head input[type=text].field:hover {
    border: 2px solid #FF0000;
    -moz-transition: all.6s ease;
    -webkit-transition: all.6s ease;
    -ms-transition: all.6s ease;
    -o-transition: all.6s ease;
}
 
header .head input[type=text].field:focus {
    border: 3px solid #FF0000;
    border-radius: 20px;
    box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
    -moz-transition: all.6s ease;
    -webkit-transition: all.6s ease;
    -ms-transition: all.6s ease;
    -o-transition: all.6s ease;
}
 
header .head span {
    margin-top: 15px;
    margin-right: 15px;
}
 
header .head span .LoginAndCreate {
    color: #C9C9C9;
    font-size: 1.5em;
}
 
header .head span .LoginAndCreate:hover {
    color: #F2F2F2;
}
 
center {
    width: 100%;
    min-height: 600px;
    background-color: #616161;
    padding-top: 4px;
}
 
center .panel {
    font-size: 2em;
    border-bottom: 1px solid grey;
}
 
center .panel .page {
    width: 1000px;
    height: 1000px;
}
 
center .panel li a {
    color: #FAFAFA;
}
 
center .panel li a:hover {
    color: #F49494;
    border-top: 5px solid #F49494;
}
 
footer {
    width: 100%;
    height: 100px;
    border-top: 1px solid #817E7E;
    background-color: #6B6B6B;
}
 
 
/* Other */
 
.right {
    float: right;
}
 
.left {
    float: left;
}
 
.clear {
    clear: both;
}
 
.panel li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
}
 
/* Select */
 
::selection {background: #C0C0C0; color: #fff;}
::-moz-selection {background:   #C0C0C0; color: #fff;}
::-webkit-selection {background:    #C0C0C0; color: #fff;}
::-ms-selection {background:    #C0C0C0; color: #fff;}

@Freeze_Breeze · 02.01.2018, 23:17

NoInfo, и что Вам в нем не нравится, все работает так как положено. Статическая верстка. Только width: 100%; и height: 100%; которые Вы указали абсолютно ничего не делают в коде, так как Вы используете блочный элемент div, который всегда будет растягиваться на всю ширину окна браузера (то есть на все 100%, браузер за вас уже написал это свойство) и высота div будет равняться высоте вашего содержимого блока (контента). Если Вам нужен контейнер, тогда сделайте так:

CSS

.wrapper {
     max-width: 1920px;
     width: 100%;
     margin: 0 auto;
}

@NoInfo · 02.01.2018, 23:20 **[ТС]**

Вы меня скорее всего не поняли. На этом форуме можно скрины отправлять?

@Freeze_Breeze · 02.01.2018, 23:21

NoInfo, нужно

@NoInfo · 02.01.2018, 23:21 **[ТС]**

Я в том смысле, как их отправлять

@Freeze_Breeze · 02.01.2018, 23:23

тут

@NoInfo · 02.01.2018, 23:29 **[ТС]**

Freeze_Breeze, Спасибо! Вот скриншоты:

@Freeze_Breeze · 02.01.2018, 23:34

NoInfo, а он должен, что делать по вашему?

@Fedor92 · 02.01.2018, 23:35

NoInfo, пример:

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>MadRaid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../CSS/main-style.css" />
    <meta name="keywords" content="mad, raid, shop, безумный, рейд, врыв" />
    <meta name="description" content="Продажа/заказ сайтов/программ"/>
    <link href="../Image/Icon.png" rel="shortcut icon" type="image/x-icon">
    <meta name="viewport" content="width=device-width">
    <style>
* {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    outline: none;
    text-decoration: none;
}
 
header {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #817E7E;
    background-color: #575757;
}
 
header .head {
    width: 100%;
    height: 100px;
    font-family: "Segoe Print", sans-serif;
}
 
header .head #MadRaid {
    padding-left: 15px;
    margin-right: 30px;
    font-size: 3em;
    color: #8D6262;
}
 
header .head #MadRaid:hover {
    color: #AA8383;
}
 
header .head #about {
    margin-right: 30px;
    font-size: 2em;
    color: #C9C9C9;
}
 
header .head #about:hover {
    color: #F2F2F2;
}
 
header .head input[type=text].field {
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border: 2px solid grey;
    border-radius: 20px;
    font-family: "Segoe Print", sans-serif;
    font-size: 1em;
}
 
header .head input[type=text].field:hover {
    border: 2px solid #FF0000;
    -moz-transition: all.6s ease;
    -webkit-transition: all.6s ease;
    -ms-transition: all.6s ease;
    -o-transition: all.6s ease;
}
 
header .head input[type=text].field:focus {
    border: 3px solid #FF0000;
    border-radius: 20px;
    box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
    -moz-transition: all.6s ease;
    -webkit-transition: all.6s ease;
    -ms-transition: all.6s ease;
    -o-transition: all.6s ease;
}
 
header .head span {
    margin-top: 15px;
    margin-right: 15px;
}
 
header .head span .LoginAndCreate {
    color: #C9C9C9;
    font-size: 1.5em;
}
 
header .head span .LoginAndCreate:hover {
    color: #F2F2F2;
}
 
center {
    width: 100%;
    min-height: 600px;
    background-color: #616161;
    padding-top: 4px;
}
 
center .panel {
    font-size: 2em;
    border-bottom: 1px solid grey;
}
 
center .panel .page {
    width: 1000px;
    height: 1000px;
}
 
center .panel li a {
    color: #FAFAFA;
}
 
center .panel li a:hover {
    color: #F49494;
    border-top: 5px solid #F49494;
}
 
footer {
    width: 100%;
    height: 100px;
    border-top: 1px solid #817E7E;
    background-color: #6B6B6B;
}
 
 
/* Other */
 
.right {
    float: right;
}
 
.left {
    float: left;
}
 
.clear {
    clear: both;
}
 
.panel li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
}
 
/* Select */
 
::selection {background: #C0C0C0; color: #fff;}
::-moz-selection {background:   #C0C0C0; color: #fff;}
::-webkit-selection {background:    #C0C0C0; color: #fff;}
::-ms-selection {background:    #C0C0C0; color: #fff;}
 
@media screen and (max-width:1200px){
    center .panel{
        font-size:1.5em
    }
}
 
@media screen and (max-width:990px){
 
    header .head #MadRaid{
        font-size:2em
    }
    
    header .head #about{
        font-size:1.5em
    }
 
    header .head span .LoginAndCreate{
        font-size:1em
    }
    
    center .panel{
        font-size:1.1em
    }
}
 
    </style>
</head>
<body>
<header>
    <div class="head">
        <a id="MadRaid" href="main.html">MadRaid</a>
        <a id="about" href="about.html">О нас</a>
        <input type="text" class="field" placeholder="Потерялся?" />
        <span class="right">
            <span title="Войти">
                <a href="auth.html" class="LoginAndCreate">Войти</a>
            </span>
            <span title="Зарегистрироваться">
                <a href="reg.html" class="LoginAndCreate">Зарегистрироваться</a>
            </span>
        </span>
    </div>
</header>
<center>
    <ul class="panel">
        <li id="mainP">
            <a href="main.html">Главная</a>
        </li>
        <li id="bosp">              <!-- bosp - buy/order site/programs -->
            <a href="bosp.html">Купить/заказать сайт/программу</a>
        </li>
        <li id="projects">
            <a href="projects.html">Проекты</a>
        </li>
        <li id="aboutme">
            <a href="aboutme.html">Обо мне</a>
        </li>
        <li id="support">
            <a href="support.html">Поддержка</a>
        </li>
 
    </ul>
</center>
<footer>
</footer>
</body>
</html>

Довольно топорно, но суть отображает...

@NoInfo · 02.01.2018, 23:39 **[ТС]**

Freeze_Breeze, ну либо не изменять своё местоположение, либо header должен расширяться, но min-height: 100px не работает

Добавлено через 22 секунды
Fedor92, не работает

@Fedor92 · 02.01.2018, 23:48

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

Fedor92, не работает

Да ладно...) 800 на 600 Если что я не только стили менял, там ещё в html одна строчка....))

При увеличении масштаба страницы, весь текст съезжает

@NoInfo · 02.01.2018, 23:55 **[ТС]**

Почему же через указание стилей в самом html работает лучше, чем через подключение самого стиля в линке? Или Вы что-то изменили и я не увидел?)

@Fedor92 · 03.01.2018, 00:10

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

Или Вы что-то изменили и я не увидел?)

Вся суть в одной строчке:

HTML5

1	<meta name="viewport" content="width=device-width">

без неё стили где бы они не находились работать не будут...

Так называемый вьюпорт... )) В стилях заданы медиазапросы для изменения размера шрифта на разных разрешениях...

@NoInfo · 03.01.2018, 00:39 **[ТС]**

Всё! Спасибо! Я разобрался! Я в CSS указал для разных разрешений, разный параметры страницы через @media screen and (max-width:800px) ну и там вместо 800px другие! Спасибо ещё раз!

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 23:29 [ТС]	11
	Freeze_Breeze, Спасибо! Вот скриншоты: Миниатюры 0

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 23:39 [ТС]	14
	Freeze_Breeze, ну либо не изменять своё местоположение, либо header должен расширяться, но min-height: 100px не работает Добавлено через 22 секунды Fedor92, не работает 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.01.2018, 22:52	2
	NoInfo, Вы о чем? 0

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 22:55 [ТС]	3
	Ну смотрите, есть обычная страница, там есть "Главная, обо мне, инфо и т.д.", при увеличении масштаба страницы, они просто наезжают друг на друга, текст из header переезжает в center и всякая вакханалия. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.01.2018, 23:02	4
	NoInfo, Покажите весь код, разберемся. Так я Вам ничего сказать не могу, вариантов может быть масса. 0

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 23:20 [ТС]	7
	Вы меня скорее всего не поняли. На этом форуме можно скрины отправлять? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.01.2018, 23:21	8
	NoInfo, нужно 0

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 23:21 [ТС]	9
	Я в том смысле, как их отправлять 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.01.2018, 23:23	10
	тут Миниатюры 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.01.2018, 23:34	12
	NoInfo, а он должен, что делать по вашему? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	02.01.2018, 23:48	15
	Сообщение от NoInfo Fedor92, не работает Да ладно...) 800 на 600 Если что я не только стили менял, там ещё в html одна строчка....)) 0

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	02.01.2018, 23:55 [ТС]	16
	Почему же через указание стилей в самом html работает лучше, чем через подключение самого стиля в линке? Или Вы что-то изменили и я не увидел?) 0

	03.01.2018, 00:39

@NoInfo 0 / 0 / 0 Регистрация: 02.01.2018 Сообщений: 9
	03.01.2018, 00:39 [ТС]	18
	Всё! Спасибо! Я разобрался! Я в CSS указал для разных разрешений, разный параметры страницы через @media screen and (max-width:800px) ну и там вместо 800px другие! Спасибо ещё раз! 0