{27/32} Прошу проверить код на оптимальность (100%).

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

Здравствуйте. Оцените пожалуйста код на оптимальность. Спасибо.

HTML:

CSS:

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

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

.block1 {
min-height: 160px;
padding-top: 10px;
margin-bottom: 10px;
background: #34495e; }

.layout-header {
width: 340px;
min-height: 25px;
margin: 0 auto;
background: #c0392b; }

.layout-menu {
min-height: 30px;
margin: 10px 0;
background: #3498DB; }

.layout-promo1,
.layout-promo2 {
float: left;
width: 160px;
min-height: 50px;
margin-left: 50px;
background: #c0392b; }

.layout-promo2 {
margin-left: 10px; }

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

.layout-left,
.layout-right {
float: left;
width: 60px;
min-height: 100px;
margin-left: 50px;
background: #3498DB; }

.layout-main {
float: left;
width: 180px;
min-height: 100px;
margin: 0 10px 0 10px;
background: #3498DB; }

.layout-right {
margin: 0; }

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

.text {
padding: 5px; }

.text2 {
padding: 5px 0 0 55px; }

2

В своей верстке вы не использовали центровщик.

3

Здравствуйте. Код переписан с использованием “центровщика”. Оцените пожалуйста на оптимальность. Спасибо.

HTML :

27.32 HTML.PNG513×562 30.7 KB

CSS :

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

.layout-positioner {
width: 350px;
margin: 0 auto; }

.layout-positioner::after {
display: table;
content: “”;
clear: both; }

.header {
min-height: 45px;
padding-top: 10px;
background: #34495e; }

.layout-header {
min-height: 30px;
background: #c0392b; }

.menu {
min-height: 35px;
background:#3498DB; }

.promo {
min-height: 70px;
padding-top: 10px;
margin-bottom: 10px;
background: #34495e; }

.layout-promo-1,
.layout-promo-2 {
float: left;
width: 165px;
min-height: 55px;
margin-right:10px;
background: #c0392b; }

.layout-promo-2 {
margin: 0; }

.layout-left,
.layout-right {
float: left;
width: 65px;
min-height: 105px;
background: #3498DB; }

.layout-main {
float: left;
width: 185px;
min-height: 105px;
margin: 0 10px;
background: #3498DB; }

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

.text {
padding: 5px 0 0 5px; }

4

Отступы справа и снизу тоже нужны, чтобы текст не прилипал к краям блока. Да, сейчас там одно слово, но на будущее учтите этот момент.
Других замечаний нет.

5

Учту. Спасибо.

6

В блоке promo вы обнуляете margin div layout-promo-2, но что если вас попросят добавить туда третий блок? Я бы лучше назвал класс для лэйаута как layout-promo и обнулил margin последнему элементу(last-child) а внутренние отстуты задал классу text-1

1 лайк
7

Все дело в том, что данный код был написан под конкретное задание. Единственной целью было зделать его максимально простым, коротким и логичным. Потому и варианты “но что если” не рассматривались воообще ))).
Но спасибо за дельное замечание.