Тем, что содержимое футера будет отцентровано при любой ширине body.
Когда в футере написано всего лишь одно слово - да, не совсем понятно.
При вашей записи отступ 55px получается только слева.
А что на счет правого края? Поэтому и нужен центровщик.
<body>
<div class= "header-conteiner">
<div class="layout-positioner">
<div class="head">
<div> Header </div>
</div>
</div>
</div>
<div class="menu-conteiner">
<div class="layout-positioner"> Menu </div>
</div>
<div class= "promo-conteiner">
<div class="layout-positioner">
<div class="layout-promo">
<div>Promo 1</div>
</div>
<div class="layout-promo">
<div>Promo 2</div>
</div>
</div>
</div>
<div class="column-conteiner">
<div class="layout-positioner">
<div class="layout-column ">
<div>Left</div>
</div>
<div class="layout-column">
<div>Main</div>
</div>
<div class="layout-column">
<div>Right</div>
</div>
</div>
</div>
<div class= "footer-conteiner">
<div class="layout-positioner"> Footer </div>
</div>
</body>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
.header-conteiner {
background-color:#34495e;
padding:10px;
min-height:35px;
}
.head {
background-color: #c0392b;
min-height: 25px;
padding:5px;
}
.menu-conteiner {
background-color: #3498DB;
min-height: 35px;
}
.menu-conteiner .layout-positioner {
padding:5px 0px 0px 10px;
}
.promo-conteiner {
background-color:#34495e;
width:450px;
min-height: 70px;
padding-top:10px;
}
.layout-promo {
background-color: #c0392b;
width: 170px;
min-height: 60px;
float: left;
}
.layout-promo:first-child {
margin-right:10px;
}
.layout-promo div {
padding:5px;
}
.column-conteiner {
min-height: 120px;
margin-top: 10px;
}
.layout-column {
background-color: #3498DB;
min-height: 110px;
width: 190px;
float:left;
}
.layout-column:first-child {
width: 70px;
margin-right:10px;
}
.layout-column:last-child {
width: 70px;
margin-left:10px;
}
.layout-column div {
padding: 5px;
}
.footer-conteiner {
background-color:#34495e;
min-height: 35px;
}
.footer-conteiner .layout-positioner {
padding:5px 0px 0px 10px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
Теперь гуд?)
Тему “Сетки” можете считать усвоенной.
Спасибо большущее за помощь!)
Доброго времени суток.
Хотелось бы услышать конструктивную критику касательно моего кода.
Результат у меня 100% - но я хотел бы знать хорошо ли мой код оптимизирован, нет ли лишних строчек и тд.
Заранее спасибо большое за уделенное внимание.
И еще хотелось бы отметить какие ребята молодцы! Обучающий материал супер, (отличная идея - подавать теорию, и сразу в том же окне, пробовать на практике). Я проскролил много разных линков в интернете, но более детального объяснения(на русском) не видал. В общем супер. Желаю всего наилучшего в развитии вам ребята!
Собственно сам код:
HTML
CSS
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
.header {
background-color: #34495e;
padding-top: 10px;
}
.header-item {
box-sizing: border-box;
padding: 5px;
min-height: 35px;
margin-bottom: 10px;
background-color: #c0392b;
}
.menu-header {
padding: 5px 55px;
min-height: 25px;
background-color:#3498DB;
}
.promo1,
.promo2{
box-sizing: border-box;
display: inline-block;
background-color:#c0392b;
float: left;
width: 170px;
min-height:60px;
padding: 5px;
margin: 10px 10px 10px 0px;
}
.promo2 {
margin-right: 0;
}
.content {
float:left;
margin-top: 10px;
margin-bottom: 10px;
background-color: #3498DB;
}
.box3{
width: 60px;
min-height: 100px;
padding: 5px;
}
.box2{
width: 180px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
}
.box1{
width: 60px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
}
.footer {
background-color:#34495e;
min-height: 35px;
padding: 5px 55px;
}
Судя по css-коду, не работает центровщик в меню и футере.
Но в html коде, центровщик, прописан для всех по видимому правильно. А в CSS cтилях он прописан один общий для всех. В чем же тут может быть ошибка, не подскажите?
Если у вас в коде есть такие отступы - значит центровщик не работает.
я понимаю что он не работает в меню и футере, но почему ? он в html коде вроде правильно расположен и правила для него одни прописаны.
С помощью отступа 55px вы перекрываете автоматический отступ центровщика (50px). Величина padding меньше 50px никак не влияет на расположение блока меню или футера относительно центровщика.
Будет правильнее, если вы напишете отдельно внутренние отступы для центровщика в меню и футере. Пример селектора для меню:
.menu-header .layout-positioner { ... }
.menu-header .layout-positioner {
width: auto;
padding: 5px 55px;
min-height: 25px;
background-color:#3498DB;
}
.footer .layout-positioner {
width: auto;
background-color:#34495e;
min-height: 35px;
padding: 5px 55px;
}
вот так ?
без задания падинга слева 55 оно почему-то слетает к окну браузера а не выравнивается как текст в хедере , не могу понять почему
Судя по картинке вашего кода, оно никак не может слетать к окну браузера. Отступ 50px у вас уже есть за счет центровщика, Значит остается добавить отступ справа и слева по 5px, но таким образом, чтобы ширина центровщика не становилась больше, чем прописано - 350px. Здесь два варианта: или писать ширину центровщика меньше (т.е. 340px получается с учетом отступов) для меню и футера, или воспользоваться свойством box-sizing, чтобы отступы учитывались в составе прописанной ширины, а не добавлялись к ней.
Я пробовал и для меню задавать ширину авто, оно позволяет расстянуть голубой фон на всю ширину бади, но все равно текст не находится на нужном месте, а бокс-сайзинг вообще обрезает якобы лишние куски меню…почему так происходит?
.menu-header .layout-positioner {
width: 350px;
margin: 0 auto;
padding: 5px;
box-sizing: border-box;
min-height: 25px;
background-color:#3498DB;
}
.footer .layout-positioner {
width: 340px;
background-color:#34495e;
min-height: 35px;
padding: 5px;
margin: 0 auto;
}
Отступы и ширину вы задаете для центровщика, а все остальные свойства остаются для menu-header и footer.
все получилось, спасибо
