0

Как сделать так, чтобы ширина сайта изменялась по примеру vk.com ? То есть, у меня есть центральная часть шириной 960px, а отступы слева=справа=примерно 471,5 px.

Я хочу, чтобы при уменьшении экрана до 976px (17px ползунок) - центральная часть оставалась без изменения, а уменьшались одновременно лишь отступы слева-справа и так до 976px (или больше, если 976<=разрешение<=1903).

И как это реализовать, если у меня картинка 1903px по ширине, и нужно чтобы она тоже слева-справа уменьшалась, а её центральная часть (976px) оставалась на месте. Пытался сделать просто в %, но все летит при больших изменениях, а на вк.ру, к примеру, все плавно.

html:

body {                                /*Чтобы не было отступов с краю*/
margin:0px;
--size: 1903px;
}
.borders {                            /*границы сайта для удобства верстки*/
display: block;
width: 100%;
height: 1px;
transform: rotate(-90deg);
position: relative;
}
.border1 {                            /*левая граница*/
position: absolute;
left: 463px;
}
.border2 {                            /*правая граница*/
position: absolute;
right: 497px;
}
                                  /*Основная часть */
.header {
position: relative;                   /*у главного relative у многих его     дочерних - absolute, для удобства*/
display: block;
width: var(--size);
height: 50px;
background: #FF8080;
-webkit-user-select: none;            /*Нельзя выделять текст в голове (for     Chrome)*/
-moz-user-select: none;               /* for Mozilla Firefox */
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */
-o-user-select: none;                 /* Opera Presto (не поддерживается) */
}
.logo {
width: calc(var(--size) * 5);         /*Оптимизация размера*/
display: block;
width: 53px;
height: 20px;
position: relative;
left: 24.4%;
top: 0px;
font-size: 30px;
font-family: Times New Roman;
}
.header_text_inside {
position: relative;
width: calc(var(--size) * 5);         /*Оптимизация размера*/
color: black;
text-decoration-line: none;
font-size: 30px;
font-family: Times New Roman;
font-size: 22px; 
margin-left: 40px;                       
}
.header_text {
display: block;
width: 550px;
height: 30px;
position: absolute;
left: 36%;
top: 20px;
letter-spacing:0.5px;
}
.enter_button {
display: block;
width: 135px;
height: 25px;
background:#C2484C;
position: absolute;
left:67%; 
top:6px;
border-radius: 6px;
text-align: center;
line-height:24px;
}
.enter {
display: block;
width: 150px;
height: 50px;
}
.reg {
width: 110px;
height: 25px;
position: absolute;
left:67%; 
top:30px;
color: black;
text-decoration-line: none;
}
.enter_text {
color: black;
text-decoration-line: none;
}
.main_image {
max-width: 100%;
height: auto;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: none;
}
.topics {
position: absolute;
left:37%;
top:15%;
font-size: 40px;
font-family: Arial, Times New Roman ;
-webkit-user-select: none;            /*Нельзя выделять текст  (for Chrome)*/
-moz-user-select: none;               /* for Mozilla Firefox */
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */
-o-user-select: none;                 /* Opera Presto (не поддерживается) */
color: #191919;
}
.num_topics {
position: absolute;
left:37.2%;
top:21%;
font-size: 40px;
font-family: Arial, Times New Roman ;
-webkit-user-select: none;            /*Нельзя выделять текст  (for Chrome)*/
-moz-user-select: none;               /* for Mozilla Firefox */
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */
-o-user-select: none;                 /* Opera Presto (не поддерживается) */
color: #191919;
}
<div> <!-- границы -->
	<div class="border1 borders">
		<hr style="margin: 0px; display: block; height: 1px; width:1903px;">
	</div>
	
	<div class="border2 borders">
		<hr style="margin: 0px; display: block; height: 1px; width:1903px;">
	</div>
</div>
<div class="header">                     <!-- голова -->
	<div class="logo">                   <!-- лого -->
    	<h2>
    		<a href="#" style="color: black; text-decoration-line: none;">SE</a>
    	</h2>
    </div>
    <div class="header_text">            <!-- Разделы -->
    	<a class="header_text_inside prices" href="">Цены</a>
    	<a class="header_text_inside feedback" href="">Связаться с нами</a>
    	<a class="header_text_inside about_us" href="">О школе</a>
    </div>
    <div class="enter">                                 <!-- Вход -->
		<a href="#" class="enter_text">
			<div class="enter_button">Войти</div>       <!-- Кнопка входа -->
		</a>
		<a class="reg" href="#">Зарегестрироваться</a>  <!-- Зарегестрироваться -->  
	</div>
</div>
<div class="main">                        <!-- Первая видимая часть страницы -->                     
	<img class="main_image" src="/img/main_image.png">
	<strong><p class="topics">Тем</p></strong>
	<p class="num_topics">166</p>
</div>

css:

1
  • Ну во первых попробуйте вёрстку флекс\грид (можно комбинировать), а во вторых прочитайте про media queries и вобще просто посмотрите основы вёрстки.... Скачайте бутстрап, посмотрите как там всё устроено и т.д.
    – Nilsan
    31 янв 2019 в 10:52

1 ответ 1

0

Сделайте блок с шириной 976px (в примере container).

body {
  margin: 0;
}
.container {
  max-width: 976px;
  margin: auto;
  background-color: rgba(173, 216, 230, .4);
}

.header {
  background-color: coral;
}
.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
<div class="header">
  <div class="container header__container">
    <!-- голова -->
    <div class="logo">
      <!-- лого -->
      <h2>
        <a href="#" style="color: black; text-decoration-line: none;">SE</a>
      </h2>
    </div>
    <div class="header_text">
      <!-- Разделы -->
      <a class="header_text_inside prices" href="">Цены</a>
      <a class="header_text_inside feedback" href="">Связаться с нами</a>
      <a class="header_text_inside about_us" href="">О школе</a>
    </div>
    <div class="enter">
      <!-- Вход -->
      <a href="#" class="enter_text">
        <div class="enter_button">Войти</div>
        <!-- Кнопка входа -->
      </a>
      <a class="reg" href="#">Зарегестрироваться</a>
      <!-- Зарегестрироваться -->
    </div>
  </div>
</div>
<div class="container">
  <div class="main">
    <h1>Main</h1>
  </div>
</div>

p.s. Вопрос про картинку не понятен.

  • переменные CSS нужно прописывать в :root селекторе, так у них будет максимальная специфичность
  • если значение свойств 0, его стоит прописовать без ед. измерения
  • Не стройте разметку страницы на position:absolute, есть более профильные свойства (Flex, CSS Grid и float на крайний случай)
  • width: calc(var(--size) * 5) Зачем вам это свойство?
5
  • width: calc(var(--size) * 5) - это были мои тщетные попытки сделать это резиновым, собственно говоря, это и есть мой вопрос, ибо у меня это не получается. Я пытался 31 янв 2019 в 12:03
  • Вообще, то, что вы написали - и есть чего я хотел. => вопрос: разметку страницы некоторые делают на relative & absolute (для дочерних), а вы сделали вот так и это намного проще - последнее и есть главная причина выбора "более профильных свойств"? (Спасибо, про них почитаю!) 31 янв 2019 в 12:06
  • Для дого что бы сайт был "резиновый"/адаптивный, вы должны задать тэг <meta name="viewport" content="width=device-width, initial-scale=1.0"> и использовать % для размеров, media зпросы. Верстка на absolute это старая практика, сейчас я такое встречаю очень редко. Позиционирование используют под конкретные задачи.
    – E_K
    31 янв 2019 в 12:18
  • Про картинку - мне нужно, чтобы все так же тянулось, как вы написали, но с картинкой в части main. Ширина моего экрана, к примеру, 1920, а картинка размером 1903 x height(не помню). Чтобы при изменении width на к примеру 960, картинка не была видна 100%, а как раз таки её центральная соответственно часть 960px. 31 янв 2019 в 12:47
  • А то, что слева-справа от main - уходило или прибавлялось в зависимости от ширины экрана от (width-min: 960 px) and (width-max:1920 px). Это как то реализуется с помощью @media screen ... или есть иной метод? 31 янв 2019 в 12:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.