"27/32" или "Все ли по-феншую?"

Курсы §15. Сетки
1

Убедительная просьба не кидать камнями сразу, с криками что это самый частый здесь вопрос и есть куча тем с ответами. Я прошелся по всем, но везде код разнится. Уверен, что корректный вариант не один, но ведь хотелось бы узнать мнение опытных верстальщиков по поводу именно твоего написания.
Это одно из первых сложных упражнений здесь, где и CSS и HTML прописывается нами, а не дано по-умолчанию. Все-таки, все выполняющие это упражнение - новички, и на этом этапе не хочется закреплять свои ошибки. Я выполнил на 100% визуально, но в грамотности кода очень сомневаюсь. Был бы крайне рад услышать мнение и советы старожил мира верстки. =)

        <!DOCTYPE html>
    <html>
        <head>
           <title>Испытание: строим сетку</title>
           <meta charset="utf-8">
        </head>
        <body>
            <div class="container1">
                <div class="layout-positioner">
                     <div class="header">Header</div>
                     <div class="menu">Menu</div>
                     <div class="promo1">Promo 1</div>
                     <div class="promo2">Promo 2</div>
                </div>
            </div>
            <div class="container2">
                <div class="layout-positioner">
                     <div class="column-left">Left</div>
                     <div class="column-main">Main</div>
                     <div class="column-right">Right</div>
                </div>
            </div>
            <div class="container3">
                <div class="layout-positioner">
                     <div class="footer">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;
}
.layout-positioner{
    width:450px;
    margin: 0 auto;
}
.layout-positioner:after{
    content:'';
    clear:both;
    display:table;
}
.container1 {
    width:450px;    
    background:#34495e;
    padding-top:10px;   
}
.header {
   padding:5px;
   width:340px;
   height:25px;
   margin-left:50px;
   background: #c0392b;
}
.menu {
    padding-top:5px;
    padding-left:55px;
    margin-top:10px;
    min-height:30px;
    background:#3498DB;
}
.promo1 {
    float:left;
    padding:5px;
    background:#c0392b;
    width:160px;
    min-height:50px;
    margin:10px 10px 10px 50px
}
.promo2 {
    float:left;
    padding:5px;
    background:#c0392b;
    width:160px;
    min-height:50px;
    margin-top:10px;   
}
.container2 {
    width:450px;
}
.column-left {
    float:left;
    background:#3498DB;
    padding:5px;
    width:60px;
    min-height:100px;
    margin:10px 0px 10px 50px;
}
.column-main {
    float:left;
    background:#3498DB;
    padding:5px;
    width:180px;
    min-height:100px;
    margin:10px;
}
.column-right {
    float:left;
    background:#3498DB;
    padding:5px;
    width:60px;
    min-height:100px;
    margin:10px 0;
}
.footer {
    background:#34495e; 
    padding-top:5px;
    padding-left:55px;
    min-height:30px;
}
2

Не считаю себя опытным человеком в плане верстки, но позволю себе высказать свое мнение. Первое, что бросается в глаза, так это лишние обертки. Например, для чего использован блок с классом container3? Использование блока с классом container2 тоже неоправдано. В CSS для этого блока вы задаете только ширину, но писать ее не обязательно, потому что ширина прописана у body.
Также в некоторых местах можно сократить ваш код.
Немного поигравшись с вашим вариантом и сократив его в некоторых местах, получила те же 100%.
HTML

<!DOCTYPE html>
    <html>
        <head>
           <title>Испытание: строим сетку</title>
           <meta charset="utf-8">
        </head>
        <body>
            <div class="container1 layout-positioner">
                <!--<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>
            <!--<div class="container2">-->
                <div class="layout-positioner">
                     <div class="column left">Left</div>
                     <div class="column main">Main</div>
                     <div class="column right">Right</div>
                </div>
            <!--</div>-->
            <!--<div class="container3">-->
                <div class="layout-positioner">
                     <div class="footer">Footer</div>
                </div>
            <!--</div>-->    
        </body>
    </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:450px;
margin: 0 auto;
}/
.layout-positioner:after{
content:’’;
clear:both;
display:table;
}
.container1 {
width:450px;
background:#34495e;
padding-top:10px;
}
.header {
padding:5px;
width:340px;
height:25px;
/margin-left:50px;/
margin: 0 auto;
background: #c0392b;
}
.menu {
padding-top:5px;
padding-left:55px;
margin-top:10px;
min-height:30px;
background:#3498DB;
}
.promo {
float:left;
padding:5px;
background:#c0392b;
width:160px;
min-height:50px;
margin:10px;
}
.promo1 {
margin-left: 50px;
margin-right: 0;
}
/.promo1 {
float:left;
padding:5px;
background:#c0392b;
width:160px;
min-height:50px;
margin:10px 10px 10px 50px;
}
.promo2 {
float:left;
padding:5px;
background:#c0392b;
width:160px;
min-height:50px;
margin-top:10px;
}/
/.container2 {
width:450px;
}/
/.column-left {
float:left;
background:#3498DB;
padding:5px;
width:60px;
min-height:100px;
margin:10px 0px 10px 50px;
}
.column-main {
float:left;
background:#3498DB;
padding:5px;
width:180px;
min-height:100px;
margin:10px;
}
.column-right {
float:left;
background:#3498DB;
padding:5px;
width:60px;
min-height:100px;
margin:10px 0;
}/
.column {
float:left;
background:#3498DB;
padding:5px;
width:60px;
margin: 10px 10px 10px 0;
min-height:100px;
}
.right {
margin-right: 0;
}
.left {
margin-left: 50px;
}
.main {
width: 180px;
}
.footer {
background:#34495e;
padding-top:5px;
padding-left:55px;
min-height:30px;
}

1 лайк
3

И правда. Посмотрел на все что вы указали, и это показалось столь очевидным, а сам пересматривал раз 10 на наличие подобных излишеств, вот что значит глаз намётан. Дальше буду тщательней смотреть на общие свойства, а на лишние обёртки и подавно)

Большое спасибо за такой подробный, быстрый ответ. :+1:

1 лайк
4

Я сам новичок, но мне кажется что не совсем корректно строку menu ровнять margin’om слева 55px.
Скорее всего, была задача сделать так, чтобы background menu растягивался на всю ширину body (как у Вас сейчас и сделано), a margin отсчитывался от layout-positioner. Если изменится ширина body, то у Вас съедет от центра надпись menu.
Наверняка есть более верный и правильный способ, но я сделал так:

            <div class="menu">
                <div class="layout-positioner">
                    <div class="menu1">Menu</div>
                </div>
            </div>

CSS:
.layout-positioner {
width: 350px;
margin-left: auto;
margin-right: auto;
}
.menu {
min-height: 35px;
background-color: #3498DB;
clear: both;
margin-bottom: 10px;
}
.menu1 {
padding: 5px;
}

5

Да, вы правы. В условиях настоящей сетки так текст в блоке не выравнивается.
Всё зависит от того, как видит и представляет сетку в задании человек.
Вот например, здесь. Текст в каждом блоке еще обернут в параграф, что тоже правильно.
Или здесь, где сетка воспринимается как блоки разного размера на цветном фоне.

1 лайк