Знаю, что такие темы есть, но все же надеюсь, что подскажите.
Если что нибудь, что можно упростить или исправить.
И да, пришлось использовать <span>
вместо <p>
ибо он создает паддинг со всех сторон, а это не подходит. Нужно ли оборачивать в <span>
весь текст?
HTML
`
Испытание: строим сетку
`
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;
}
`
Ineska
07.Январь.2017 08:06:15
3
Центровщика у вас нет. Margin-left/right по 50px - это не центровка. Почитайте темы по этому заданию.