27/32 Испытание 100%. Прошу критики.

Marina_Nifontova · 31.Октябрь.2016 13:59:54

Оцените, пожалуйста, код: что нужно исправить, что можно улучшить?
Нужно ли минимизировать количество классов за счет псевдоклассов? Нормально ли использовать такие длинные названия классов?

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="header">
     <div class="layout-positioner">
        <div class="header_content">Header</div>
     </div>
    </div>
    
    <div class="menu">Menu</div>
    
    <div class="promo">
     <div class="layout-positioner">
        <div class="promo_promo1">Promo 1</div>
        <div class="promo_promo2">Promo 2</div>
     </div>
    </div>
    
    <div class="main">
      <div class="layout-positioner">
        <div class="main_left">Left</div>
        <div class="main_main">Main</div>
        <div class="main_right">Right</div>
     </div>
    </div>
    
    <div class="footer">Footer<div>
</body>

body {
margin: 0;
padding: 0;

}

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

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

.header_content {
background-color: #c0392b;
padding: 5px 0 0 5px;
min-height: 30px;
width: 345px;
margin: 0 0 5px 50px;
}

.menu {
background-color: #3498DB;
padding: 5px 0 0 55px;
min-height: 30px;
}

.promo {
background-color:#34495e;
padding: 10px 0 10px 0;
}

.promo .layout-positioner div {
background-color:#c0392b;
padding: 5px 0 0 5px;
width: 165px;
min-height: 55px;
}

.promo_promo1{
float: left;
margin-left: 50px;
}

.promo_promo2 {
float: right;
margin-right: 50px;
}

.main {
padding: 10px 0 10px 0;
}

.main_left,.main_main,.main_right {
background-color: #3498DB;
padding: 5px 0 0 5px;
width: 65px;
min-height: 105px;
}

.main_left {
float: left;
margin-left: 50px
}

.main_main {
float: left;
margin-left: 10px;
width: 185px;
}

.main_right {
float: right;
margin-right: 50px;
}

.footer {
background-color: #34495e;
padding: 5px 0 0 55px;
min-height: 30px;
}

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

Ineska · 31.Октябрь.2016 14:23:11

Такого быть не должно. Используйте центровщик.
.layout-positioner {
width: 350px;
margin: 0 auto;
}

Marina_Nifontova · 02.Ноябрь.2016 13:39:33

Спасибо!

Olexandr_Holub · 13.Ноябрь.2016 21:45:56

Испытание: строим сетку

Header

        <div class="menu">
        Menu
        </div>
        
        <div class="promo">
        <div class="layout-positioner">
        <div class="promo1">
        Promo 1
        </div>
        <div class="promo2">
        Promo 2
        </div>
        </div>
    </div>    
    
    <div class="my layout-positioner">
    <div class="left">
    Left
    </div>
    
    <div class="main">
    Main
    </div>
    
    <div class="right">
    Right
    </div>
    </div>
    
    <div class="footer">
    Footer
    </div>
</body>

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

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.header {
background: #34495e;
padding: 10px;
}

.head {
background: #c0392b;
width: 340px;
min-height: 25px;
margin: 10px;
padding: 5px;
margin: 0px auto;
}

.menu {
background: #3498DB;
min-height: 30px;
padding-top: 5px;
padding-left: 55px;
}

.promo .layout-positioner{
background: #34495e;
padding: 10px;
margin-left 50px;
}

.promo1 {
background: #c0392b;
width: 160px;
height:50px;
padding: 5px;
margin-left:40px;
float: left;

.promo2 {
background: #c0392b;
width: 160px;
height:50px;
padding: 5px;
float: left;
margin-left: 10px;
}

.my {
padding: 10px;
}

.left,.right,.main {
background: #3498DB;
width: 60px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
}

.left {
float: left;
margin-left: 40px;
}

.main {
float: left;
width: 180px;
}

.right {
float: left;
}

.footer {
background: #34495e;
min-height: 30px;
padding-top: 5px;
padding-left: 55px;
}

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

Ineska · 14.Ноябрь.2016 04:41:20

В разметке центровщик вроде бы есть, но в css стилей для него нет. Почитайте другие темы по этому заданию.

Ineska · 27.Ноябрь.2016 17:31:03

Вы можете использовать box-sizing, можете также воспользоваться универсальным селектором *, чтобы прописать его один раз для всех блоков сразу.
Досмотреть не успела, удалили сообщение.

Zody · 27.Ноябрь.2016 17:50:51

извините, вот :

{
box-sizing: border-box;
}
.layout-positioner:after {
content: “”;
display: table;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.block1 {
background-color: #34495e;
height: 170px;
padding: 10px 0;

}
.header {
padding: 5px;
height: 35px;
background-color: #c0392b;
}
.menu, .footer {
height: 35px;
width: auto;
background-color: #3498DB;
margin-top: 10px;
padding-left: 55px;
padding-top: 5px;
}
.promo1, .promo2 {
width: 170px;
height: 60px;
margin-top: 10px;
padding: 5px;
background-color: #c0392b;
float: left;
}
.promo1 {
margin-right: 10px;
}
.left, .main, .right{
background-color: #3498DB;
float: left;
margin-right: 10px;
margin-top: 20px;
height: 110px;
padding: 5px;
}
.left, .right {
width: 70px;
}
.main {
width: 190px;
}
.right {
margin-right: 0;
}
.footer {
background-color: #34495e;
}

воспользовалась, спасибо. Не подскажите как скопировать на форум длинный код в виде окошка со скроллом?

Ineska · 27.Ноябрь.2016 17:55:52

Код вставляется с помощью кнопки </> в редакторе сообщений.
У вас не работает центровщик у футера и отсутствует центровщик для меню.

Zody · 27.Ноябрь.2016 18:07:57

Спасибо! в меню я его не вставила умышленно, разве его нужно центровать?
в хедер центровщик вставлен так же, как и в футер <div class="header layout-positioner">Header</div> и там он работает, в чем разница?

Ineska · 28.Ноябрь.2016 04:44:48

Для header у вас есть еще одна обертка - .block1

Lynx · 01.Декабрь.2016 13:33:49

Можете подсказать чем плох мой способ и на что стоит обратить внимание?

Испытание: строим сетку

    <div class="background">
        <div class="positioner">
            <div class="header">Header</div>
        </div>   
    </div>
    
    <div class="menu">Menu</div>
    
    <div class="background"> 
        <div class="positioner">
            <div class="promo promo1">Promo 1</div>
            <div class="promo promo2">Promo 2</div>
        </div>
     </div> 
    
        <div class="positioner">
            <div class="main_left main">Left</div>
            <div class="main_main main">Main</div>
            <div class="main_right main">Right</div>
        </div>    
    
    <div class="footer">Footer
    </div>
    
</div>
</body>

html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header
{
background-color:#c0392b;
padding: 5px;
height:25px;
width:340px;
margin: 0px 40px;
}
.menu
{
width:auto;
height:25px;
padding:5px 55px;
background-color:#3498DB;
}
.background
{
padding:10px;
background-color: #34495e;
}
.footer
{
padding: 5px 50px;
width:350px;
height:35px;
background-color:#34495e
}
.positioner
{
display: table;
content: “”;
clear: both;
}
.promo1
{
float:left;
margin-right:10px;
margin-left:40px;
}
.promo2
{
float:right;
}
.promo
{
padding:5px;
height:50px;
width:160px;
background-color:#c0392b;
}
.main_left
{
margin-left:50px;
margin-top:10px;
float:left;
width:60px;
height:100px
}
.main_main
{
margin:10px 10px;
float:left;
width:180px;
height:100px
}
.main_right
{
margin:10px 0px;
float:left;
width:60px;
height:100px
}
.main
{
padding: 5px;
background-color:#3498DB;
}
.footer
{
width:auto;
clear:both;
padding:5px 55px;
}

Zody · 03.Декабрь.2016 18:00:04

спасибо!

dev1B · 04.Декабрь.2016 10:43:52

Очень благодарний буду за критику

  <header class="page-header">
		<div class="container">
			<div class="header">Header</div>
		</div>
    	<div class="container-flued-menu">
			<div class="container">
				<div class="menu">Menu</div>
			</div>
    	</div>
    	<div class="container">
    		<div class="promo-1">Promo 1</div>
    		<div class="promo-2">Promo 2</div>
    	</div>
    </header>
    <main>
    	<div class="container">
    		<div class="left">Left</div>
	    	<div class="main">Main</div>
	    	<div class="right">Right</div>
    	</div>
    </main>
    <footer class="page-footer">
    	<div class="container">
    		<div class="footer">Footer</div>
    	</div>	
    </footer>	


container{
    width:350px;
    margin:0 auto;
}
.container:after{
    display:table;
    content: "";
    clear:both;
}

.page-header{
    padding:10px 0;
    background-color:#34495e;
}

.header{
     padding:5px;
     background-color:#c0392b;
     height:25px;
} 
.container-flued-menu{
    margin:10px 0;
    background-color:#3498DB; 
}
.menu{
    padding:5px;
    height:25px;
}
.promo-1{
     padding:5px;
     float:left;
     background-color:#c0392b;
     height:50px;
     width:160px;
}

.promo-2{
     padding:5px;
     float:right;
     height:50px;
     width:160px;
     background-color:#c0392b;  
}
main{
     padding:10px 0;
}
.left{
     width:60px;
     height:100px;
     padding:5px;
     float:left;
     background-color:#3498DB;  
}
.main{
     padding:5px;
     float:left;
     margin:0 10px;
     width:180px;
     height:100px;
     background-color:#3498DB;  
}
.right{
    width:60px;
    height:100px;
    padding:5px;
    float:right;
    background-color:#3498DB;  
}
 .page-footer{    
       background-color:#34495e;
}
.footer{       
       padding:5px;
       height:30px;
}

Ineska · 05.Декабрь.2016 13:01:51

min-height вместо height, а одинаковые стили лучше сгруппировать, и код будет короче.

dev1B · 06.Декабрь.2016 08:52:09

Спасибо