Html — Помогите с резиновой версткой и фонами!


Содержание

Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой

«Резиновый», «адаптивный», «отзывчивый» сайт. Что это такое, что выбрать, что лучше, в чём разница?

Я сама использую эти слова как синонимы. Точно также как и «вёрстка», «шаблон», «дизайн». Я делаю неправильно. Это обусловлено, с одной стороны, погоней за ключевыми словами, с другой, тем, что я одновременно являюсь и заказчицей, и исполнителем. Мне не нужно писать самой себе технических заданий. Я вижу конечную цель. А вот при заказе сайта у веб-студии, разница может быть существенной.

Для того, чтобы увидеть её, создадим простейший пример: два рядом стоящих элемента.

И посмотрим как они ведут себя при изменении ширины окна браузера.

Фиксированная верстка

Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

Резиновая вёрстка

Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

Адаптивная вёрстка

Воплощается с помощью @ Media или благодаря скриптам (например, как для AdSense). Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати. Автор подхода — Aaron Gustafson.

Отзывчивая вёрстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству. Автор подхода — Ethan Marcotte.

Мобильная версия сайта

Фактически это другой сайт, с другой вёрсткой и дизайном. Он имеет отдельный URL (поддомен m.site.ru или папка site.ru/m). На него происходит перенаправление пользователя с основного проекта, если тот использует телефон.

16 комментариев:

Космо Мизраил Вай-вай) у меня Отзывчивая вёрстка :D
Пример n-p-tib.forumkz.net/forum
Прячутся виджеты и убирается отступ на небольших экранах.
Только вчера закончил диз писать :) Правда, есть ограничение по ширине всё-таки — 900 пикселей минимум для body — но для всего остального есть мобильная версия.

Если бы не ваш блог, никогда бы не научился пользоваться медиатипами. Вообще я обычно w3schools пользуюсь как справкой — там самая полная и актуальная информация о всех веб-технологиях — но в длиннющем списке функций и стилей невозможно найти такое чудо :)

乂◕‿◕乂 NMitra А я даже не знаю чем пользуюсь, всем подряд. Про «шпаргалку» вообще молчу, постоянно по страницам лазаю, хотя статьи писала сама :)

Нравится css-tricks.com и stackoverflow.com. Многое можно найти в w3schools. Анонимный А вот это — адаптивная или отзывчивая: http://plastilin5.com/tools/? NMitra Скорее резиновая :) Космо Мизраил Полезная штучка.
Резиновая) однозначно) Космо Мизраил Горыныч Для эстетичной плавной трансформации в компактный/расширенный вид при адаптивной (а т.ж. и отзывчивой) верстке сайта можно использовать свойство transition. Такое используется на википедии.
Но у меня нередко транзишн висит на каждом пятом элементе и всё само собой так сглаживается :\ NMitra По мне, так это лишнее. Сомневаюсь, что обычный посетитель будет так играться. Я, например, не смотрю как тот или иной сайт выглядит при сжатии. А тех, кто знает, что там вообще будет что-то происходить единицы. Космо Мизраил Горыныч При использовании портативных устройств с акселератором поворот экрана может вызвать сжатие. Кроме этого, я нередко ставлю пару приложений в две колонки =)
В целом, фигня ненужная этот плавный переход на сайте, но вызывает столько симпатии к сайту :3 Юрий Наташа, уже сверстал несколько «резиновых» тем, но в «адаптивку» пока не лезу. Хочется полностью освоить именно «резину». Честно говоря, не понимаю, где ее можно использовать в чистом виде. При уменьшении ширины экрана синхронно сужается весь контент. Кому будет приятно просматривать, например, вытянутые по вертикали изображения или текст? Так понимаю, что «резина» — это заготовка для «адаптивки» или отзывчивой верстки? Или я ошибаюсь? NMitra Да, в большинстве случаев так. Правда появляются такие свойства как display: flex; и column-count http://css-tricks.com/guide-responsive-friendly-css-columns/ где адаптивность уже встроена. Юрий Даже не слышал о таких свойствах. Спасибо за ссылку, Наташа! Включил «переводчик» и вскользь «пробежался» по тексту. Завтра глубже ознакомлюсь со статьей. Анонимный Хочу получить по яйцам от красивой девушки NMitra . Анонимный Аноним — наш человек :D Админ Доброго времени суток.

А можно копию вашего шаблона?
Дело в том что я сам это нормально не сделаю.Хотя понимаю что это обычный родной простой гугловский шаблон (просто изменили на адаптивный Вы) и уверен по любому там изменено, я многое сам не сделаю.Поэтому очень хотелось бы шаблон профессионала.
Как Вы на это смотрите.поделитесь. NMitra Доброе время суток.

К сожалению, шаблон «Шпаргалки блоггера» не могу дать. Есть уже узнаваемость у посетителей, плюс шаблоны в единственном экземпляре ценятся поисковой системой выше.

Резиновый сайт

Здравствуйте уважаемые начинающие веб-мастера.

В этой статье рассмотрим, как блочный каркас сайта, созданный нами в предыдущей статье, сделать резиновым.

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

Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.

А, допустим, блочный каркас имеет фиксированную ширину в 900 px.

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

А на мониторе шириной более 2000 px, наши 900, будут смотреться как тонкая полоска. А ведь, обычно, большие экраны устанавливаются, на значительном расстоянии от пользователя.

И в том и в другом случае, просмотр сайта с фиксированной шириной, будет очень неудобен.

Поэтому и нужен так называемый резиновый каркас, чтоб пользователи с экранами любых размеров, могли комфортно просматривать Ваш ресурс.

Давайте подробно рассмотрим, как создать резиновый каркас сайта из блочного каркаса, который мы создали в двух предыдущих статьях.

Для примера возьмём каркас с двумя колонками, расположенными справа и слева от контента.

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

Итак, блочный каркас сайта с двумя боковыми колонками.

Теперь возьмём код этого каркаса, и посмотрим, что в нём нужно изменить. А изменять будем, в основном, единицы измерения в свойстве width .

В этом коде они заданы в пикселях, и ширина блоков, таким образом, является фиксированной. Мы же будем задавать их в процентах.

И проценты эти будут браться от ширины экрана, а так как экраном у нас является тег body , то он, по умолчанию, будет составлять 100%.

Сделав эти изменения, попробуем уменьшить ширину экрана, и посмотрим, что произойдёт с нашим каркасом сайта.

Как видите, все блоки равномерно уменьшились, относительно размера окна браузера. Если это окно увеличить, то все блоки так же пропорционально увеличатся.

Высота блоков не учитывается, так как она зависит от содержания, и на читабельность не влияет.

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

Если высоту изображений не задать в процентах, то они, на разных мониторах будут вытягиваться в высоту.

То же самое относится к изображению в шапке сайта, и соответственно, к высоте блока header .

Если же шапка сайта украшена размноженным изображением, или фоновым цветом, то задавать ей высоту не нужно, так как она, по любому, определиться содержанием.

Для слишком маленьких и слишком больших мониторов есть смысл ввести в код ещё два свойства. Это

max-width — максимальная ширина сайта;

min-width — минимальная ширина сайта;

Минимальный размер устанавливается в тех пределах, когда дизайн сайта при уменьшении экрана, начинает катастрофически рушиться.

Чтоб до этого не доходило, и устанавливается min-width для блока wrapper .

max-width выбирается исходя из понятий оптимального восприятия.

Такие ограничения можно вводить для любого блока сайта.

Ещё один момент на который необходимо обратить внимание — это размер текста font-size

Размер текста в браузерах, обычно задаётся по умолчанию и составляет 100%. Но это относиться к тегам P и H1….H6 , то есть к стандартному тексту, и стандартным заголовкам.

Если же Вам потребуется создать текст или заголовок (например в шапке сайта), какого либо нестандартного размера, то font-size ему нужно задавать в процентах от значения по умолчанию.

Я, конечно забегаю немного вперёд, но за то, когда Вы научитесь создавать шапку сайта, и заполнять каркас сайта текстом и изображениями, прочитав следующие за этой, статьи моего блога, то Вам уже будет ясно, как сделать шаблон, равномерно отображающийся в мониторах разных размеров.

Желаю творческих успехов.


— Какую температуру вы предпочитаете на
отдыхе: сорок градусов по Цельсию, или по Фаренгейту?
— По Менделееву!

12 комментариев на «Резиновый сайт»

Вот в этом я к сожалению не волоку.

На этот вопрос ответит скорее всего только техподдержка хостинга. У них есть такой показатель как CP — величина, характеризующая время, затраченное центральным процессором на выполнение процессов пользователя (например, обработку http-запросов web-сервером, выполнение php-скриптов, выполнение задач через crontab), другими словами допустимая нагрузка.

В зависимости от неё хост предоставляет тариф. Когда нагрузка превышает допустимую, хостер предлагает перевести аккаунт на более дорогой тариф. Вот всё что я знаю.

Спасибо! Вы мне очень помогли в создании небольшого сайта.
Я хотел задать вопрос, правда не по теме. Сколько клиентов способен выдержать сайт на чистом html?
Дело в том, что я жадный))) и не хочу платить за хостинг, поэтому выбираю бесплатный.
Тот, который я выбрал имеет ограничение по трафику 5 Гб/мес. Скорость почему-то 250 мбит/с, наверное для всего хостинга.
Мне интересно сколько клиентов выдержит такой сайт
1. Чистый html.
2. Все картинки, используемые сайтом, находятся на pixabay как thumbs.
3. Средний размер страницы 60 кб.
4. Используемое ОЗУ: 70 мегабайт максимум (условия хостинга но не бегет правда а другого)
5. Процессор неизвестно. Около 100 мгц. Судя по озу.
6. Количество страниц сайта 10 максимум.
7. Максимальный размер сайта 1 мегабайт.
Мне нужно хотя бы 1000 клиентов в минуту. Чтобы не падал.

Цукерберг рекомендует:  Тест по Django. Django 2

Здравствуйте Евгений.
1. table я использую строго по назначению, т.е. для создание таблиц, а табличная вёрстка, которую я показал — это старинный и простейший вариант из тех времён, когда небыло ни планшетов ни смартфонов, и ни о какой адаптации слыхом не слыхивали. А свойства css flex, inline-block применяются в тех случаях, когда они более уместны. Нет такого, что лучше, а что хуже. Всё зависит от задачи, а уж как её лучше реализовать — это сугубо индивидуально для каждого случая.

2. Без @media screen обойтись нельзя, так как экранов разных размеров много, и для каждого диапазона нужно подбирать позиционирование форму и размер элементов, а так-же размеры шрифтов. Сайдбары до возможной читабельности сохраняются на своём месте, а потом переносятся в конец статьи. Для вызова инфы из них, можно сделать меню вверху страницы, которое появляется тогда, когда сайдбар уходит вниз. Зачастую, для мобильных размеров, вверх страницы выводится несколько меню — меню страниц, меню рубрик, меню записей, меню блоков сайдбара. Можно, для экономии места одно раскрывающееся меню, в несколько уровней, в котором будут последовательно открываться все эти меню со своими пунктами во втором уровне. Всё зависит от важности того что вы хотите показать. Короче поле для творчества.

Этот сайт у меня толком не адаптирован, так как посещений с мобил почти нет, но вот пример другого https://sekretymastera.ru, в котором мне кажется удалось неплохое меню сайдбара в самом верху страницы. Появляется при экране 700 пикселей. Сайт ещё в стадии создания, поэтому в меню много свободного места.

Доброго времени суток! Помогите спасите! уже давно увлекся созданием сайтов и понял что это идеальная для меня работа и вам за это отдельное спасибо! Но я не могу никак найти ответы на вопросы который как по мне одни из самых важных:
1) Я часто замечал что при верстке сайта вы используете тег table. Скажите, при верстке адаптивного сайта что является лучшим инструментом: flex, inline-block или как у вас table? и из этого вытекает следующий вопрос:
2) при верстке адаптивного сайта, можно ли совсем обойтись без @media: например если у меня два sidebar или пусть даже один в мобильной версии он/они смотрится ужасно(текст маленький, нечитабельный). Можно ли и (и собственно куда) убирать сайдбары при разрешении в котором они становятся нечитабельны и некрасивы?
Заранее огромное спасибо!

Пожалуйста не путайте мобильную версию сайта и адаптивный дизайн. Это разные вещи. У моих сайтов нет мобильной версии, только адаптивный дизайн, и о нём я подробно рассказал в разделе Адаптивный дизайн. А фрилансом я не занимаюсь. Веду блог и делюсь информацией просто для души, хобби так сказать. И это увлечение не единственное и не основное, так что извините.
Но, если Вы возьмётесь за адаптивный дизайн самостоятельно (он гораздо лучше мобильной версии), то я всегда помогу советом, и разъясню непонятки.

Здравствуйте!
Статья очень понравилась, хотелось бы поинтересоваться, сколько будет стоить заказать у вас мобильную версию сайта?

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

полезная статья. понравилось

Я то этим не озадачивался, но могу дать Вам классную наколку. Есть такая соц. сеть «Страна Пенсионерия». К сожалению ссылка не сохранилась. Я когда-то в ней активно участвовал под ником Мастер. Там есть модератор Леди Ди, большая специалистка по самописным сайтам. Как-то я задавал ей такой же вопрос, и она сказала, что есть маленький скрипт для этого.

Найдите в Гугле эту сеть, она живая, и обратитесь к Леди Ди. Можно передать привет от меня. Должна помочь. Хороший человек.

Очень интересно! У меня сайт статистический на HTML4.Страниц не мало. И возникает вопрос: 1.Возможно ли дизайн моего сайта сделать резиновым?
2. Изменения на всех страницах делать вручную?
Спасибо
С уважением
Владимир


Конечно можно. Правда он больше информативный, чем дизайнерский, и в нём еще всего 9 страниц. Времени не хватает — строимся, но пишу помаленьку.
Милости прошу — http://sekretymastera.ru/nowosti/stenyi-iz-keramzita/. Кстати он резиновый, правда ещё не совсем доведённый, потому что я его уже начал переделывать на адаптивный.
Спасибо за отзыв!
В строке «Сайт», в комментариях, укажите Ваш сайт. Будет время загляну.

Доброго время суток. Безумно понравился ваш сайт. Все понятно и доступно. Супер!Огромный респект! Спасибо вам огромное. Очень интересно посмотреть на ваши другие сайты. Читала, что у вас есть сайт про строительство, но никак не могу найти адресс. Очень уж хочется посмотреть.:)Если можно, конечно.

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

Какой макет верстки (с использованием Каскадных Таблиц Стилей, 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;768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800;600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

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

В заключении

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

5 техник резиновой верстки сайта

  • Тема: HTML&CSS
  • Время ролика: 00:22:38
  • Cложность: средняя
  • Прикладные программы: Dreamweaver CS4
  • Автор: Бернацкий Андрей

В этом уроке мы досконально разберем все подводные камни такого, казалось бы, простого понятия, как ширина элемента. Поймем, из чего она складывается и что представляет на самом деле. Так же рассмотрим работу свойства float. Рассмотрим на примере, почему плавающие элементы при изменении ширины окна браузера съезжают на новую строку, и решим данную проблему. Рассмотрим и решим проблему схлопывания границ блока.

Техника 2. Создание резинового меню, используя списки

  • Тема: HTML&CSS
  • Время ролика: 00:16:13
  • Cложность: средняя
  • Прикладные программы: Dreamweaver CS4
  • Автор: Бернацкий Андрей

Навигация — это, пожалуй, самая главная часть сайта. И у резинового сайта, как правило, навигация тоже резиновая. Создать резиновое меню, используя таблицы, труда не составит. Но когда речь заходит о создании такого меню, используя списки, возникает много вопросов. В уроке мы как раз создадим резиновое меню, используя списки. Разберемся с теорией создания такого меню. Выявим и решим возможные проблемы.

Техника 3. Выстраиваем элементы позиционированием

  • Тема: HTML&CSS
  • Время ролика: 00:23:39
  • Cложность: средняя
  • Прикладные программы: Dreamweaver CS4
  • Автор: Бернацкий Андрей

Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position. В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index. Выясним необходимое условие для работы свойства z-index.

Техника 4. Центрирование элемента переменной ширины

  • Тема: HTML&CSS

  • Время ролика: 00:11:45
  • Cложность: средняя
  • Прикладные программы: Dreamweaver CS4
  • Автор: Бернацкий Андрей

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

Техника 5. Выравнивание блоков по ширине резинового блока

  • Тема: HTML&CSS
  • Время ролика: 00:16:00
  • Cложность: средняя
  • Прикладные программы: Dreamweaver CS4
  • Автор: Бернацкий Андрей

Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 16. Блочная верстка сайта: резиновый дизайн

Резиновый дизайн и необходимые свойства CSS

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.

Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей, для того чтобы достичь необходимой кроссбраузерности.

Две колонки в резиновой дизайне

Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно.

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

Заголовок

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера ( margin-left ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Код html-структуры остается прежним, меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера ( margin-right ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

position:absolute; width: . px; left: . px; top: . px;

Правая колонка:

margin-left: . px; /* отступ слева, равный ширине первой колонки */

«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Результат:

Рис. 4. Резиновый дизайн сайта с позиционированием

Одинаковая высота колонок

На рис. 4 результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы ( border ).

Ссылка 1
Ссылка 2
Ссылка 3

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

HTML & CSS: как не надо

Не задавайте контейнерам ширину, равную брикпойнтам

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

Как это увидеть? #

Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:

И посмотрим в браузере что получилось. Начнём с мобильных:

На мобильных всё как надо. Десктоп:

На десктопе появилась не только вертикальная прокрутка, но и горизонтальная. Почему?

Потому что вертикальная прокрутка отъела часть ширины окна, и для контента осталось меньше места.

На десктопе body будет меньше ширины окна, поэтому на ширине окна 600px элемент той же ширины не поместится, что и вызовет появление горизонтальной прокрутки.

Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.

Вариант с фиксированной колонкой

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

Цукерберг рекомендует:  Команда - Набираю команду для создания web-проекта

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

Простое и быстрое решение.

Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width :

Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.

Вариант с резиновой колонкой


Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body ), но задать боковые margin или padding .

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

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

Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.

Вариант с фоном на всю ширину страницы

Например, в макете требуется что-то такое:

У шапки фон по ширине страницы, содержимое по центру.

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

Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.

Вариант с картинкой на всю ширину страницы

Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:

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

Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:

Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:

Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:

На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:

Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.

Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .

Горизонтальная прокрутка пропала, всё работает как надо.

Итого

Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.

Фон с аркой для резиновой вестки.

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Похожие публикации

Приписал body <
background-image: url(img/fon.png)
>
Сразу фон есть , а после обновления изчезает.
И так с любой картинкой
Подробней в скриншотах

Добрый день! Помогите с такой проблемой:
Есть шаблон с общим фоном:

Для понятности разметки поменял на другой цвет:

Суть вопроса: надо где черный квадрат и цифра 1, вставить изображение прозрачное в самый угол, ну типо ленточки георгиевской и всё остальное залить фоном:

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 16. Блочная верстка сайта: резиновый дизайн

Резиновый дизайн и необходимые свойства CSS

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.

Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей, для того чтобы достичь необходимой кроссбраузерности.

Две колонки в резиновой дизайне

Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно.

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

Заголовок

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера ( margin-left ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Код html-структуры остается прежним, меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера ( margin-right ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

position:absolute; width: . px; left: . px; top: . px;

Правая колонка:

margin-left: . px; /* отступ слева, равный ширине первой колонки */

«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Результат:

Рис. 4. Резиновый дизайн сайта с позиционированием

Одинаковая высота колонок

На рис. 4 результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы ( border ).

Ссылка 1
Ссылка 2
Ссылка 3

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Резиновая верстка на div-ах

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

Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока

В видеоуроке я установил ширину блока

Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.

Выравнивание блоков посередине в случае резиновой верстки на div-ах

Первое, что приходит в голову — это указать у элемента body свойство text-align:center. Казалось бы, все, включая текст на странице, должно выровняться по центру. А уж потом, для элемента wrapper поменять центровку на выравнивание по левому краю (text-align:left). Но это неверный подход (хотя все сработает в IE). В нормальных браузерах свойство text-align устанавливает выравнивание только для текста внутри блока, к которому применяется данное свойство.

Правильным будет указать равные левый и правый внешние отступы для элемента

CSS-инструкция для блока wrapper будет иметь такой вид:

Или в сокращенной форме:

Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя.

Хозяйке на заметку: блок, сформированный тегом

Естественно, никакой центровки вы не добьетесь, т.к. границы центруемого блока уперлись в границы родителя. Ширина контейнера

В случае директивы float:left (или float:right) , опять-таки, никакого выравнивания при помощи вышеописанного способа вы не добьетесь. Блок, с данной директивой, прилипнет своим левым краем (или правым) к родителю, а все остальные блоки нормального потока будут обтекать его справа (или слева).

Поэтому ограничивайте ширину блока свойством width (либо фиксированная ширина в пикселах, либо проценты) и, для понимания происходящего на странице, обводите блок border-ом. Например вот так:

В этом случае вы будите четко видеть границы верстаемого блока. Но помните, что в нормальных браузерах к размеру блока прибавится размер border-а (ненормальным оказывается браузер IE, в котором размер border-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки.

А теперь переходите к просмотру видео.

О чем же пойдет речь в данном видеоуроке:

  1. При помощи сайта http://csstemplater.com/ сформируем HTML-каркас верстки.
  2. Детально рассмотрим свойства, обнуляющие параметры, заданные в браузере по умолчанию. Эти свойства носят подпольную кличку «ластик». Очень вам советую применять ластик во всех ваших проектах, чтобы не ломать голову вопросом «почему искажается верстка, если в HTML и CSS все задано правильно». В нашем случае ластик будет иметь весьма развитый вид.
  3. Познакомимся с такими интересными свойствами CSS как outline и псевдокласс-модификатор :focus. Outline позволяет задать обводку блока без изменения его размеров. Псевдокласс :focus позволяет изменить внешний вид элемента, при передаче ему фокуса ввода. Жаль, но все эти замечательные свойства поддерживаются браузером IE начиная лишь с 8-й версии.
  4. Детально обсудим один из способов прижатия футера к нижней части окна браузера.
  5. Разберемся с принципами формирования основного содержимого сайта: установка левого и правого сайдбара, задание области основного содержимого сайта.

Видео с сервиса RuTube:

Первая часть видео с сервиса YouTube:

Вторая часть видео с сервиса YouTube:

Третья часть видео с сервиса YouTube:

Если хотите попрактиковаться, то можете скачать исходник верстки с Deposit Files (*.zip-архив 3.5 КБайт).

Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве (*zip-архив с *wmv-файлом. Размер 53.9 МБайт).

Резиновая верстка сайта

В этом уроке я хочу вам показать и подробно рассказать о так называемой резиновой верстке сайта, этим понятием награждают те сайты, которые растягиваются при изменении размера окна браузера или разрешения монитора. Итак делать мы будем сайт состоящий из шапки, 3-х колонок и подвал, в общем довольно стандартный вариант решения для сайта:

Для начала нам необходимо создать обычную html страничку, в это можете делать где вам больше нравиться я использую для этих целей Macromedia DreamWeaver:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих