Постройте здесь свою башню. Будем разбираться на конкретном вашем примере.
1 лайк
p/s/ как по мне “мой” способ гораздо понятнее , как мне кажется…
Смотрите код по той же ссылке. Надеюсь, что не запутаю вас еще больше.
Задавайте вопросы, может я что-то упустила.
1)))) padding: 10px 0; / решение вашей проблемы с продолжением фона */*
— это всегда работает когда блок в блоке и, если задавать внутренний верхний отступ первому блоку, или есть варианты когда решают наружные?
2)))) .promo-block {
** font-size: 0; /* убираю пробелы между блочно-строчными элементами */**
}
— не совсем понял зачем это значение, для чего оно применяется я понимаю, но зачем обнулять эти элементы, если можно “подогнать” до нужных размеров и почему только в 2 случаях Вы их применили, но не во всех?
3)))) .promo{
** display:inline-block; /*** если делаете с помощью блочно-строчных, учитывайте пробелы */
margin-top:10px; _/ а то отступ между ними у вас уже 7px, а не 10 /_
----- где их, опять же учитывать и для какой цели? относительно чего их учитывать и что нужно брать за основу?
4)))) .promo1{
** /margin-left:50px;/ /* промо тоже надо центровать */**
** margin-right: 10px;**
}
---- не понимаю, он у меня был же на нужном месте, что не так?
5)))) clearfix применяется только с float ? можно ли комбинировать в 1 сетке и блочно-строчный стиль и float с clearfix’ом и, если да, имеет ли смысл этим заморачиваться? и опять же, Вы пишите : “Если вы построили сетку на инлайн-блоках, то распорка уже не нужна…”, я построил как это вижу, но не при помощи флоатов и распорок. Хотелось бы именно это освоить
6)))) div class=“promo-block center” !-- еще одна обертка, иначе на промо центровщик не повесить –
---- я же его выровнял и без дополнительного обертывания, не смог лишь расцепить снизу от основного фона, для чего его центровать иным способом кроме отступов?
7)))) Вы добавили класс center и задаете ему отдельные параметры, почему нельзя просто их присвоить к имеющимся .header и .menu ?
Большое спасибо за помощь!
1. Что касается отступа сверху, то это работает как метод избавления от выпадания внешних отступов, описанный в курсе “Блочная модель документа”. Отступ снизу - так совпало, что подошел, но мог быть и margin.
2-3. О блочно-строчных элементах и пробелах рассказывается в шагах 28-31 курса “Сетки”. Я выпустила из вида тот факт, что вы возможно не дошли до них.
4. Да, вы поставили элемент на место с помощью margin-left: 50px;, но это не центровка. Хотя бы потому, что отступ справа вы совсем не задавали.
5. Можно комбинировать. Попробуйте переделать блок с тремя колонками на флоатах. Я посмотрю, как вы используете clearfix.
6-7. Опять же, универсальный центровщик с автоматическими отступами - это важно. Можно задавать автоматические отступы каждому блоку в отдельности, как вы делали (хотя бы пока вам сложно просчитывать шаги наперед и удобнее больше расписывать). Но учиться группировать свойства тоже не помешает.
Там уже много написано. Легко запутаться. Начинаем с нуля. Прямо сейчас пишите, а я понаблюдаю. Ничего не копируйте. Блок-центровщик, внутри три колонки на флоатах.
Хотел услышать доброго совета по качеству написанного кода:
HTML:
<body>
<div class="up-header">
<div class="header">Header</div>
</div>
<div class="up-menu">
<div class="menu">Menu</div>
</div>
<div class="up-promo clearfix">
<div class="promo1">Promo 1</div>
<div class="promo2">Promo 2</div>
</div>
<div class="up-column clearfix">
<div class="column-left">Left</div>
<div class="column-main">Main</div>
<div class="column-right">Right</div>
</div>
<div class="up-footer">
<div class="footer">Footer</div>
</div>
</body>
CSS:
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.up-header,
.up-promo,
.up-footer {
background-color: #34495e;
}
.up-header .header,
.up-promo .promo1,
.up-promo .promo2 {
background-color: #c0392b;
}
.up-menu,
.column-left,
.column-main,
.column-right {
background-color: #3498DB;
}
.up-header {
padding: 10px 40px 10px 40px;
}
.header {
padding: 5px;
width: 340px;
height: 25px;
margin: auto;
}
.up-menu,
.up-footer {
padding: 5px 40px 0px 55px;
height: 30px;
}
.up-promo {
padding: 10px 50px 10px 50px;
}
.promo1,
.promo2 {
height: 50px;
width: 160px;
padding: 5px;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.up-column {
padding: 0px 45px 0px 45px;
}
.column-left {
float: left;
}
.column-main {
float: left;
padding: 5px;
width: 180px;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
.column-right {
float: right;
}
.column-left,
.column-right {
padding: 5px;
width: 60px;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}Вы выбрали хорошую тему, чтобы задать свой вопрос. 
Выше в сообщениях очень много советов по коду. Большинство из них как раз к вашему варианту.