Сейчас пробую layout-positioner вписать. Правильно я понимаю, что этот класс нужен, чтобы снять ограничения в зафлоаченных блоках по ширине при необходимости (длинный текст, например)?
Нет, это для центрирования блоков, вместо вашего margin(padding)-left: 50px;
По сути тоже самое, но более продвинутый вариант)
Ineska, подправил. Подскажи, плиз, выделил в CSS. Я так понимаю, что в данном случае этот кусок не нужен:
.layout-positioner::after {
display: table;
content: “”;
clear: both;
CSS
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
p {
padding: 5px;
margin: 0;
}
header {
width: 450px;
height: 160px;
border: 0px solid white;
padding-top: 10px;
margin-bottom: 10px;
background-color: #34495e;
}
.header1 {
width: 350px;
height: 35px;
margin: 0 auto;
background-color: #c0392b;
}
.menu {
box-sizing: border-box;
width: 450px;
height: 35px;
margin: 10px 0;
padding-left: 50px; (как убрать?)
background-color: #3498DB;
}
.promo1 {
float: left;
width: 170px;
min-height: 60px;
background-color: #c0392b;
}
.promo2 {
float: right;
width: 170px;
min-height: 60px;
background-color: #c0392b;
}
.left {
float: left;
width: 70px;
min-height: 110px;
margin-right: 10px;
}
.main {
float: left;
width: 190px;
min-height: 110px;
}
.right {
float: right;
width: 70px;
min-height: 110px;
}
.layout-positioner {
margin: 0 auto;
width: 350px;
}
.block {
margin-bottom: 10px;
background-color: #3498DB;
}
.footer {
box-sizing: border-box;
clear: both;
width: 450px;
height: 35px;
padding-left: 50px; (как убрать?)
background-color: #34495e;
}
Блок .menu и .footer отдельно обернуть в блок .layout-positioner.
Но с высотами все равно ерунда получается. Смотрите. У дочерних блоков у вас min-height, но у родительских всё равно получается фиксированная высота (просто height у вас написано). Но без указания высоты ваши блоки “схлопнутся”. Вот и получается, что распорки вам всё-таки нужны.
1 лайк
Ineska, спасибо. Но я уже перестаю понимать как и что) Попробую наваять)
Пробуйте, конечно, это очень важная тема.
По максимому упростил CSS, сгруппировав элементы. Поставил еще одну псевдораспорку и layout.
CSS
p {
padding: 5px;
margin: 0;
}
header {
width: 450px;
border: 0px solid white;
padding-top: 10px;
background-color: #34495e;
}
.header1 {
height: 35px;
background-color: #c0392b;
}
.menu {
height: 35px;
margin: 10px 0 10px 0;
background-color: #3498DB;
}
.promo {
width: 170px;
min-height: 60px;
margin-bottom: 10px;
background-color: #c0392b;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.clearfix-visible:after {
content: “”;
display: table;
clear: both;
width: 100%;
height: 0px;
background: #e74c3c;
}
.block {
float: left;
min-height: 110px;
width: 70px;
background-color: #3498DB;
margin: 10px 0 10px 0;
}
.left {
margin-right: 10px;
}
.main {
width: 190px;
margin-right: 10px;
}
.footer {
height: 35px;
background-color: #34495e
}
.layout-positioner {
margin: 0 auto;
width: 350px;
}
Вижу, проделана большая работа. Но некоторые вопросы остались.
Header выравнивали отдельно, без layout-positioner. Распорку использовали только один раз, поэтому для footer осталось clear: both;
Отдельное внимание хочется уделить именно виду этой распорки. Обычно она делается как невидимый элемент. У вас прописана ширина, хотя можно обойтись и без нее. А высота и так равна нулю, по умолчанию.
Стили для блоков в main можно еще сгруппировать. В правило с селектором .block можно вынести еще float: left; min-height: 110px; и width: 70px;
А в целом уже очень неплохо всё сделано.
1 лайк
Ineska, спасибо за критику:grinning:. Выше внес изменения.
1 лайк
Спасибо большое Ineska. Я даже не читал другие темы, что вы скидывали. Не было всё времени. У нас праздники в городе, Славянский Базар:) Просто добавил вашу запись в параграфе. Убрал все остальные лишние отступы. Немного сразу полетели размеры блоков и кол-во % по решению задания вообще скатилось на “тепло”. Выровнял ширины и всё) 100% Всё без проблем) Ничего сложного. Как всегда - допускаешь ошибку на каком-то простом месте, а пытаешься решить проблему копая совсем в другом направлении, делая код всё замудрёней… Видимо в уроках маловато теории. Раз я облажался в таком нелепом случае, как
p {
padding: 5px;
margin: 0;
}
Ну или я немного туговат… По правде говоря мне очень тяжело даётся эта область. Раньше никогда не имел дел с программированием. Хотя это ещё даже далеко не программирование) Я вообще с компами на “вы”. Но пытаюсь разбираться, пока не сдаюсь)
Спасибо за отзыв) Сначала всегда тяжело. Но вы молодец, что не сдаетесь. Я желаю вам удачи в дальнейшем.
P.S. Поздравляю с родным для вас праздником) Фестиваль в своем городе - это классно.
5paun, норм, сам вторую неделю с нуля занимаюсь:grinning:
А я уже пересмотрел 3 курса видеоуроков по 25 часов каждый. Но всё-равно вот проблемы возникают. Тяжело усваиваю материал. А в связи с тем, что времени свободного мало, занимаюсь с перерывами, материал выветривается с головы…