Как сделать так, чтобы не приходилось прокручивать страницу вправо/влево?

Question

Someone_some @Someone_some

Как сделать так, чтобы не приходилось прокручивать страницу вправо/влево?

Здравствуйте. В каждом макете задана определенная ширина(в моем случае около 1900px, измеряя с помощью инструмента "линия" в фотошопе) Это приходится учитывать при верстке, особенно когда определяешь с помощью margin расстояние между элементами. Но выходит так, что на моем компьютере всё проделанное отображается в неполном масштабе. Для того, чтобы увидеть, что слева приходится прокручивать страницу в левую сторону.

Отчего возникает подобная проблема? Как ее решить?

Вопрос задан более трёх лет назад
724 просмотра

10 комментариев

Подписаться 1 Простой 10 комментариев

Виталий Киренков @DeLaVega

Код где?

Написано более трёх лет назад
Виталий Киренков @DeLaVega

И если у вас макет 1900, контентная часть 1000/1200 (или что-то типо того), и вы в верстке блоку задаёте ширину 1900, то вы явно делаете вёрстку неправильно

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

1900 это ширина полотна, выбранная дизайнером, чтобы показать как всё будет выглядеть на больших экранах.
Измеряйте только контентную часть, это и будет нужная вам ширина. (Обычно в пределах от 960 до 1160).

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

Написано более трёх лет назад

Someone_some @Someone_some Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700&amp;subset=cyrillic-ext" rel="stylesheet">
</head>
<body>
	<section class="header">
		<div class="container"> 
<img src="img/logo.png" class="logotype"/>
<div class="panel"> 
<ul class="panel_services">
	<li class="panel_services_list">Инфраструктура</li>
	<li class="panel_services_list">Планировки и цены</li>
	<li class="panel_services_list">Материалы и отделки</li>
	<li class="panel_services_list">Документы</li>
	<li class="panel_services_list">Контакты</li>
</ul>

</div>
<div class="phone">
<div class="numbers"> 
+7(495)544-23-12 </div>
<a href="#" class="phone_button"> Заказать звонок </a>
</div>
		</div>


	</section>
</body>
</html>

*{
margin:0;
padding:0;
}

body {
font-family: 'Roboto Slab', serif;
padding: 0px;
margin: 0px;

}


.container {
  width: 1950px;
}
.header {

}
.logotype {
margin-left: 370px;
float: left;
}
.panel_services_list {
	list-style-type: none;
	display: inline;
	margin-left: 25px;
	
  width: 700px;
}
.panel_services {
    margin-left: 0; 
    padding-left: 0; 
  font-family: 'Roboto Slab', serif;
  float: right;
  margin-right: 500px;
  display: inline-block;
  
   }
 .phone {
  float: right;
 }

Написано более трёх лет назад

Виталий Киренков @DeLaVega

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

Написано более трёх лет назад
Виталий Киренков @DeLaVega

Господи Божечки мой. Вы всё сделали не так, как надо. Настоятельно рекомендую пройти хотя бы какие-то основы. Без обид, но тут подход вообще неверный.

Написано более трёх лет назад
Someone_some @Someone_some Автор вопроса

Виталий Киренков, https://codepen.io/Someone_Some/pen/KEzxPz

Написано более трёх лет назад
Виталий Киренков @DeLaVega

Someone_some, да я не гордый, сам уже сделал. Посмотрите любой сайт, который располагается по центру. Его реализацию. Как выглядит родительский контейнер, какая структура вложенных блоков. Сейчас ещё набегут любители флексбокс и начнут кидаться камнями, за то, что используете флоаты, а не флексы.

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

Someone_some, https://www.youtube.com/channel/UChUxTMjJGo-JDRY8p... отличные курсы и материалы

Написано более трёх лет назад
Someone_some @Someone_some Автор вопроса

Виталий Киренков, Вы правы, я буквально на днях начал изучать верстку. Именно поэтому столько пробелов в знаниях и непонимание основ, в том числе это касается и правильного использование width. В любом случае спасибо)

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 2

Комментировать

4 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Почему html,vs code.в текстовом файле открывается весь набранный код?
- 1 подписчик
- 9 часов назад
- 74 просмотра
2

ответа
HTML

+2 ещё

Простой
Как поставить видео на всю ширину флекс элемента?
- 1 подписчик
- 9 часов назад
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 19 часов назад
- 97 просмотров
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- вчера
- 160 просмотров
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 83 просмотра
3

ответа
CSS

Простой
Как сделать общий градиент для двух блоков?
- 1 подписчик
- 02 нояб.
- 100 просмотров
1

ответ
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 337 просмотров
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 106 просмотров
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 62 просмотра
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 110 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Настроить интеграцию между Voximplant Kit и Dialogflow CX

06 нояб. 2024, в 03:35

5000 руб./за проект

Оптимизация ботов телеграм

06 нояб. 2024, в 00:20

1000 руб./за проект

Смарт-контракт на блокчейне TON

06 нояб. 2024, в 00:03

40000 руб./за проект

И если у вас макет 1900, контентная часть 1000/1200 (или что-то типо того), и вы в верстке блоку задаёте ширину 1900, то вы явно делаете вёрстку неправильно
1900 это ширина полотна, выбранная дизайнером, чтобы показать как всё будет выглядеть на больших экранах.
Измеряйте только контентную часть, это и будет нужная вам ширина. (Обычно в пределах от 960 до 1160).

Но горизонтальной полосы прокрутки у вас все равно быть не должно, потому что дальше начинается адаптивная верстка.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700&subset=cyrillic-ext" rel="stylesheet"> </head> <body> <section class="header"> <div class="container"> <img src="img/logo.png" class="logotype"/> <div class="panel"> <ul class="panel_services"> <li class="panel_services_list">Инфраструктура</li> <li class="panel_services_list">Планировки и цены</li> <li class="panel_services_list">Материалы и отделки</li> <li class="panel_services_list">Документы</li> <li class="panel_services_list">Контакты</li> </ul> </div> <div class="phone"> <div class="numbers"> +7(495)544-23-12 </div> <a href="#" class="phone_button"> Заказать звонок </a> </div> </div> </section> </body> </html>

*{ margin:0; padding:0; } body { font-family: 'Roboto Slab', serif; padding: 0px; margin: 0px; } .container { width: 1950px; } .header { } .logotype { margin-left: 370px; float: left; } .panel_services_list { list-style-type: none; display: inline; margin-left: 25px; width: 700px; } .panel_services { margin-left: 0; padding-left: 0; font-family: 'Roboto Slab', serif; float: right; margin-right: 500px; display: inline-block; } .phone { float: right; }
Someone_some, есть такой сайт codepen. Принято туда выкладывать таки куски кода, чтобы можно было оперативно увидеть проблему.
Господи Божечки мой. Вы всё сделали не так, как надо. Настоятельно рекомендую пройти хотя бы какие-то основы. Без обид, но тут подход вообще неверный.
Виталий Киренков, https://codepen.io/Someone_Some/pen/KEzxPz
Someone_some, да я не гордый, сам уже сделал. Посмотрите любой сайт, который располагается по центру. Его реализацию. Как выглядит родительский контейнер, какая структура вложенных блоков. Сейчас ещё набегут любители флексбокс и начнут кидаться камнями, за то, что используете флоаты, а не флексы.
Someone_some, https://www.youtube.com/channel/UChUxTMjJGo-JDRY8p... отличные курсы и материалы
Виталий Киренков, Вы правы, я буквально на днях начал изучать верстку. Именно поэтому столько пробелов в знаниях и непонимание основ, в том числе это касается и правильного использование width. В любом случае спасибо)

Answer 1 · 2019-03-03 00:55:46

Родительскому блоку всего сайта ( wrapper ) добавьте следующие стили:
width: 100%;
max-width: 1920px;
margin: 0 auto;

Это уберет прокрутку, и поставит сайт, на мониторах больше 1920 пикс шириной, по центру.

Answer 2 · 2019-03-03 00:07:19

Вам надо активировать Windows, и делать верстку не 1900 пикселей в ширину, а взять 100% за ширину. У вас макет пустой. По бокам полно белого пространства. Явно задавайте ширину только для блока по центру.

Answer 3 · 2019-03-03 00:13:37

Dima Polos @dimovich85 Куратор тега CSS

https://u-academy.net/

Поищите материал по теме "адаптивная верстка".

Ответ написан более трёх лет назад

4 комментария

Как сделать так, чтобы не приходилось прокручивать страницу вправо/влево?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт