Макеты для тренировок

Antifreez · 20.Октябрь.2018 20:11:50

Прошу помочь разобраться. Взял первый макет для тренировки верстки. Изучил макет и сразу же возник вопрос. В макете есть раздел картинок-ссылок, занимающих всю ширину страницы (см. вложенный рисунок). Насколько я понимаю, данный блок должен быть фиксированной ширины, и если его верстать по размерам макета, то у сайта появляется горизонтальная полоса прокрутки, т.к. в окно он не влезает.

Это считается нормальным?
или данный блок должен вести себя как-то по другому?
или надо оптимизировать ширину, чтобы блок влезал в окно браузера при разрешении 1920х1080, например?

ПС. Еще если честно не могу вкурить, почему блок шириной 1600px сайта не влезает в экран монитора с разрешением 1920х1080. Извините, если вопрос глупый

Ineska · 20.Октябрь.2018 21:12:54

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

Antifreez · 20.Октябрь.2018 23:32:45

Спасибо за Ваш отклик. Касательно блока с картинками мне сейчас нечего показать. Но по поводу “не влезает” можно другой пример привести. Если минимальная ширина body такая как “закомменченная”, то все выглядит хорошо. Если увеличить до 1600px, то появляется горизонтальная полоса прокрутки. Непонятно почему, если разрешение монитора по ширине 1920.

* {
padding: 0;
margin: 0;

}

body {
/min-width: 1230px;/
min-width: 1600px;
font-size: 14px;
font-family: “Open Sans”, sans-serif;
color: #29323c;
background-color: #ffffff;
}

.container {
width: 1170px;
margin: 0 auto;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

header {
height: 750px;
box-sizing: border-box;
background-image:
linear-gradient(
rgba(72, 85, 99, 0.7),
rgba(41, 50, 60, 0.7)),
url("…/img/header-bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.header-nav {
padding-top: 30px;
}

.header-logo {
float: left;
}

.header-menu-icon {
display: block;
float: right;
margin-left: 15px;
margin-top: 1px;
}

.header-menu-icon div {
width: 21px;
height: 2px;
background-color: #f2f2f2;
}

.header-menu-icon .block1 {
margin-bottom: 5px;
}

.header-menu-icon .block3 {
margin-top: 5px;
}

.header-menu {
float: right;
font-family: “Montserrat”, sans-serif;
font-weight: 600;
font-size: 14px;
color: #f2f2f2;
text-transform: uppercase;
text-decoration: none;
}

.header-promo {
font-family: “Montserrat”, sans-serif;
text-align: center;
color: #e8e8e8;
padding-top: 200px;
}

.header-promo h1 {
font-size: 36px;
letter-spacing: -0.05em;
font-weight: bold;
line-height: 40px:
}

.header-promo p {
font-family: “Open Sans”, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: -0.025em;
width: 645px;
margin: 0 auto;
margin-top: 25px;
}

Ineska · 21.Октябрь.2018 05:32:01

html-код тоже нужен мне.

Antifreez · 21.Октябрь.2018 07:15:23

Почему-то криво код сюда вставляется как текст, поэтому отправляю скриншот

Antifreez · 21.Октябрь.2018 07:16:59

<!DOCTYPE HTML>
<html lang="eng">
<head>
  <meta charset="utf-8">
  <title>zet</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:normal,600,bold|Open+Sans:normal,300"   rel="stylesheet">
</head>
<body>
  <header>
   <div class="container">
  		<nav class="header-nav clearfix">
  		  <a class="header-logo" href="#">
  		  	<img src="img/ZET.png" alt="ZET">
  		  </a>	 		
  		  <a class="header-menu-icon" href="#">
  		     <div class="block1"></div>
  		     <div class="block2"></div>
  		     <div class="block3"></div>
  		  </a>
  		  <a class="header-menu" href="#">Menu</a>
  		  
  		</nav>
  		<div class="header-promo">
  			<h1>Something Nothing</h1>
  			<p>Enean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim iam ultricies nisi eleifend tellus.</p>
  		</div>
   </div>
  </header>

Ineska · 21.Октябрь.2018 10:10:25

Вот как выглядит ваш код. Здесь не может быть горизонтального скролла, потому что всё, что есть, у вас находится внутри .container, и его ширина фиксирована - 1170px.

Antifreez · 21.Октябрь.2018 14:10:25

У Вашей ссылки истёк срок., насколько я понял. Не успел посмотреть.

container находится внутри body, которому задана минимальная ширина 1600px, поэтому это и будет ширина содержимого, которая создаёт горизонтально прокрутку

Ineska · 21.Октябрь.2018 14:13:22

Cсылка до сих пор доступна.

Antifreez · 21.Октябрь.2018 14:29:29

Влюбом случае, я выше отправил Вам код и скриншот того, как этот код выглядит у меня в браузере, снизу видно полосу прокрутки

Ineska · 21.Октябрь.2018 14:33:26

Не может быть там полосы прокрутки при условии, что разрешение устройства действительно 1920px.
https://codepen.io/IneSSka/full/vVrMLa/

Antifreez · 21.Октябрь.2018 14:42:16

Разрешение монитора стоит 1920х1080. Браузер развернут на весь экран, какое-то количество пикселей съедает вертикальная полоса прокрутки справа. Все как есть. Либо я что-то упускаю из вида либо чего-то просто не знаю)

Ineska · 21.Октябрь.2018 14:44:05

А по факту оно равно 1920?

Antifreez · 21.Октябрь.2018 14:48:39

Нашёл) с разрешением все нормально, но в настройках параметр масштабирования стоял 125% почему-то, не видел его раньше и не знаю откуда он взялся. Спасибо Вам)

Antifreez · 21.Октябрь.2018 14:49:27

В настройках системы, не браузера

Cyril · 11.Март.2019 15:04:11

У меня такое с firefox’ом было, думал ноутбук выкидывать…