Теперь разберемся с мелкими огрехами, которые не дают нам жить и сжирают массу времени, если мы не пользуемся бутстрапом.
Всем противникам бутстрапа я могу сказать — вы не правы )). Дело в том, что бутстрап содержит огромное количество мелочей, которые мы не узнаем, даже изучая Responsive-верстку по учебникам. Например, очень трудно сымитировать поведение row или container, которые содержат все внутренние дивы и обтекают их. Обычно содержащий див выглядит как полоска сверху тех дивов, которые, по идее, находятся внутри него.
Итак, скачаем готовый макет: rezina
Вы видите, что, в отличие от макета, у нас нет рамок вокруг каждого дива. Добавим их, ставим сразу на все дивы, чтобы не дублировать свойство в каждый:
div{ border: 3px solid #9960b7; }
О боже, все упало! Что делать?!?
Переходим к очень важному свойству в нынешние времена, называется border-box.
Это свойство указывает — как интерпретировать паддинги и бордеры (внутренние оступы и рамки). Дело в том, что каждый паддинг и каждая рамка имеют свою ширину. Например, у нас бордер равен 3 пикселям в ширину. Поэтому наши контейнеры (дивы) перестали «влезать» в общий, содержащий их див. Вместо того, чтобы высчитывать, сколько всего у нас паддингов и рамок, мы можем одним движением руки исправить наше положение. Добавляем в div:
div{ border: 3px solid #9960b7; -moz-box-sizing: border-box; /* Для Firefox */ box-sizing: border-box; /* Ширина блока с полями */ }
Префикс -moz- используется для интерепретации свойства Мозиллой. Если вы находите код через Google, который идет с префиксами перед основным свойством — копируйте все варианты — для разных браузеров требуются префиксы. Обычно одно и то же свойство с разными префиксами повторяется 4 раза — для ИЕ, Мозилы, Оперы и Гугл Хрома.
Итак, вставили свойство, обновили страницу. Вуаля! Все стало на свои места, так как мы сказали браузеру, чтобы он падинги и бордеры считал как ЧАСТЬ дива, к которому они принадлежат.
К сожалению, по умолчанию эти размеры не входят в ширину блока. Но в бутстрапе все будет готово для вашей работы без лишних хлопот.
Однако мы столкнулись с новой проблемой — наши рамки двоятся, а нужна имитация одинарной на стыках блоков. К сожалению, для дивов нет свойства border-collapse. Что же мы можем сделать? Мы можем просто-напросто убрать «лишние» рамки. Посмотрим на макет:
Начинаем «снаружи» «внутрь». Второй основной блок — избавляемся от рамки слева.
в .d2 пишем:
border-left: none;
Для «кнопок» сверху (Главная и Новости) мы можем убрать вообще все рамки, сверху и по бокам будет рамка общего дива, снизу — рамка дива от «Я — заголовок 2 уровня».
Так как обе кнопки держатся за класс d2, то мы ставим в него:
border: none;
Теперь мы видим, что на обоих элементах рамка пропала, но нужно отделить «Главную» от «Новостей». Удача — на блоке «Новости» стоит дополнительный класс d3_2, давайте напишем ему бордер слева:
border-left: 3px solid #9960b7;
Окей. Пошли дальше. Для «Я — заголовок 2 уровня» убираем все рамки, кроме верхней, пишем в .d4:
border: none; border-top: 3px solid #9960b7;
И так ячейка за ячейкой. В целом должно получится:
.d2{ width: 50%; height: 800px; float: left; border-left: none; } .d3{ width: 50%; height: 100px; float: left; background: #eb008b; border: none; } .d3_2{ background: violet; float: left; border-left: 3px solid #9960b7; } .d4{ width: 100%; background: #fff; height: 100px; clear: both; border: none; border-top: 3px solid #9960b7; } .d5{ width: 50%; height: 600px; float: left; text-align: center; padding: 15px; border: none; border-top: 3px solid #9960b7; border-right: 3px solid #9960b7; } .d6{ width: 50%; background: #a8e600; height: 300px; float: left; border: none; border-top: 3px solid #9960b7; } .d6_2{ background: #eb008b; }
Немного правый нижний блок выступает снизу, но эту проблему мы будем решать еще нескоро, с помощью разработки для мобильных приложений Flex. Пока оставляем, как есть.
Теперь — что с нашей кнопкой?
Во-первых, она должна быть прибита вправо, добавляем свойство:
float: right;
Обновили страницу — кнопка слишком прилипла к краю дива, дадим ей маргин (внешний отступ):
margin: 10px;
Во-вторых, мне не нравится, что вокруг кнопки дурацкий бордер, имитирующий объем. Такая некрасота тянется с 90-х годов, нужно обнулить значение:
border: none;
Всё, красота!
Итак, в итоге свойства кнопки в цсс выглядят так:
button { background: #eb008b; width: 200px; height: 41px; color: white; font-family: Georgia; float: right; margin: 10px; border: none; }
Проблемы с картинкой на мобильном разрешении
Внимание. Если вы ставите свойство:
img{ max-width: 100%; }
вам не то, что не нужно ставить теперь для нее высоту и ширину в пикселях — вам это строго не рекомендуется! В респонсивной верстке данное свойство означает, что картинка будет помещаться в див при любой его ширине. Более того — как только картинка достигнет своей собственной максимальной ширины, она больше не будет увеличиваться и терять от этого качество!
Это был настоящий прорыв в html и css — автоматический ресайз картинок без искажения пропорций. Поэтому разберемся — почему наша картинка исказилась? Вытянулась по вертикали? Потому что к ней привязан класс right, у которого прописаны жетские ширина и высота. А так как максимальная ширина у нас 100%, то по ширине картинка меняет размер, а по высоте остается такой же!
Удилим все свойства внутри right.
Всё! Картинка стала нормальной при любом ресайзе, на узком мониторе она уменьшается, на широком — увеличивается, не теряя пропрции.
Всё же она тоже прилипла к краю дива, нужно её отлепить. Здесь мы используем очень интересное свойство для содержащего картинку дива. Дело в том, что картинки можно выравнивать внутри дива так же, как текст! Пишем в .d5
text-align: center;
Обновили страницу — ха-ха, картинка встала по центру, но все же охота ее еще и от верха отлепить. Воспользуемся ради разнообразия не маргином для картинки, а падингом для того же d5, который ее содержит:
padding: 15px;
В целом у вас получится:
.d5{ width: 50%; height: 600px; float: left; text-align: center; padding: 15px; }
Попробуйте опять отресайзить окно браузера до размеров мобилки — смотрите, картинка даже при уменьшении сохраняет вокруг себя пространство и ни к чему не липнет! Кстати — падинги для всех колонок в бутстрапе по умолчанию равны 15px. Часто, наоборот, приходится их обнулять, чтобы тянуть картинки внутри дивов на всю ширину, без просветов.
Ну и в принципе все, мне кажется только что для заголовка должно быть свойство
text-align: center;
И что размер шрифта в правых блоках слишком мал.
Но это уже мелочи, которые, однако, требуют вашего внимания, так как на выходе вы должны получить макет, 1 в 1 совпадающий с дизайнерским фотошоп-файлом. Так что скрупулёзно снимайте все размеры шрифтов, все цвета и особенно оступы — для этого с помощью инструмента Выделение выделяйте пространство от картинки, к примеру, до верхней границы дива, и смотрите в панели Информация (Info), сколько там пикселей.
Кстати, раз вы занимаетесь веб-дизайном, вам нужно в Предпочтениях (Preferencies) Фотошопа указать в линейках показывать все в пикселях, а не сантиметрах:
You must be logged in to post a comment.