Как сделать чтобы страница не растягивалась на широком мониторе

@АлКруглов · Регистрация: 11.12.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! У меня три технически простеньких сайта (только тексты и картинки в текстах). Делал их еще когда были только "квадратные" мониторы. На современных широких мониторах строки текста становятся слишком длинные, картинки расталкивают текст и вообще некрасиво. Есть ли способ сделать так, чтобы на широких мониторах страница оставалась примерно такой же (пропорционально) как на узком, то есть, чтобы слева и справа появлялись бы более широкие поля (а на узких мониторах их бы не было)?

@CyberGeniuz · 11.12.2015, 17:23

Это называется резиновая верстка. Использование процентов место пикселей обычно решает проблему.

@Анар · 11.12.2015, 17:34

АлКруглов, пользуйтесь max-width.

@АлКруглов · 11.12.2015, 17:52 **[ТС]**

Спасибо! Простите мою чайниковость. Но я вас не совсем понял. Картинки я и так задаю в процентах, от высоты экрана. А текст расползается. Если я задам большие поля или возьму все в таблицу и укажу таблице проценты от ширины экрана, то тогда уже на узких мониторах и планшетах будет плохо. там-то поля не нужны. - Но вот посмотрите первые страницы Яндекса или Мейла или хоть газеты "Взгляд": на узком мониторе и планшете страница занимает все поле по ширине, а на широком мониторе страница идет посередине, а слева и справа остаются широкие пустые поля. Вот как они этого достигли?

@Анар · 11.12.2015, 18:01

АлКруглов, ну нужно сайт смотреть. А так у body максимальную ширину указываете и margin: 0 auto; обычно этого достаточно.

@АлКруглов · 12.12.2015, 16:19 **[ТС]**

Анар, точно, max-width работает. И даже таблицы сужает, хотя пишут. что таблицы не должен сужать (но мне это как раз надо). Но - теперь другая проблема: все содержимое прижато по левому краю, а как сделать, чтобы оно оказалось по центру? Вот например как в Kommersant.ru. Нигде не могу найти решения...

@CyberGeniuz · 12.12.2015, 17:11

CSS
1
 margin: auto;

Попробуйте

@Анар · 12.12.2015, 18:04

АлКруглов, я же написал, и вот человек выше написал, вот так:

CSS
1
2
3
4
body {
        max-width: XXXpx;
        margin: 0 auto;
}

@АлКруглов · 12.12.2015, 22:02 **[ТС]**

Спасибо огромное! Все вышло как надо! Причем те поля, которые я задавал для квадратного монитора, тоже сохранились!

Добавлено через 51 секунду
Спасибо!

Добавлено через 2 часа 21 минуту
Спасибо!!! Все получилось. Простоя побоялся писать margin, потому что значения полей у меня были проставлены для квадратного монитора, я думал, что для квадратных мониторов и планшетов они пропадут. Но они не пропали. Спасибо!

@АлКруглов · 13.12.2015, 23:35 **[ТС]**

Анар, а интересно: в Яндекс-браузере, Опере и Мозилле эта система работает, а в Эксплорере - не хочет.

@Анар · 14.12.2015, 00:02

АлКруглов, в ie много чего не работает. Покажите сайт.

@АлКруглов · 14.12.2015, 10:33 **[ТС]**

Анар, вот например страница с одного сайта (на главной я max-width не применял): http://garriabelev.narod.ru/alpha63.html . Только прошу сильно не презирайте, я в сайтостроении полный профан, даже CSS не пользуюсь - завожу отдельные строчки, и методом тыка проверяю.

@Анар · 15.12.2015, 03:18

АлКруглов, у меня всё нормально отображается во всех браузерах.

@АлКруглов · 15.12.2015, 10:08 **[ТС]**

Спасибо! Это очень приятно. Возможно, у меня какая-нибудь устаревшая версия IE ? - Еще вопрос: а если в тех случаях, когда на странице нет ничего кроме текста, писать вместо body - p ? А можно ли писать и то и то - и body и p ?

@vitsuk · 15.12.2015, 11:13

АлКруглов, тебе все равно нужно склет html и задавать ширину сайта! body и пишутся теги p!!

@Fedor92 · 15.12.2015, 12:03

АлКруглов, уже какая тема подряд... Ребята из Вас кто-нибудь может прописать человеческий доктайп? В валидаторе данное творение проверять не рекомендую... Вам надо бы начинать не со скелета, а со стилей... У Вашей таблицы стоит ширина в 90%, поэтому страница и занимает 90% ширины окна броузера - здесь нечему удивляться...

@АлКруглов · 16.12.2015, 01:16 **[ТС]**

Мужики, не надо меня проверять на валидаторе. я же сам сознался, что "полный идиот". Не знаю. что такое скелет и доктайп. Просто беру самоучитель и тыкаю одним пальцем, как там показано. Но ведь у меня только тексты, таблицы и картинки, ничего не двигается и не звучит. Хотелось бы только, чтобы выглядело не противно. И Анар сказал же - во всех браузерах страница на широких мониторах сужается, как надо. А у меня - в Опере, Мозилле, Яндекс-браузере и Амиго. Может, у меня IE устаревший?

@Fedor92 · 16.12.2015, 11:11

Сообщение от АлКруглов

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

Вас ещё на валидаторе никто не проверял - пока только рекомендуют исправить косяки... Вот почитайте о доктайпе - он обязателен для любого html - документа!

Сообщение от АлКруглов

Просто беру самоучитель и тыкаю одним пальцем, как там показано.

Почти все кто заходит на форум поступают также, ничем не удивили...

Сообщение от АлКруглов

И Анар сказал же - во всех браузерах страница на широких мониторах сужается, как надо.

Она сужается ровно до 90% ширины окна броузера во всех броузерах, включая ишачка... На данный момент Ваш сайт без доктайпа отображается в режиме совместимости, поэтому каждый броузер транслирует его так, как хочет...

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8

	Как сделать чтобы страница не растягивалась на широком мониторе 11.12.2015, 17:20. Показов 6596. Ответов 17 Метки нет (Все метки) Здравствуйте! У меня три технически простеньких сайта (только тексты и картинки в текстах). Делал их еще когда были только "квадратные" мониторы. На современных широких мониторах строки текста становятся слишком длинные, картинки расталкивают текст и вообще некрасиво. Есть ли способ сделать так, чтобы на широких мониторах страница оставалась примерно такой же (пропорционально) как на узком, то есть, чтобы слева и справа появлялись бы более широкие поля (а на узких мониторах их бы не было)? 0

@CyberGeniuz 74 / 63 / 24 Регистрация: 13.02.2015 Сообщений: 164
	11.12.2015, 17:23
	Это называется резиновая верстка. Использование процентов место пикселей обычно решает проблему. 1

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	11.12.2015, 17:34
	АлКруглов, пользуйтесь max-width. 1

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	11.12.2015, 17:52 [ТС]
	Спасибо! Простите мою чайниковость. Но я вас не совсем понял. Картинки я и так задаю в процентах, от высоты экрана. А текст расползается. Если я задам большие поля или возьму все в таблицу и укажу таблице проценты от ширины экрана, то тогда уже на узких мониторах и планшетах будет плохо. там-то поля не нужны. - Но вот посмотрите первые страницы Яндекса или Мейла или хоть газеты "Взгляд": на узком мониторе и планшете страница занимает все поле по ширине, а на широком мониторе страница идет посередине, а слева и справа остаются широкие пустые поля. Вот как они этого достигли? 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	11.12.2015, 18:01
	АлКруглов, ну нужно сайт смотреть. А так у body максимальную ширину указываете и margin: 0 auto; обычно этого достаточно. 0

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	12.12.2015, 16:19 [ТС]
	Анар, точно, max-width работает. И даже таблицы сужает, хотя пишут. что таблицы не должен сужать (но мне это как раз надо). Но - теперь другая проблема: все содержимое прижато по левому краю, а как сделать, чтобы оно оказалось по центру? Вот например как в Kommersant.ru. Нигде не могу найти решения... 0

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	12.12.2015, 22:02 [ТС]
	Спасибо огромное! Все вышло как надо! Причем те поля, которые я задавал для квадратного монитора, тоже сохранились! Добавлено через 51 секунду Спасибо! Добавлено через 2 часа 21 минуту Спасибо!!! Все получилось. Простоя побоялся писать margin, потому что значения полей у меня были проставлены для квадратного монитора, я думал, что для квадратных мониторов и планшетов они пропадут. Но они не пропали. Спасибо! 0

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	13.12.2015, 23:35 [ТС]
	Анар, а интересно: в Яндекс-браузере, Опере и Мозилле эта система работает, а в Эксплорере - не хочет. 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	14.12.2015, 00:02
	АлКруглов, в ie много чего не работает. Покажите сайт. 0

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	14.12.2015, 10:33 [ТС]
	Анар, вот например страница с одного сайта (на главной я max-width не применял): http://garriabelev.narod.ru/alpha63.html . Только прошу сильно не презирайте, я в сайтостроении полный профан, даже CSS не пользуюсь - завожу отдельные строчки, и методом тыка проверяю. 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	15.12.2015, 03:18
	АлКруглов, у меня всё нормально отображается во всех браузерах. 1

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	15.12.2015, 10:08 [ТС]
	Спасибо! Это очень приятно. Возможно, у меня какая-нибудь устаревшая версия IE ? - Еще вопрос: а если в тех случаях, когда на странице нет ничего кроме текста, писать вместо body - p ? А можно ли писать и то и то - и body и p ? 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	15.12.2015, 11:13
	АлКруглов, тебе все равно нужно склет html и задавать ширину сайта! body и пишутся теги p!! 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.12.2015, 12:03
	АлКруглов, уже какая тема подряд... Ребята из Вас кто-нибудь может прописать человеческий доктайп? В валидаторе данное творение проверять не рекомендую... Вам надо бы начинать не со скелета, а со стилей... У Вашей таблицы стоит ширина в 90%, поэтому страница и занимает 90% ширины окна броузера - здесь нечему удивляться... 0

@АлКруглов 0 / 0 / 0 Регистрация: 11.12.2015 Сообщений: 8
	16.12.2015, 01:16 [ТС]
	Мужики, не надо меня проверять на валидаторе. я же сам сознался, что "полный идиот". Не знаю. что такое скелет и доктайп. Просто беру самоучитель и тыкаю одним пальцем, как там показано. Но ведь у меня только тексты, таблицы и картинки, ничего не двигается и не звучит. Хотелось бы только, чтобы выглядело не противно. И Анар сказал же - во всех браузерах страница на широких мониторах сужается, как надо. А у меня - в Опере, Мозилле, Яндекс-браузере и Амиго. Может, у меня IE устаревший? 0

Как сделать чтобы страница не растягивалась на широком мониторе

Решение