Только начинаю изучать веб-языки. При уменьшении или увеличении масштаба дивы с содержимым растягиваются. Как сделать так, чтобы не растягивались, как на сайте ВК, Мвидео и прочих подобных сайтах. Пытался разобраться в кодах этих страниц, но не понял как у них все работает(
body {
/*background-image:url("DarkFon1.2.png");*/
background-attachment: fixed;
}
header {
border-bottom: 30px solid;
border-top: 30px solid;
border-image: url(Fon6.png) 170 round;
background-image:url("Fon2.png");
background-attachment: fixed;
/*box-shadow: 0 0 0 1px brown;*/
}
.content{
overflow: hidden;
}
.left{
margin-bottom: 20px;
width: 5%;
min-height: 500px;
float: left;
}
.center{
border-radius: 20px;
margin-bottom: 20px;
width: 90%;
min-height: 500px;
float: left;
/*background-color: brown;*/
}
.center_left{
border-radius: 15px;
float: left;
padding: 10px;
background-color: black;
width: 30%;
min-height: 900px;
margin: 10px;
}
.center_center{
min-height: 900px;
width: 64.8%;
border-radius: 15px;
padding: 10px;
margin: 10px;
float: left;
background-color: black;
}
.right{
margin-bottom: 20px;
width: 5%;
min-height: 500px;
float: left;
}
/*-------------------------------------------PODVAL------------------------------------------*/
.podval{
min-height: 100px;
border-top: 30px solid;
border-image: url(Fon6.png) 170 round;
padding-top: 30px;
padding-bottom: 30px;
/*text-align: center;*/
background-color: brown;
color: white;
font-size:30px;
font-family: fantasy;
}
.KAYNE{
color:white;
}
.Website{
font-size: 40px;
color: black;
}
.ssilka{
text-decoration: none;
}
.ssilka:hover .Website{
color: white;
}
.ssilka:hover .KAYNE{
color: black;
}
.ssilka_kws{
text-align: center;
float: left;
width: 33%;
border-right: 1px solid white;
border-left: 1px solid white;
}
.contacts{
text-align: center;
float: left;
width: 33%;
}
.info{
text-align: center;
width: 33%;
float: left;
}
.info_ssilki{
list-style:none;
font-size: 20px;
}
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------СМЕНА ФОНА--------------------------------------------------*/
.smenfon{
margin-top: 15px;
transition: 1s;
position: fixed;
left: -150px;
border-radius: 0px 15px 15px 0px;
padding: 10px;
font-size: 30px;
padding-right: 200px;*/
border: none;
border-style: none;
color: white;
background-color: brown;
font-family: fantasy;
width: 150px;
height: 100px;
outline: none;
text-align: left;
}
.smenfon:hover{
left: 0px;
border: none;
border-style: none;
color: white;
background-color: indianred;
padding-right: 10px;
cursor:pointer;
}
/*-------------------------------------------------------------------------------------------*/
/*--------------------------------------ЛОГОТИП СВЕРХУ СЛЕВА---------------------------------*/
.logo{
margin: 10px;
margin-right: 0px;
font-family: fantasy;
font-size: 30px;
float: left;
}
.logo_kayne{
color: brown;
}
.logo_website{
font-size: 16px;
color: black;
}
.logo_ssilka{
text-decoration: none;
}
/*-------------------------------------------------------------------------------------------*/
.KWS{
text-decoration: none;
color: black;
}
* {
margin: 0;
padding: 0;
}
nav{
position: sticky;
top: 0px;
}
nav ul{
list-style: none;/*убираем маркер*/
background-image: url(Fon2.png);
font-family: fantasy;
font-size: 30px;
}
nav>ul>li{
float: left; /*выравнивание по стороне (здесь с левой)*/
}
nav ul::after {
content: "";
display: block;
clear: both;
}
nav ul li a{
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: brown;
}
nav ul li a:hover {
background-color: brown;
color: ghostwhite;
}
nav ul ul{
display: none;
position: absolute;
}
nav ul li:hover ul{
display:block;
}
/*.otstup{
padding: 5px 0px;
}*/
/*-----------------------------------РЕГИСТРАЦИЯ-------------------------------------*/
.regi{
transform: translate(-167px) rotate(-90deg) scaleY(1.1);
float: left;
margin-top: 87px;
font-size: 38px;
letter-spacing: 2px;
color: white;
border-bottom: 5px solid;
}
form{
transform: translate(-240px);
float: right;
}
.fs1{
transition: 0.5s linear;
position: fixed;
right: -545px; /* Расстояние от правого края окна браузера */
/*top: 20%; /* Расстояние сверху */
border-radius: 15px 0px 0px 15px;
padding: 20px;
padding-left: 80px;
background-color: brown;
margin-top: 15;
float: right;
font-family: fantasy;
text-align: right;
}
.fs1:hover{
transform: translateX(-290px);
}
div label{
float: left;
font-size: 40;
color: white;
}
.knopka{
border-radius: 5px;
border-color:white;
border-style: solid;
background-color:;
transform: translate(-50px);
width: 150px;
height: 30px;
}
.knopka:hover{
background-color:forestgreen;
border-color: forestgreen;
color: white;
}
div input{
border-color:white;
border-style: solid;
border-radius: 5px 0px 0px 5px;
font-size: 20px;
margin: 5px;/*задаю отступы полей ввода друг от друга*/
width: 250px; /*устанавливаю размер полей ввода*/
height: 35px; /*устанавливаю размер полей ввода*/
color: black;
background-color: white;
outline: none;
transform: translateY(-5px); /*из-за изменения размера полей ввода они немного сместились вниз. Этой командой ставлю их на место*/
}
/*-----------------------------------------------------------------------------------*/
<!DOCKTYPE html>
<html>
<title>KayneWeb</title>
<head>
<link href="CSS/Fon.css" rel="stylesheet" type="text/css">
<header>
<h1 id="header" align="center"><a href="KayneSite.html" class="KWS"><span style="font-family: fantasy; font-size:50; font-weight:200; color: brown">KAYNE</span><span style="font-family: fantasy; font-size:25; font-weight:100;">WebSite.</span></a></h1></header>
<nav class="otstup">
<div class="logo_div">
<h1 class="logo"><a href="KayneSite.html" class="logo_ssilka"><span class="logo_kayne">KAYNE</span><span class="logo_website">WebSite.</span></a></h1>
</div>
<ul>
<li><a href="#">Месяц</a>
<ul>
<li><a href="#">Январь</a></li>
<li><a href="#">Февраль</a></li>
<li><a href="#">Март</a></li>
</ul>
</li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Код</a></li>
<li><a href="#">Фото</a></li>
</ul>
</li>
</ul>
</nav>
<button class="smenfon" id='changeimage'>Сменить тему</button>
<div class="fs1">
<form>
<label for="email">Логин</label><br><input type="email" name="useremail" required="required" placeholder="[email protected]"><br>
<label for="password">Пароль</label><br><input type="password" name="userpas" required="required" placeholder="Ваш пароль"><br>
<input class="knopka" type="submit" value="Отправить">
</form>
<h1 class="Regi">Регистрация</h1>
</div>
</head>
<body>
<style type="text/css">
.box1{
font-size: 20px;
text-align: center;
display: flex;
justify-content: center;
list-style-type: none;
padding-left: 0;
padding: 10px 0px;
}
.box1>li{
transition: 0.1s linear;/*
transform: translate(0px);/*задает НАЧАЛЬНОЕ смещение на нное кол-во px*/
/*transition: background-image 0.1s 0.1s ease; /*изменяет время смены картинки*/
border-top: 60px solid;
border-image: url(CSS/Fon6.png) 200 round;
margin: 0 50px;
padding: 5px 15px;
background-image: url(CSS/Fon2.png);
/*box-shadow: 0 0 0 10px brown;*/
/*box-shadow: 0 0 20px;*/
border-radius: 0 0 30px 30px;
}
.box1>li:hover{
transform: translate(0,20px);/*задает КОНЕЧНОЕ смещение на нное кол-во px*/
/*transform: scale(1.05);/*scale() задает изменение размера элемента в нное кол-во раз*/
/*background-image: url(CSS/DarkFon2.png);*/
/*box-shadow: 0 0 20px brown;*/
box-shadow: 15px 15px brown;
}
.li>info{
border-image: 100 round;
}
</style>
<!--
<ul class="box1">
<li><h1><span style="color: brown; font-family: fantasy; font-weight: 70; ">Контакты</span></h1>
<a href="https://vk.com/k_kayne" target="_blank" title="Вконтакте"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/vklogo.png" width="50" hspace="10"></a>
<a href="https://www.instagram.com/kirill_koshurov/" target="_blank" title="Инстаграм"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Instagram.png" width="47"></a></li>
<li><h1><span style="color: brown; font-family: fantasy; font-weight: 70;">Загрузки</span></h1>
<a href="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Анатомия.zip" target="_blank" title="Нажмите, чтобы скачать файл"><input value="Анатомия" type="button" style="font-family:fantasy;color:darkred; font-size:30; background:white"></a></li>
<li><div class="info"><h1><span style="color: brown; font-family: fantasy; font-weight: 70;">Инфо</span></h1>
<a title="[email protected]" href="mailto:[email protected]"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Gmail-logo.png" width="70" height="50"></a></div></li>
</ul>-->
<br>
<div class="content">
<div class="left"></div>
<div class="center">
<div class="center_left">левый центр</div>
<div class="center_center">центр центр</div>
</div>
<div class="right"></div>
</div>
<script language="JavaScript">
const images = [
'CSS/DarkFon1.3.png',
'CSS/DarkFon2.png'
];
let current = 0;
document.getElementById('changeimage').addEventListener('click', function() {
current = (current + 1) % images.length;
setimage(current);
});
function setimage(x) {
document.body.style.backgroundImage = `url('${images[x]}')`;
}
setimage(0);
</script>
<h1 align="center"><a href="#header" align="center"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Стрелка.png" width="100" height="100"></a></h1>
<br>
<div class="podval">
<div class="contacts">
<span>Контакты:</span><br>
<a href="https://vk.com/k_kayne" target="_blank" title="Вконтакте"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/vklogo.png" width="30" hspace="10"></a>
<a href="https://www.instagram.com/kirill_koshurov/" target="_blank" title="Инстаграм"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Instagram.png" width="30"></a>
</div>
<div class="ssilka_kws">
<h1><a class="ssilka" href="KayneSite.html"><span class="KAYNE">KAYNE</span><span class="Website">WebSite.</span></a></h1>
</div>
<div class="info">Инфо:
<ul class="info_ssilki">
<li>[email protected]</li>
</ul>
</div>
</div>
</body>
</html>