Спасибо большое, я не думала, что нужно проверять это все на деле, хотя это и логично. Просто не приходило в голову, выполняла задания и всё. Теперь буду. у меня стоит Sublim Text, вроде разобралась как он работает.
У меня остался по заданию один вопрос. Зачем центровать Меню? я так понимаю этот блок должен растягиваться по всей ширине. Если обернуть в отдельный div текст, что будет в нем находиться, тогда да, есть смысл центровать текст, чтоб не делать отступ внутренний.
А Вы не похожи на человека. который учится) Вы наверное уже всё здесь прошли и работаете в этой сфере?
1 лайк
немного поправила текст:
<div class="head">
<div class="header centerer">Header</div>
<div class="menu">Menu</div>
<div class="centerer">
<div class="promo promo1">Promo 1</div>
<div class="promo promo2" >Promo 2</div>
</div>
</div>
<div class="centerer">
<div class="column left">Left</div>
<div class="column main">Main</div>
<div class="column right">Right</div>
</div>
<div class="foot">
<div class="centerer">
<div class="footer">Footer</div>
</div>
</div>
и код:
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.centerer{
width: 350px;
margin-left: auto;
margin-right: auto;
}
.centerer::after {
display: table;
content:"";
clear: both;
}
.head {
padding-top:10px;
padding-bottom:10px;
background: #34495e;
}
.header {
width: 340px;
min-height:25px;
padding:5px;
background: #c0392b;
}
.menu {
min-height:25px;
padding:5px;
padding-left:55px;
margin-top:10px;
background: #3498DB}
.promo{
width: 160px;
min-height: 50px;
padding:5px;
background: #c0392b;
margin-top:10px;}
.promo1 {float: left;}
.promo2 {float: right;}
.column{
min-height: 100px;
padding:5px;
margin-top:10px;
margin-bottom:10px;
background: #3498DB;}
.left {float: left; width: 60px;}
.main {float: left; margin-left:10px; width: 180px; }
.right{float: right;margin-left:10px;width: 60px;}
.foot{background:#34495e; }
.footer{padding:5px; min-height:30px;}
Все замечания учла, кроме центравщика в Меню, так как пока не могу понять зачем он , если только один div. И еще, в строчке header все равно приходится указать ширину, так как она на 10px короче центровщика. Если менять центровщик, то много padding и margin нужно добавлять в остальном.
проверила все через программу и опять миллион вопросов)))))
например почему в колонках left right слова целиком не влазят и пропадают окончания, поняла почему нужен центровщик в колонке Меню!
Вариант Ваш с центровщиком в Меню
И вариант мой с еще одним div в меню
спасибо еще раз!!! Наконец-то уже здесь всё разобрала
1 лайк
Это уже на наша забота.
Если контент не помещаются в колонках, – значит дизайнер в макете должен либо уменьшить шрифт, либо увеличить размер колонок по горизонтали.
Нет, я такой же ученик как и Вы. В курсе дошёл до раздела “Знакомство с HTML5”…
@VikkiPro С чем-нибудь ещё разберёмся?
Конечно, давайте разбираться. Тем более я уже все проверяю в Sublime 
. Я вчера еще раз переделала сетки последнее задание. До этого был полный крах,много непонятного текста. Вчера все оказалась просто, добавлением всего наверное 8 строчек в код. Осталась одна загвоздка с интервалами. Прочла статью, которую в теории рекомендовали, но я почему-то пропустила 
, про пять способов решения этого вопроса. Но у меня закончились попытки. Сегодня после 23:00 добавят и можем разобраться с 32/32. Мне показалось, что это легкое задание, за исключением сдвига первого кота) давайте, я создам там тему, выложу свой вариант и поговорим, может я много что упустила или не учла. А так называйте любую тему, буду выкладывать свое решение и будем обсуждать. Я прошла все 19 курсов, все на 100% , но Вы же видели мои решения, они мягко сказать " не совершенны" 
. Хотела уже идти на платные, но я никуда не спешу мне хочется разобраться. Раз Вам это интересно, то помогите мне, я думаю много новичков, смогут найти себе ответы здесь. Еще раз спасибо!
<body>
<div class="header">
<div class="layout-positioner">
<div class="layout-column-1 layout-column"> Header</div>
<div class="layout-column-2 layout-column"> Menu
</div>
<div class="layout-column-3 layout-column"> Promo 1
</div>
<div class="layout-column-4 layout-column"> Promo 2
</div>
</div>
</div>
<div class="features clearfix">
<div class="layout-positioner">
<div class="layout-column-1 layout-column">
Left
</div>
<div class="layout-column-2 layout-column">
Main
</div>
<div class="layout-column-3 layout-column">
Right
</div>
</div>
</div>
<div class="footer">
<div class="layout-positioner">
Footer
</div>
</div>
</body>
.header {
min-height:auto;
padding-top:10px;
color: white;
background:#34495e;
}
.header .layout-column-1 {
float:none;
margin:0 50px 10px;
width: 340px;
height:30px;
padding:5px 5px 0;
background:#c0392b;
}
.header .layout-column-2 {
float:none;
height:30px;
margin-bottom:10px;
padding:5px 0 0 55px;
background:#3498DB;
}
.header .layout-column-4 {
float:right;
margin-right:50px;
margin-bottom:10px;
width:160px;
min-height:50px;
padding:5px;
background:#c0392b;
}
.header .layout-column-3 {
float:left;
margin-left: 50px ;
margin-bottom:10px;
width:160px;
min-height:50px;
padding:5px;
background:#c0392b;
}
.clearfix::after {
display: table;
content: “”;
clear:both;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.features .layout-column {
background:#3498DB;
margin:10px 5px;
min-height:100px;
}
.features .layout-column-1 {
float:left;
margin-left:50px;
width:60px;
padding:5px 5px;
}
.features .layout-column-3 {
float:right;
margin-right:50px;
width:60px;
padding:5px 5px;
}
.features .layout-column-2 {
float:left;
margin:10px 5px;
width:180px;
padding:5px 5px;
}
.footer {
min-height: 35px;
padding:5px 55px;
color: white;
background:#34495e;
}
@Valery_S добрый день.
А не могли бы объяснить (показать) как вы предлагали реализовать этот момент:
Но, меню у Вас по прежнему не центрируется.
Хедер центрируется, но не при помощи центровщика, а свойствами magrin класса .header.
Так тоже можно, но не логично.
Удобнее и меню и хедер по-отдельности завернуть в центровщик.
Вы предлагаете использовать 2 разных центровщика (один для блока меню и второй для остальных блоков?) вместо одного паддинга/маржина для текста “Menu” ? Почему?
И если не сложно, покритикуйте мой вариант https://jsfiddle.net/Kavitacia/4uhLqs50/1/
Сетка работает правильно – всё тянется по вертикали и центрируется.
Но, не центрируется меню.
Можно сказать, что центровщики разные, поскольку в HTML у каждого блока (или нескольких блоков) свой.
Но, в CSS – это один центровщик – в данном случае .layout-positioner, и свойства этого класса будут применяться ко всем блокам одинаково.
В Вашим коде меню выглядит расположенным по центру из-за padding-left: 55px;
Однако, при других размерах окна все остальные блоки будут расположены по середине, а меню всегда будет на 55px от левого края.
Измените ширину в body и это сразу станет заметно.
Поэтому да, я предлагаю и меню вложить в центровщик.
У хедера свой, у promo 1+promo 2 – свой, у меню – свой.
Но, с меню лучше поступить точно также как с футером – кроме центровщика добавить ещё блок для фона (если бы не голубой фон на всю ширину окна – можно было бы меню центрировать вместе с хедером, promo-1+promo2)
<div class="head">
<div class="layout-positioner">
<div class="header">Header</div>
</div>
<div class="название придумайте сами"> /*для голубого фона*/
<div class="layout-positioner">
<div class="menu">Menu</div>
</div>
</div>
<div class="layout-positioner">
/* если бы не голубой фон на всю ширину окна -- можно было бы */
/* и <div class="header">Header</div> */
/* и <div class="menu">Menu</div> вставить здесь...*/
<div class="promo promo1">Promo 1</div>
<div class="promo promo2">Promo 2</div>
</div>
</div>
…надеюсь не запутал…
Вот именно голубой фон меня и вынудил использовать костыль " padding-left: 55px", я почему-то не додумался в этом месте до связки див_для_фона -> ценровщик -> меню, а зациклился на свойстве центровщика width: 350px - что делает невозможным фон на всю щирину.
Спасибо за ответ, не запутали. Ваше решение мне нравится.
Всем доброго дня!
Прошу понимающих посмотреть код и высказать замечания
https://jsfiddle.net/NikViP/d1ty4175/
С уважением!
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class="content">
<div class="layout-positioner">
<div class="header">Header</div>
</div>
<div class="menu">
<div class="layout-positioner">
<div>Menu</div>
</div>
</div>
<div class="layout-positioner clearfix">
<div class="promo1">Promo 1</div>
<div class="promo2">Promo 2</div>
</div>
</div>
<div class="clearfix">
<div class="layout-positioner">
<div class="column column-left">Left</div>
<div class="column column-main">Main</div>
<div class="column column-right">Right</div>
</div>
</div>
<div class="footer">
<div class="layout-positioner">
<div>Footer</div>
</div>
</div>
</body>
</html>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.content, .footer {
background-color: #34495e;
}
.header, .promo1, .promo2 {
background-color: #c0392b;
}
.menu, .column {
background-color: #3498DB;
}
.content {
min-height: 160px;
padding-top: 10px;
margin-bottom: 10px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.header {
min-height: 25px;
padding: 5px 5px;
}
.menu {
min-height: 30px;
margin: 10px 0;
padding-top: 5px;
padding-left: 10px;
}
.promo1 {
float: left;
width: 160px;
min-height: 50px;
margin-right: 10px;
padding: 5px 5px;
}
.promo2 {
float: right;
width: 160px;
min-height: 50px;
padding: 5px 5px;
}
.column {
float: left;
min-height: 100px;
padding: 5px 5px;
margin-right: 10px;
}
.column-left {
width: 60px;
}
.column-main {
width: 180px;
}
.column-right {
width: 60px;
margin-right: 0;
}
.footer {
min-height: 35px;
margin-top: 10px;
padding-top: 5px;
padding-left: 10px;
}Вполне приемлема!
Перед кодом должна быть пустая строка.
От левого края окна до кода должно быть не менее 4 пробелов.
Вставляете, форматируете кнопкой </> в редакторе сообщений.
(Кнопка </> добавляет к коду 4 пробела слева…)
Спасибо! Кажется получилось.
Ваш код не совсем верно центрует меню и футер…
В этой ветке, и многих других, достаточно информации, чтобы разобраться…
Сами попробуете, или нужны подсказки?
…и не совсем логично, на мой взгляд, применяется CSS…
Благодарю, что уделили своё время!
Конечно, вначале было бы здорово поразбираться самому, но для этого хотелось бы получить от вас более конкретное замечание. “Не совсем верно центрирует” – не смог понять, что имеется ввиду. Центрирует ведь? Пробовал заменять ширину body на 100% вместо фиксированной и тестировал в “стороннем” браузере – работет, центрирует. Просмотрел варианты других – увидел дополнительный div оборачивающий “центровщик”. Если вы об этом, то вначале сделал так же. Затем, когда просматривал код в поисках лишних, ненужных элементов – эту обёртку удалил. Решил не плодить сущностей без необходимости.
По поводу “нелогичности” в CSS тоже не очень понял, но готов согласиться 
Откуда взяться логичности у полного новичка?
Вы имеете в виду, что например не стоит делать отдельную запись типа:
.header, .promo1, .promo2 {
background-color: #c0392b;
}
…раз всё равно в коде дальше есть эти селекторы ( .header, .promo1, .promo2) с другими дополнительными опциями и цвет фона можно было дописать к ним?
Или речь ещё о чём-то?
Ещё раз спасибо за отклик!
Проверял средой разработки Chrome. Вызывается по F12.
Сравним результат работы Вашего кода:
Хедер правильно отцентрирован. У контента (текста) хедера везде одинаковые отступы.
На этой картинке видно, что центровщик футера смещён вправо и вниз.
Текст (особенно когда его мало) только выглядит расположенным по центру из-за отсутствия отступов, но сам блок с контентом сдвинут…
Предлагаю переписать футер заново, заодно разберём что, где, как работает…
Начнём с чистого листа…
1 Определяем <div class="footer"></div>
Поскольку div элемент блочный – то он растянется по всей ширине родительского блока (body),
а поскольку он пока пустой, и в CSS правил для него ещё нет – по высоте будет занимать 0 пикселей. Т.е. невидимый.
2 Вкладываем в этот контейнер ещё один div.
<div class="footer">
<div class="layout-positioner"></div>
</div>
По-прежнему ничего не видно – два блока нулевой высоты, оба растянуты по всей ширине окна…
3 Добавляем ещё контейнер.
<div class="footer">
<div class="layout-positioner">
<div class="footer-content">Footer</div>
</div>
</div>
Теперь должен быть текст “Footer”.
Если Вы по-прежнему в мнибраузере курса – текст не видно из-за белого цвета шрифта, определённого в body.
Измените временно цвет – и надпись появится.
Наконец-то хоть что-то. Теперь видим какой-никакой контент.
Этот текст растянул по высоте div с классом footer-content.
.footer-content растянул по высоте .layout-positioner,
а тот в свою очередь растянул .footer.
Теперь достаточно эйчтиэмэля для написания сиэсэса.
4 Глядя на макет добавляем правило для .footer-content
.footer-content {
min-height: 35px; /* минимальная высота */
padding: 5px; /* отступы со всех сторон */
background-color: #34495e; /* фоновый цвет */
}
Белый цвет, определённый в body можно возвращать.
Теперь все немного нагляднее. При любом контенте (почти при любом) будут одинаковые отступы со всех сторон.
Блок будет растягиваться по высоте.
5 Определяем центровщик:
.layout-positioner {
width: 350px;
margin: 0 auto;
outline: 1px dashed red; /* временное свойство для наглядности расположения блока */
}
У центровщика одна задача – центрировать по горизонтали (не по вертикали) своё содержимое по отношению к родительскому блоку.
В данном случае родительским блоком является div c классом .footer.
А .footer по-прежнему растянут на всю ширину.
6 И последнее – то, что вначале было не совсем очевидно.
Зачем понадобился контейнер .footer?
Для фонового цвета за пределами центровщика.
.footer {
background-color: #34495e; /* фоновый цвет */
}
Так же строится и меню.
…да и всё остальное в этом испытании строится похожим образом…
.content {
min-height: 160px;
Минимальная высота не нужна – блок растягивается содержимым…
.menu {
min-height: 30px;
margin: 10px 0;
padding-top: 5px;
padding-left: 10px;
}
.footer {
min-height: 35px;
margin-top: 10px;
padding-top: 5px;
padding-left: 10px;
}
Эти правила Вы определили для родительских контейнеров центровщика – и подвинули центровщик вниз и вправо… (на второй картинке результат)
<div class="layout-positioner clearfix">
<div class="promo1">Promo 1</div>
<div class="promo2">Promo 2</div>
</div>
</div>
<div class="clearfix"> /* почему .clearfix здесь?*/
<div class="layout-positioner"> /* почему не здесь? */
<div class="column column-left">Left</div>
<div class="column column-main">Main</div>
<div class="column column-right">Right</div>
</div>
</div>
padding: 5px 5px; /* можно короче */
padding: 5px; /* вот так */
.header, .promo1, .promo2 { /* здесь нет ошибок */
background-color: #c0392b;
}
1 лайк
“Ваше величество! Вы знаете, что я старик честный, старик прямой.
Я прямо говорю правду в глаза, даже если она неприятна.
Позвольте вам сказать прямо, ваше величество…
Позвольте мне сказать вам прямо, грубо, по-стариковски: вы великий человек, государь!
Мне себя не перебороть. Я ещё раз повторю - простите мне мою разнузданность - вы великан! Светило!”
А, если серъёзно – очень глубоко! Да!
Перечитал ваш ответ уже несколько раз. Ещё буду!
Спасибо!!!
“Ах какой ты! Ах, ах!”
С одной стороны не считаю себя вправе заставлять вас возвращаться к тщательно пережёванному для меня вопросу. С другой, не хочу показаться бездумным потребителем!
Просто удаление минимальной высоты не работает. Блок НЕ растягивается содержимым.
Чтобы это (растягивание) случилось пришлось подумать (“Что характЕрно!” ) и добавить margin-bottom: 10px; блоку “Promo2”. Тогда да, блок .content растянулся.
И, да, я тоже за красоту:
"padding: 5px 5px; /* можно короче */
padding: 5px; /* вот так */"
Отсюда вопрос – как вернее (красивее)?
Так:
{ margin: 0 10px 10px 0;}
Или так:
{ margin-right: 10px;
margin-bottom: 10px;
}
Здесь дело не в красоте.
Эти два правила не равнозначны.
{ margin: 0 10px 10px 0;} переопределит размеры со всех сторон.
{ margin-right: 10px;
margin-bottom: 10px;
} переопределит только справа и снизу.
Это не значит, что сверху и слева будет ноль.
Сверху и слева останутся значения определённые ранее – это может быть и 99px, и -20px.
1 лайк