Будет очень много букв.
Сначала я выполнила задание на 100%, но я задавала везде фиксированные размеры и делала это как попало. Попробовала второй раз с блоками распорками, но делала это, видимо, не правильно и все плыло и ехало совсем не как надо.
Решила еще раз подробно разобрать тему и по ней составила пошаговое построение.
Вдруг кому-нибудь пригодиться и он сэкономит кучу времени
- Задаем основной блок wrapper и его свойства:
ширина содержимого 350рх
отступы авто
.wrapper {
width: 350px;
margin: 0 auto;
}
- Внутри основного блока открыла 3 блока: header1, header2, header3 внутри каждого по блоку или два с содержимым.
Колонки не отличаются друг от друга, так что им оставила один общий класс.
< div class=“header1”>
< div class=“top”>Header< /div>
< /div>
< div class=“header2”>
< div class=“menu”>Menu< /div>
< /div>
< div class=“header3”>
< div class=“promo”>Promo 1< /div>
< div class=“promo”>Promo 2< /div>
< /div>
- Задаем header цвет фона (асфальт-синий-асфальт) и у последнего внешний отступ снизу от тела.
и у асфальтов добавим внутренние отступы сверху снизу, чтобы создалась как бы рамочка
.header1,
.header3 {
padding: 10px 0;
background-color: #34495e; фон асфальт
}
.header2{
background-color: #3498db фон синий
}
.header3 {
margin-bottom: 10px;
}
-
В основном блоке открываем тело с колонками
Левая и правая колонка одинаковы, по центру отличается, так что им даем одинаковые и индивидуальные классы< div class=“features”>
< div class=“column left-right”>Left< /div>
< div class=“column main”>Main< /div>
< div class=“column left-right”>Right< /div>
< /div> -
Телу задаем внешний отступ снизу от подвала
.features {
margin-bottom: 10px;
}
- Намечаем колонки в теле:
цвет фона
минимальная высота
.features .column {
min-height: 110px;
background-color:#3498db
}
-
Создаем блок в блоке с подвалом. (Чтобы можно было блоку footer потом нормально задать внутренний отступ)
< div class=“footer”>
< div>Footer< /div>
< /div> -
Задала подвалу минимальную высоту и цвет фона
.footer {
min-height: 35px;
background-color: #34495e;
}
- Далее я решила в header разобраться с top, menu и promo
top задаем цвет фона и мин высоту
.top {
background-color: #c0392b;
min-height: 35px;
}
menu просто мин высоту
.menu {
min-height: 35px;
}
promo красный фон, мин высоту и ширину, обтекание левое и отступ справа
.header3 .promo {
background-color: #c0392b;
min-height: 60px;
width: 170px;
float: left;
}
чтобы блоки не съехали у правого блока убираем отступ справа
.header3 .promo:last-child{
margin-right:0px;
}
- Тело документа полезло на голову, поэтому в css и к header с флоат блоками добавим клеарфикс
.clearfix::after {
content: “”;
display: table;
clear: both;
}
-
Теперь разберемся с колонками в теле.
задаем им флоат левый
.features .column {
float:left;
}
-
Во features ставим распорку. Добавляем класс clearfix
-
задаем размеры левому, правому блокам и маину
.features .left-right {
width: 70px;
}
.features .main {
width: 190px;
}
14.Добавляем между ними отступы и убираем отступ у последнего блока, чтобы все влезло и не съехало.
.features .column {
margin-right: 10px;
}
.features .left-right:last-child {
margin-right: 0px;
}
ВРОДЕ БЫ СЕТКА ГОТОВА. Теперь надо вставить блоки позиционеры
- Добавляем в css рамку (для себя чтобы видеть) и распорку для блока позиционера
.layout-positioner {
border: 2px dashed #000000;
}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
-
Убираем основной блок wrapper, При этом содержимое растягивается, а флоат колонки прилипнут к своей стороне
-
оборачиваем СОДЕРЖИМОЕ каждого header, features и footer в блок позиционер
- Этому блоку в css приписываем ширину содержимого и выравнивание по центру.
.layout-positioner {
border: 2px dashed #000000;
width: 350px;
margin: 0 auto;
}
-
Рамочку можно убрать уже
-
Теперь разберемся с отступами у текста. Нужно добавить padding и проследить, чтобы ничего не съехало.
Голова
.top{
background-color: #c0392b;
min-height: 25px; (было 35рх) отняли отсюда сумму этих отступов
padding: 5px; прибавили отступы
}
.menu {
min-height: 25px; (было 35рх)
padding: 5px; прибавили отступы
}
это колонки так что убираем сумму отступов еще и по ширине:
.header3 .promo {
background-color: #c0392b;
min-height: 50px; (было 60рх)
width: 160px; (было 170рх)
float: left;
margin-right: 10px;
padding: 5px; прибавили отступы
}
Тело
.features .left-right {
width: 60px; (было 70px)
}
.features .main {
width: 180px; (было 190px)
}
.features .column {
min-height: 100px;
background-color:#3498db;
float:left;
margin-right: 10px;
padding: 5px; прибавили отступы
}
подвал
.footer {
min-height: 25px; (было 35px)
background-color: #34495e;
padding: 5px; прибавили отступы
}
- Можно убрать класс clearfix из кода
ИТОГОВЫЙ КОД:
Испытание: строим сетку <div class="header1">
<div class="layout-positioner">
<div class="top">Header</div>
</div>
</div>
<div class="header2">
<div class="layout-positioner">
<div class="menu">Menu</div>
</div>
</div>
<div class="header3">
<div class="layout-positioner">
<div class="promo">Promo 1</div>
<div class="promo">Promo 2</div>
</div>
</div>
<div class="features">
<div class="layout-positioner">
<div class="column left-right">Left</div>
<div class="column main">Main</div>
<div class="column left-right">Right</div>
</div>
</div>
<div class="footer">
<div class="layout-positioner">
<div>Footer</div>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.header1,
.header3 {
padding: 10px 0;
background-color: #34495e;
}
.header2 {
background-color: #3498db;
}
.header3 {
margin-bottom: 10px;
}
.top {
background-color: #c0392b;
min-height: 25px;
padding: 5px;
}
.menu {
min-height: 25px;
padding: 5px;
}
.header3 .promo {
background-color: #c0392b;
min-height: 50px;
width: 160px;
float: left;
margin-right: 10px;
padding: 5px;
}
.header3 .promo:last-child{
margin-right:0px;
}
.features .left-right {
width: 60px;
}
.features .main {
width: 180px;
}
.features {
margin-bottom: 10px;
}
.features .column {
min-height: 100px;
background-color:#3498db;
float:left;
margin-right: 10px;
padding: 5px;
}
.features .left-right:last-child {
margin-right: 0px;
}
.footer {
background-color: #34495e;
min-height: 25px;
padding: 5px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
Если есть что еще попровить или улучшить, напишите.
UPD: header и footer поправлены.
