[27/32] О великие гуру верстки, подскажите пожалуйста, можно ли упростить этот код и хорош ли он?


#1

Знаю, что такие темы есть, но все же надеюсь, что подскажите.
Если что нибудь, что можно упростить или исправить.
И да, пришлось использовать <span> вместо <p> ибо он создает паддинг со всех сторон, а это не подходит. Нужно ли оборачивать в <span> весь текст?

HTML

`

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
`

#2

CSS

`html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.header {
background: #34495e;
}

.header .layout-column1 {
background: #c0392b;
width: 350px;
float: left;
margin-right: 50px;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 10px;
min-height:35px;

}

.header .layout-column2 {
background: #3498DB;
width: 100%;
float: left;
min-height: 35px;
margin-bottom: 10px;
}

.clearfix:after {
content: “”;
display: block;
clear: both;
}

.header .layout-column3 {
float:left;
background: #c0392b;
width: 170px;
margin-left: 50px;
margin-bottom: 10px;
min-height: 60px;
}

.header .layout-column4 {
float: right;
background: #c0392b;
width: 170px;
min-height: 60px;
margin-right: 50px;
margin-bottom: 10px;
}

.header .layout-positioner,
.content .layout-positioner,
.footer .layout-positioner {
padding: 5px;
}

.layout-column2 span,
.footer span{
margin-left: 50px;
}

.content .layout-column5 {
float: left;
background: #3498DB;
margin-left: 50px;
width: 70px;
margin-top: 10px;
margin-right: 10px;
min-height: 110px;
}

.content .layout-column6 {
background: #3498DB;
float: left;
margin-top: 10px;
width: 190px;
min-height: 110px;
margin-right: 10px;
}

.content .layout-column7 {
background: #3498DB;
float: right;
margin-top: 10px;
margin-right: 50px;
width: 70px;
min-height: 110px;
}

.footer {
background: #34495e;
margin-top: 10px;
min-height: 40px;
}
`


#3

Центровщика у вас нет. Margin-left/right по 50px - это не центровка. Почитайте темы по этому заданию.