Исправлять нужно многое и в HTML и CSS, и не только потому, что не сходится с образцом.
Введите в поиске по форуму Испытание: строим сетку [27/32], – советов, подсказок будет достаточно…
Спасибо большое, буду читать
Хорошо, что вы меня правильно поняли.
Готовое решение я бы мог предложить, но лучше разберитесь сами.
Начните с HTML – структура не продумана, классы перепутаны, имена классов не содержательны…
1 лайк
Да, я поняла, спасибо большое. Мне важно самой разобраться, чтоб дальше сложнее не было. Просто меня сбило, то что все остальное попало. Попробую перечитать еще раз теорию.
Валерий, добрый вечер. Я все таки перечитала все сначала и переделала работу с нуля. Подскажите, насколько логично и правильно теперь. Спасибо большое. Результат 100%. Я просто совсем новичок, хотя с образованием IT.
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="header block">Header</div>
<div class="menu block">Menu</div>
<div class="promo1 block">Promo 1</div>
<div class="promo2 block">Promo 2</div>
<div class="left block">Left</div>
<div class="main block">Main</div>
<div class="right block">Right</div>
<div class="footer block">Footer</div>
</div>
</body>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
}
.container {
background:#34495e;
width: 450px;
height:170px;
margin: 0;
}
.block {
margin-top:5px;
margin-bottom: 5px;
padding: 5px;
color:white;
}
.header{
background:#c0392b;
margin-top:10px;
margin-left:50px;
width: 340px;
height:25px;
float:left;
}
.menu{
background:#3498DB;
margin:5px 0px;
width: 390px;
height:25px;
float:left;
padding-left:55px;
}
.promo1{
background:#c0392b;
margin-left:50px;
width: 160px;
height:50px;
float:left;
}
.promo2{
background:#c0392b;
margin-right:50px;
width: 160px;
height:50px;
float:right;
}
.left{
background:#3498DB;
margin-left:50px;
margin-top:15px;
width: 60px;
height:100px;
float:left;
}
.main{
background:#3498DB;
margin-left:10px;
margin-top:15px;
width: 180px;
height:100px;
float:left;
}
.right{
background:#3498DB;
margin-right:50px;
margin-top:15px;
width: 60px;
height:100px;
float:right;
}
.footer{
background:#34495e;
margin:5px 0px;
width: 390px;
height:30px;
float:left;
padding-left:55px;
}
Даже не знаю с чего начать…
Наверное логика есть, но я её не осилю.
У меня здесь вопросов больше чем у Вас.
Откройте предыдущее задание, обратите внимание на структуру HTML.
Если не всё понятно – придётся возвратиться на несколько уроков…
Рад помочь, но Вам нужно повторить float, разобраться с центровщиком, с размерами по вертикали, с псевдораспорками…
Спасибо большое, буду разбираться дальше. Все бесплатные уроки прошла, а именно на этом много вопросов. Хочу сначала закончить все здесь, а потом идти на платные
1 лайк
Добрый вечер. И снова, я к Вам)
Еще раз большое спасибо за помощь. Новый вариант, я уже вроде все здесь внимательно перечитала, погуглила всё.
<div class="wrapper">
<div class="verx clearfix">
<div class="layout-column header">Header</div>
<div class="layout-column menu">Menu</div>
<div class="layout-column promo1">Promo 1</div>
<div class="layout-column promo2">Promo 2</div>
</div>
<div class="features clearfix">
<div class="layout-column left">Left</div>
<div class="layout-column main">Main</div>
<div class="layout-column right">Right</div>
</div>
<div class="footer clearfix">Footer
</div>
</div>
</body>
и код:
.wrapper {
width: 450px;
margin: 0 auto;
}
.clearfix::after {
display: table;
content: " ";
clear: both;
}
.verx {
margin-bottom: 10px;
color: white;
background: #34495e;
}
.verx .header {
float:left;
margin-top:10px;
margin-left:50px;
padding:5px;
width: 340px;
height:25px;
background: #c0392b;
}
.verx .menu {
float: right;
margin-top:10px;
padding:5px;
padding-left:55px;
width: 390px;
height:25px;
background: #3498DB;
}
.verx .promo1 {
float: left;
margin-top:10px;
margin-left:50px;
padding:5px;
width: 160px;
height:50px;
background: #c0392b;
}
.verx .promo2 {
float: right;
margin:10px;
margin-right:50px;
padding:5px;
width: 160px;
height:50px;
background: #c0392b;
}
.features {
margin-bottom: 10px;
}
.features .layout-column {
float:left;
padding: 5px;
min-height: 100px;
background: #3498DB;
margin-left:10px;
width:60px;
}
.features .left{
margin-left:50px;
}
.features .main{
width:180px;
}
.footer {
padding:5px;
padding-left:55px;
min-height: 40px;
color: white;
background: #34495e;
}
… немножко лучше (правда, не намного).
Но, по крайней мере уже проще что-то рекомендовать.
Всё же Вам по прежнему нужно повторить float, разобраться с центровщиком, с размерами по вертикали, с псевдораспорками…
Зачем float в хедере и в меню?
Если блоков несколько – тогда флоат есть смысл применять, чтобы расположить их по горизонтали.
Но, меню и хедер не нужно обтекать ни слева, ни справа.
Центровщик появился.
И выравнивает всю сетку целиком по середине,
Но, по середине нужно расположить только блоки с контентом.
Тёмная часть футера и верхняя тёмная часть должны растянуться по ширине окна.
Центрировать нужно по отдельности хедер, меню, футер,
Promo 1 и Promo 2 лучше положить в отдельный контейнер,
И центрировать уже его – этот контейнер с Promo.
И вот в этом же контейнере уже есть смысл применять флоат для блоков Promo1,2.
Также и с тремя остальными блоками Left, Right, Main.
Отдельный контейнер --> ценрируем --> флоатим.
Далее: у Вас везде заданы жесткие размеры по вертикали.
При наполнении контентом – блоки не будут растягиваться вниз: контент либо не будет помещаться, либо вывалиться вниз за пределы блоков.
Вместо height в этом испытании лучше применять min-height.
Класс .clearfix я бы убрал, а его свойства перенёс всё в тот же центровщик.:
.имя-центровщика { /* центровщик */
width: 350px;
margin-left: auto;
margin-right: auto;
outline: 1px dashed #0f0; /* временное свойство */
}
.имя-центровщика::after { /* псевдораспорка */
display: table;
content: "";
clear: both;
}
Временное свойство пригодится во время разработки,
чтобы видеть границы и расположение блоков внутри центровщика.
В дальнейшем его нужно, естественно, закоментировать или удалить.
Если мне удасться разгадать, по какой схеме Вы назначаете блокам классы – возможно, смогу ещё что-нибудь дописать…
И немного об общем подходе.
Попробуйте следующее:
Не пишите весь код HTML, потом весь CSS?
Вначале добавьте в HTML один блок – хедер, добейтесь от него по максиму.
Добавьте ему класс, в CSS классу присвойте нужные свойства, чтобы увидеть и этот блок, и что будет у него внутри.
Пригодится ли этот класс в дальнейшем ещё где-либо?
Подумайте, как этот блок будет взаимодействовать с другими блоками.
Нужно ли его завернуть в ещё один div (кстати, нужно будет).
И, если нужно, то с какой целью?
Вот так всё можно навернуть одно за другим…
2 лайка
Оказывается, всё сложнее, чем показалось на первый взгляд. Это наверное из-за того, что я вижу в этом задании просто таблицу с блоками, которые просто нужно поставить правильно по местам. А Вы смотрите на это, зная, что дальше это будет все заполняться и что вылезут бока. Очень тяжело понять зачем нужны распорки или центровщики читая только теорию и не видя это на практике. Спасибо вам большое, благодаря Вашей помощи я начинаю копаться глубже. Ведь проходя задание и видя, что там 100% , ты думаешь, что всё ок и идешь дальше. А оказывается нет(((. Еще раз спасибо и мой уже 4 - 100% вариант)))
<div class="head">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="centrovshik">
<div class="promo promo1">Promo 1</div>
<div class="promo promo2" >Promo 2</div>
</div>
</div>
<div class="stolbikiLMR">
<div class="centrovshik">
<div class="stolb left">Left</div>
<div class="stolb main">Main</div>
<div class="stolb right">Right</div>
</div>
</div>
<div class="foot">
<div class="centrovshik">
<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;
}
.centrovshik{
width: 350px;
margin-left: auto;
margin-right: auto;}
.centrovshik::after {
display: table;
content: “”;
clear: both; }
.head {
width: 100%;
padding-top:10px;
padding-bottom:10px;
color: white;
background: #34495e; }
.header {
width: 340px;
min-height:25px;
margin-left: auto;
margin-right: auto;
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;}
.stolbikiLMR .stolb{
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{
min-height: 40px;
color: white;
background: #34495e; }
.footer{padding:5px;}
Кстати, рамка очень помогла, Без нее я бы не справилась)
1 лайк
Предполагаю, что Вы свою сетку не проверяете нигде, кроме учебного минибраузера.
И, из-за этого сомневаетесь – всё ли у Вас правильно.
Сделать это можно следующим образом:
Скопируйте Ваш HTML код и сохраните, например, под именем index.html.
Скопируйте Ваш CSS код и сохраните, например, под именем style.css.
Подключите style.css к Вашему index.html при помощи link.
В HTML добавьте в каждый блок немного контента, – любых слов, разделённых пробелами.
И ещё. В этом испытании нужно подправить следующее правило:
body {
width: 450px; /* закомментировать или исключить из правила */
height: 335px; /* закомментировать или исключить из правила */
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
Это для того, чтобы сетка могла тянуться по всей ширине и высоте окна.
Вышеперечисленные размеры нужны только для учебного минибраузера.
После изменений не забывайте сохранять файлы.
Смело открывайте в броузере, и смотрите что не так:
Верхняя часть сетки:
<div class="head">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="centrovshik">
<div class="promo promo1">Promo 1</div>
<div class="promo promo2" >Promo 2</div>
</div>
</div>
Здесь Вы правильно поставили центровщик для promo.
Но, меню у Вас по прежнему не центрируется.
Хедер центрируется, но не при помощи центровщика, а свойствами magrin класса .header.
Так тоже можно, но не логично.
Удобнее и меню и хедер по-отдельности завернуть в центровщик.
Средняя часть:
<div class="stolbikiLMR">
<div class="centrovshik">
<div class="stolb left">Left</div>
<div class="stolb main">Main</div>
<div class="stolb right">Right</div>
</div>
</div>
div с классом stolbikiLMR можно убрать.
В общем-то он не мешает, но и смысла в нём нет… Он нигде не используется.
Остальное сделано верно.
Футер: Здесь всё отлично!
<div class="foot">
<div class="centrovshik">
<div class="footer">Footer</div>
</div>
</div>
CSS:
.head {
width: 100%; /* это лишнее */
padding-top:10px;
padding-bottom:10px;
color: white; /* это тоже лишнее */
background: #34495e;
}
.header {
width: 340px; /* Вам пришлось применить из-за отсутствия центровщика в HTML */
min-height:25px;
margin-left: auto; /* Вам пришлось применить из-за отсутствия центровщика в HTML */
margin-right: auto; /* Вам пришлось применить из-за отсутствия центровщика в HTML */
padding:5px;
background: #c0392b;
}
.menu {
min-height:25px;
padding:5px;
padding-left:55px; /* Вам пришлось применить из-за отсутствия центровщика в HTML */
margin-top:10px;
background: #3498DB
}
Вот здесь отлично – сразу понятно зачем класс .promo и зачем классы .promo1,2!
.promo{
width: 160px;
min-height: 50px;
padding:5px;
background: #c0392b;
margin-top:10px;
}
.promo1 {float: left;}
.promo2 {float: right;}
Здесь тоже Ok!
stolbikiLMR .stolb { /* stolbikiLMR из HTML убрать вместе с div */
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{
min-height: 40px; /* перенести в .footer */
color: white; /* можно убрать */
background: #34495e;
}
.footer{padding:5px;}
И вот ещё полезно знать: http://krekotun.ru/ui-developer-skills/#naming
2 лайка
Спасибо большое, я не думала, что нужно проверять это все на деле, хотя это и логично. Просто не приходило в голову, выполняла задания и всё. Теперь буду. у меня стоит 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/