27/32 100% Пошаговое построение


#1

Будет очень много букв.

Сначала я выполнила задание на 100%, но я задавала везде фиксированные размеры и делала это как попало. Попробовала второй раз с блоками распорками, но делала это, видимо, не правильно и все плыло и ехало совсем не как надо.

Решила еще раз подробно разобрать тему и по ней составила пошаговое построение.

Вдруг кому-нибудь пригодиться и он сэкономит кучу времени

  1. Задаем основной блок wrapper и его свойства:
    ширина содержимого 350рх
    отступы авто

.wrapper {
width: 350px;
margin: 0 auto;
}

  1. Внутри основного блока открыла 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>

  1. Задаем header цвет фона (асфальт-синий-асфальт) и у последнего внешний отступ снизу от тела.
    и у асфальтов добавим внутренние отступы сверху снизу, чтобы создалась как бы рамочка

.header1,
.header3 {
padding: 10px 0;
background-color: #34495e; фон асфальт
}

.header2{
background-color: #3498db фон синий
}

.header3 {
margin-bottom: 10px;
}

  1. В основном блоке открываем тело с колонками
    Левая и правая колонка одинаковы, по центру отличается, так что им даем одинаковые и индивидуальные классы

    < div class=“features”>
    < div class=“column left-right”>Left< /div>
    < div class=“column main”>Main< /div>
    < div class=“column left-right”>Right< /div>
    < /div>

  2. Телу задаем внешний отступ снизу от подвала

.features {
margin-bottom: 10px;
}

  1. Намечаем колонки в теле:
    цвет фона
    минимальная высота

.features .column {
min-height: 110px;
background-color:#3498db
}

  1. Создаем блок в блоке с подвалом. (Чтобы можно было блоку footer потом нормально задать внутренний отступ)

    < div class=“footer”>
    < div>Footer< /div>
    < /div>

  2. Задала подвалу минимальную высоту и цвет фона

.footer {
min-height: 35px;
background-color: #34495e;
}

  1. Далее я решила в 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;
}

  1. Тело документа полезло на голову, поэтому в css и к header с флоат блоками добавим клеарфикс

.clearfix::after {
content: “”;
display: table;
clear: both;
}

  1. Теперь разберемся с колонками в теле.

    задаем им флоат левый

.features .column {
float:left;
}

  1. Во features ставим распорку. Добавляем класс clearfix

  2. задаем размеры левому, правому блокам и маину

.features .left-right {
width: 70px;
}

.features .main {
width: 190px;
}

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

.features .column {
margin-right: 10px;
}

.features .left-right:last-child {
margin-right: 0px;
}

ВРОДЕ БЫ СЕТКА ГОТОВА. Теперь надо вставить блоки позиционеры

  1. Добавляем в css рамку (для себя чтобы видеть) и распорку для блока позиционера

.layout-positioner {
border: 2px dashed #000000;
}

.layout-positioner::after {
content: “”;
display: table;
clear: both;
}

  1. Убираем основной блок wrapper, При этом содержимое растягивается, а флоат колонки прилипнут к своей стороне

  2. оборачиваем СОДЕРЖИМОЕ каждого header, features и footer в блок позиционер

  1. Этому блоку в css приписываем ширину содержимого и выравнивание по центру.

.layout-positioner {
border: 2px dashed #000000;
width: 350px;
margin: 0 auto;
}

  1. Рамочку можно убрать уже

  2. Теперь разберемся с отступами у текста. Нужно добавить 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; прибавили отступы
}

  1. Можно убрать класс 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 поправлены.


#2

Почему в коде три .header?


#3

Не всё в порядке с футером…


#4

Мне показалось так удобней каждому header задать свой цвет, который будет растягиваться на всю страницу.
А как по другому можно сделать?


#5

Я имею в виду три одинаковых названия класса. А наличие блоков в разметке оправдано, вопросов по этому поводу нет.


#6

Отступ 55px?
Поняла, когда будем растягавить страницу, фиксированный отступ слева будет… фиксированным.
Подскажите, пожалуйста, как поправить или в каком уроке объясняется это?


#7

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

Прост я изначально хотела всему header задать фон асфальт, а потом перекрыть второй синим фоном, но когда дошла до padding поняла, что первый и третий header похожи и отличаются от второго и проще сделать их свойста и фоны отдельно от второго.
Так и оставила им одно название и работала с псевдоклассами.


#8

Всем трем блокам разные классы.


#9

Хорошо, спасибо :slight_smile:
Буду учитывать это


#10

Вы уже всё знаете.
Сделайте футер также как меню – тремя дивами…


#11

Точно, спасибо! Все думала, что же делать с подвалом и так и не заметила, что в голове есть такой же элемент :slight_smile: