Как настроить контент сайта под любой размер окна браузера
Совсем недавно, блуждая в системе Google Картинки, я заметил одну прикольную вещь : как только вы изменяете размер окна своего браузера, результаты поиска скрываются или показываются в зависимости от того, получается ли создать из всех изображений целые ряды. У такого приема есть большой плюс — на вашем сайте никогда не будет пустующих мест; сетка будет всегда заполнена, а все не вмещающиеся объекты просто скрыты.
Я решил заново создать данное средство, но только с применением jQuery. Так же как и в системе Google Картинки оно будет проверять сколько изображений может вместиться в каждый ряд и прятать оставшиеся (и все это будет происходить при изменении размера окна браузера).
Различие между моим HTML-кодом и тем, что использует Google, состоит в том, что Google применяет таблицу для отображения изображений.
Код, который использует Google, основан на таблице, в которую размещены изображения. Я же в своей версии воспользовался плавающими изображениями (по существу, все работает также). Чтобы убедиться в этом, посмотрите демо-версию.
Теперь давайте ближе познакомимся с самой проблемой и ее решением, а также научимся создавать код, заставляющий браузер подстраивать контент страницы под свое разрешение.
Проблема
А вот и наши контрольные изображения, которые помогут вникнуть в проблему.
Как видите, замечательный прямоугольник, в котором был заполнен каждый ряд, разрушен, и все из-за другого размера окна браузера. Если вдруг окажется, что у вашего пользователя разрешение браузера не такое как у вас или пользователь захочет изменить размер окна, то произойдет следующее: браузер вытеснит все не вместившиеся изображения и создаст новый ряд для них. И если этот ряд не будет полностью заполнен, то неизбежно появятся пустующие пространства.
Раз вы не хотите, чтобы так получалось, надо найти решение данной проблеме.
Решение
А решение то необыкновенно простое: нужно спрятать все элементы, которых недостаточно для создания полного ряда:
И тут jQuery протягивает нам руку помощи. В код я добавил необходимые комментарии, которые помогут вам лучше понять суть его работы.
Еще раз повторюсь на счет ширины, равной 184 пикселям:
1. Ширина каждого изображения — 100 пикселей
2. У каждого изображения имеется поле — по 40 пикселей вправо и влево
3. У каждого изображения есть рамка — по 2 пикселя вправо и влево
Ну вот, вроде, и все.
Заключение
Вот отличная техника, задачей которой является отображение только полных рядов. Но помните, что она уместна только в том случае, когда не стоит задача показать пользователю сайта все имеющиеся изображения.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.marcofolio.net
Перевел: Максим Шкурупий
Урок создан: 30 Октября 2009
Просмотров: 36571
Правила перепечатки
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Обрезается сайт при уменьшении окна (но не весь)
Подскажите пожалуйста,почему мой сайт обрезается с правой стороны когда уменьшаешь окно браузера?Но самое интересное что обрезается не весь,один из блоков тянется на всю ширину и можно скролить по всей его длине (по оси Х).
Как можно избавить от обрезания?
Ссылка на комментарий
Поделиться на других сайтах
3 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
The Discord
Допустим, есть веб-страница, которую нужно сверстать. И у этой страницы на фоне по центру стоит очень большая картинка, которая выходит за границы основной полосы контента, создавая красивые приятные поля. Основная полоса контента фиксированной ширины. И это хорошо.
Однако, когда пользователь берётся за правый край окна браузера и делает его ширину меньше, чем ширина полосы контента, фоновая картинка уезжает влево, то есть, прекращает располагаться там, где она располагалась относительно контента. А вот это уже нехорошо.
Решение данной проблемы довольно простое. Спасибо aackose за статью «Large CSS background moves on resize, in IE 8»
Допустим, у нас есть такая разметка:
При такой разметке как раз и наблюдается данный баг. Если окно браузера явно шире чем 960px, то всё выглядит так, как надо — полоса .page расположена посередине фонового изображения. Если окно браузера уже, то .page начинает выравниваться по левому краю, а фоновая картинка продолжает выравниваться по центру viewport’а.
Чтобы избавиться раз и навсегда от этой проблемы, надо добавить тот же фон к .page :
Трюк в том, что у блока-обёртки выставлена ширина 100%, а у полосы контента — 960px.
Размер div не изменяется при масштабировании внутреннего изображения (результат изменения размера окна)
Я хочу, чтобы мои изображения изменялись в зависимости от изменения высоты окна, сохраняя при этом содержимое div, завершающее изображение. Я попытался использовать:
Но он работает не так, как ожидалось. div не сжимается. Это действительно происходит, когда я играю с свойствами css в отладчике.
Вот fiddle (попробуйте изменить размер панели результатов)
Update:
Теперь это странно. Поскольку я впервые опубликовал этот вопрос, поведение браузера изменилось. Первоначально (Chrome), когда я изменил размер окна, изображение будет уменьшаться пропорционально, как ожидалось, но оберточный div сохранит свою первоначальную ширину. Что происходит сейчас (обновление Chrome?) Заключается в том, что изображение не сжимается горизонтально, а div также.
Я попробовал это с последними Safari и Firefox. Оба уменьшают изображение, но сохраняют оригинальную ширину div. Поэтому, пожалуйста, будьте любезны проверить ваши решения и в других браузерах.
Обновление # 2:
div должен оставаться блочным типом, так как мне нужно поместить другие элементы в углы изображения.