Как сделать резиновый контейнер css

Как сделать резиновый сайт. Что такое
резиновый дизайн сайта.

Резиновым принято называть сайт, изменяющий свои размеры в зависимости от размеров клиентской области окна броузера. Идея достаточно проста: задавать width и height столбцов и строк таблицы или же контейнеров, при помощи которых осуществляется разметка страницы можно либо в пикселах, либо в в процентах, при этом за 100% считаются размеры контейнера, содержащего описываемый объект.

Если использовать размеры в пикселах, то сайт будет “жёстким”. Конечно, и в этом случае остаётся возможность динамического изменения размеров элементов разметки при помощи JavaScript, например, по событию window.onResize, но наиболее гибко позволяет менять размеры ипользование процентных величин. Сайт, использующий процентные соотношения размеров width и height вложенныйх контейнеров относительно контейнера – приёмника называется “резиновым”.

В основном при создании резиновых сайтов используются процентные величины – то есть например ширина таблиц задается не в пикселях, а в процентах. По крайней мере если задать ширину в процентах, то размеры сайта будут зависеть от размеров экрана. Но его все равно надо будет подгонять как вам нужно путем редактирования параметров CSS. Если хотите, чтобы ширина сайта была на весь экран – пишите 100%, а если на половину – 50%.

Ширина страницы на экране пользователя разработчику не известна. Она зависит от свойств монитора, разрешения экрана и размеров открытого окна.

Поэтому, “резиновая” идея, похоже, самая правильная для сайта в Интернете и макет сайта нужно делать придерживаясь этой идеи. Она позволяет браузеру автоматически распределять элементы на экране с учетом ширины текущего окна и не приводит к показу горизонтальной линейки протяжки даже в узких окнах.

Преимущества резинового сайта. Основным преимуществом является динамическое изменение размеров сайта. Пропорции элементов разметки остаются неизменными для любого разрешении монитора и любых манипуляций пользователя с окном броузера. Дизайнерское решение почти всегда очень сильно проигрывает, если сайт представить в виде таблицы с текстом и графикой, позиционированной по центру или левому краю окна, в то время как справа и/или слева остаются большие поля. Такое случается, если ваш сайт построен для какого-то “оптимального” разрешения монитора пользователя (например 800х600, или 1024х768), а у пользователя установлено большее разрешение. Если же при построении “жесткого” сайта сориентировать его на какое-то “максимальное” разрешение монитора пользователя (например, 1280х1024) то при более низких разрешениях ваш сайт приобретёт горизонтальную полосу прокрутки и “потеряет” часть изображения за правым полем что вообще сведёт к нулю все усилия дизайнера.

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

Недостатки “резинового” дизайна сайта. Разумеется, использование “резиновых” сайтов имеет и свои недостатки. Основной трудностью является то, что контейнер – приёмник не всегда точно поддерживает заданный размер. Это зависит от размера контентного наполнения, включённого в контейнер. Например: необходимо поместить рисунок размером 100х80px в ячейку таблицы, у которой ширина установлена как 5% от общей ширины таблицы, составляющей 100% от ширины клиентской области окна.

Допустим, что у пользователя разрешение монитора 640х480. При несложном подсчёте выясняем, что 5% составляет не более 32px (фактически намного меньше, но это зависит от размеров клиентской области окна броузера и от размеров полей самой страницы, определяемых в теге “BODY” “/BODY”), но наша ячейка будет иметь фактическую ширину не менее 100рх, так как по правилам HTML изображение в ячейке не сжимается, а наоборот, ячейка расширяется до размеров изображения.

Таким образом, некоторые элементы, находящиеся в других ячейках этой же таблицы могут оказаться скрытыми за правой границей окна (если это рисунки) и появится всё та-же горизонтальная полоса прокрутки, или же, если в других ячейках будет находиться текст, то он окажется сильно сжат по ширине и вытянут по высоте, что конечно, никак не прибавляет привлекательности дизайну и ухудшает юзабилити сайта вцелом. На решение этой проблемы при создании “резинового” сайта уходит обычно очень много времени. В среднем создание “резинового” сайта занимет в 2-2,5 раза больше времени, чем создание такого же сайта с “жёстким” дизайном.

Если же перед Вами стоит задача сделать резиновый сайт на основе контейнеров “DIV” или “SPAN”, а не на основе таблицы, то внимания размерам контейнеров и их правильному позиционированию приходится уделять ещё больше, иначе сайт может оказаться вообще нечитаемым из-за наложения слоёв друг на друга.

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

Основные правила создания резинового сайта. Определите самое низкое разрешение экрана. Итак начнем. Прежде чем начать делать резиновый сайт, нужно определить минимальное разрешение экрана ваших посетителей. Сейчас по статистике большинство (40%) юзеров используют разрешение экрана 1280×1024. На втором месте разрешение 1024×768, я думаю на него и надо ровняться. Вы сами можете ознакомиться со статистикой воспользуясь поиском.

Разработайте дизайн сайта для минимального разрешения экрана. Когда вы определитесь с минимальным разрешением экрана, нужно разработать дизайн для этой ширины. Стоит отметить, что при разрешение 1024×768 в браузер влезает только 1000 пикселей. Поэтому делайте все графические элементы именно под эту ширину, чтобы сайт хорошо смотрелся при минимальном разрешении экрана.

В таблице для ячеек используйте в качестве единиц измерения пиксели, кроме ячеек с информацией сайта. Задайте фиксированные размеры для всех ячеек, кроме ячейке содержимого сайта. Поставьте 100% ширину для этой ячейке или не задавайте ее вообще.

Проверьте сайт. После создания сайта проверьте его во всех разрешения экрана (ну или в опере Ctrl+колесико мыши).

CSS: Резиновое видео

Когда-то давно, когда я создавал тему для WordPress, у меня появилась проблема, которая заключалась в том, чтобы контейнеры с видео на странице были «резиновыми». Используя max-width:100 % и height:auto я добился нужного мне результата, но он работал только в HTML5. После длительных часов поиска варианта решения, я, в конце концов, нашёл его. Если вы — любитель резиновых сайтов, то этот урок по CSS вам очень пригодится.

Резиновое видео HTML5

Видео элемент HTML5 вы можете легко сделать резиновым при использовании max-width:100%. Как упомянуто во введении, этот трюк не работает, если использовать iframe или другие методы, которыми пользуются большинство сайтов для хранения видео, таких как YouTube и Vimeo.

Резиновый объект & встроенное видео

На самом деле, решение очень простое. Вы должны поместить видео в отдельный div блок и выставить значения нижнего внутреннего отступа в 50%-60%. Затем можно определить дочерние элементы (iframe, встраиваемый объект), 100%-ая ширина, 100%-ая высота, с абсолютным позиционированием. Это и есть решение нашей задачи.

Как создать фиксированную ширину + резиновый принцип

Чтобы ограничить ширину видео, нам снова понадобится дополнительный div. Далее воспользуемся свойством max-width:100 %.

Совместимость

Это решение работает на всех браузерах (проверены на Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com/tutorials/css-elastic-videos
Перевел: Станислав Протасевич
Урок создан: 25 Июня 2011
Просмотров: 44494
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

CSS макеты: фиксированные, резиновые, эластичные.

Примечание: ниже выложен перевод статьи "CSS Layouts: The Fixed. The Fluid. The Elastic.", в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный». Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки).

Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Макеты с фиксированной шириной

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800×600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.

Плюсы такого макета

  • Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
  • В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
  • Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024×768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Его минусы

  • Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;
  • У пользователей с небольшими мониторами (640×480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;
  • Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;
  • Небольшая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, потому что заставляет создавать сайт, учитывая такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, потому что таковы наложенные ограничения).

Советы по макету с фиксированной шириной

  • Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640×480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
  • Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

Резиновые макеты

Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

Примером такого макета можут служить GrayBit.com. Он уменьшается по ширине до 755 пикселей до того, как появляется горизонтальная полоса прокрутки, но и при этом она не требуется для просмотра основного содержимого страниц. Фактически, сайт замечательно смотрится вплоть до ширины в 560 пикселей, дальше элементы дизайна уже начинают перекрываться, пропадать или сваливаться вниз. Большинство резиновых макетов имеют такие ограничения и, как я видел, некорректно ведут себя на мобильных устройствах, пока не отключены стили вообще или не применена специальная таблица стилей для мобильных устройств.

Плюсы резинового макета

  • При грамотной верстке резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается довольно редко, но, теоретически, если все делать правильно, то такое возможно;
  • Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;
  • Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы). Однако…

Рассмотрим минусы такого макета

  • Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;
  • Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Некоторые советы по использованию этого макета

  • Используйте резиновый макет строго по назначению. Не позволяйте своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решили использовать именно ее, убедитесь, что резиновый макет вашего сайта нормально смотрится на большинстве экранных разрешений. Иначе оставьте это, игра не стоит свеч;
  • Если при использовании резинового макета у вас есть области с фиксированной шириной, значит, на самом деле, вы получили гибрид резинового и фиксированного макета, и его минимальная ширина будет определена шириной фиксированных блоков или самого большого из объектов (картинок, например). Будьте осторожны. Если вы хотите сделать сайт именно с резиновым макетом, оно так и должно быть на самом деле, а не только на словах;
  • Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800×600.

И, собственно, пример

Эластичный макет

При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

  • Если все сделано правильно, то это очень стабильная верстка, потому все изменяет размер пропорционально. В результате при любом изменении размеров все по-прежнему хорошо;
  • Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши… Я уже слышу, как вы говорите «Вау»

Минусы эластичного макета

  • Несмотря на его привлекательность и элегантность, я не знаю действительно хорошего его применения, это заставляет задуматься, зачем же он вообще нужен?
  • Если не ограничить размеры внешнего контейнера, то этот макет может быть настоящим бедствием для пользователя: он будет растягиваться шире, и шире, и шире — безо всяких видимых преимуществ.

Немного советов по эластичному макету

  • Если вы собираетесь верстать, используя эластичный макет, убедитесь, то он работает на маленьких мониторах. Иначе, зачем он вообще нужен?
  • Ограничьте размеры эластичного блока, определив размеры внешнего контейнера (используя резиновую или фиксированную ширину, т.е. создав гибридный макет). Например, #wrapper < width:60em; max-width:98%; >. Последователи «правильной идеологии» могут возразить, что это уже не будет истинно эластичным макетом, что он при этом ограничен или гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и прекрасна, но только не тогда, когда речь заходит о пользовательском удобстве (золотые слова!);
  • Помните, что IE 6 и меньше не поддерживают свойство max-width, убедитесь, что при задании максимально большого текст в IE не появляется горизонтальной полосы прокрутки на разрешении 1024&#215;768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800&#215;600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

Пример эластичной верстки

В заключении

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.

Спасибо всем, кто дочитал до конца статьи. Буду рад любой критике и комментариям.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *