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

Question

Someone_some @Someone_some

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

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

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

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

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 комментария

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

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

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

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

JavaScript

+4 ещё

Простой
Как записать результаты работы цикла Thymeleaf в переменную JavaScript?
- 1 подписчик
- 9 часов назад
- 35 просмотров
1

ответ
CSS

+1 ещё

Сложный
SVG ломается при стандартной анимации?
- 1 подписчик
- 14 часов назад
- 61 просмотр
0

ответов
Вёрстка

Простой
Giphy API как получить прямую ссылку на скачивание гифки, чтоб потом ее можно было вставить в img?
- 2 подписчика
- 20 часов назад
- 88 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- 08 мая
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- 08 мая
- 93 просмотра
1

ответ
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- 07 мая
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- 06 мая
- 45 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 06 мая
- 53 просмотра
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 06 мая
- 85 просмотров
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработать обмен заказами 1с

11 мая 2024, в 00:19

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

Разработка сайта (верстка)

10 мая 2024, в 23:51

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

Опубликовать приложение в Google play

10 мая 2024, в 23:33

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

И если у вас макет 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 комментария

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

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

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

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