NiceSEO’s VKontakte Crossposter

Бесплатный плагин для Wordpress для автоматического кросспостинга в паблик ВКонтакте

Если background слишком широкий и появляется горизонтальная прокрутка

Привет, друзья интернетчики!

Сегодня расскажу о довольно простой штуке — у нас широкий дизайн, некоторые элементы которого выходят за рамки экрана (например когда у пользователя стоит допотопный 1024*768 или браузер в маленьком окне), и появляется горизонтальная прокрутка, которая нам нафиг не нужна. Пусть уж лучше пользователи не видят красивостей по бокам, так корректней, и никого не раздражает, чем видят какую-то прокрутку ненужную.

Итак, ситуация следующая:

Широкий красивый (хочется надеяться) фон с шириной, например 1500 пикселей.

Блок контента в середине и его ширина например 1000 пикселей.

Соответственно, если у пользователя разрешение 1024 пикселя, всё, что ему надо — он видит (Content is king!),но, т.к. сайт сделан не совсем правильно, с точки зрения вёрстки, он видит вот эту мешающую прокрутень:

Если background слишком широкий и появляется горизонтальная прокрутка

Что, разумеется, всех бесит:

Если background слишком широкий и появляется горизонтальная прокрутка

CSS так устроен, что все div-блоки должны быть видны. За счёт этого видимая часть страницы увеличивается до 1500. Но это всё конечно понятно. Другой аспект CSS: стиль background, применённый к диву, растянутому на всю страницу, спокойно обрезается.

то есть убираем наш див с картинкой, и вставляем её (картинку) в бэкграунд.

Если нужная нам картинка должна быть справа, делаем в фотошопе так, чтобы она стала широкая и, при вставке по центру, находилась справа. Слева — аналогично.

Нужна прозрачность — сохраняем в png-файл.За примером далеко ходить не буду — лесенка на данном блоге:

Если background слишком широкий и появляется горизонтальная прокруткаP.S. Данный совет, конечно, довольно нубский, по сравнению с другими, но я на днях сам затупил (И на старуху бывает проруха :D), посему, не отходя от кассы и написал, как исправлять подобные проблемки.

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

Статью подготовил linur, Специально для NiceSEO.ru, 11 июля 2011 года. При копировании не забывайте о ссылке на источник.
Я также состою в:
Лучшая веб-студия!
Яндекс.Метрика
© 2011-2018 NiceSeo.ru