По степени обучения делаю верстку своей странички. Нужна помощь, где в уроках есть практика по созданию такой сетки страницы.
Нужно блоки подвинуть как на картинке
Код HTML и CSS прилагаю
и меню в подвале сделать в 3 колонки.
displey: inline не помогает.
HTML
<div class="info">
<div class="item-4">
</div>
<div class="item-5">
</div>
<div class="adsens">
</div>
<div class="news">
</div>
</div>
<div class="items">
<div class="item-7">
</div>
<div class="item-8">
</div>
<div class="item-9">
</div>
<div class="dvantages">
</div>
<div class="vk">
</div>
</div>
<div class="footer">
<div class="footer-big">
<div footer-menu>
<ul>
<li><a href="#">О компании</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Оплата</a></li>
<li><a href="#">Вакансии</a></li>
<li><a href="#">Сотрудничество</a></li>
</ul>
<ul>
<li><a href="#">Обратная связ</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Скидки, акции</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Жалобы</a></li>
</ul>
<ul>
<li><a href="#">Гарантии качества</a></li>
<li><a href="#">Требования к макетам</a></li>
<li><a href="#">Примеры работ</a></li>
<li><a href="#">Материалы</a></li>
<li><a href="#">Технологии</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
CSS
.item-1 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
margin-left: 20px;
float: left;
}
.item-2 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
float: left;
}
.item-3 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
float: left;
}
.sale {
border: 1px solid #cccccc;
border-radius:5px;
width: 248px;
height: 228px;
margin: 5px;
margin-right: 20px;
float: left;
}
.item-4 {
border: 1px solid #cccccc;
border-radius:5px;
width: 393px;
height: 128px;
margin: 5px;
margin-left: 20px;
float: left;
}
.item-5 {
border: 1px solid #cccccc;
border-radius:5px;
width: 393px;
height: 128px;
margin: 5px;
float: left;
}
.item-6 {
border: 1px solid #cccccc;
border-radius:5px;
width: 248px;
height: 238px;
margin: 5px;
margin-right: 20px;
float: left;
}
.news {
border: 1px solid #cccccc;
border-radius:5px;
width: 248px;
height: 238px;
margin: 5px;
margin-right: 20px;
float: left;
}
.adsens {
border: 1px solid #cccccc;
border-radius:5px;
width: 798px;
height: 98px;
margin: 5px;
margin-left: 20px;
float: left;
}
.item-7 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
margin-left: 20px;
float: left;
}
.item-8 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
float: left;
}
.item-9 {
border: 1px solid #cccccc;
border-radius:5px;
width: 258px;
height: 228px;
margin: 5px;
float: left;
}
.dvantages {
border: 1px solid #cccccc;
border-radius:5px;
width: 798px;
height: 98px;
margin: 5px;
margin-left: 20px;
float: left;
}
.vk {
border: 1px solid #cccccc;
border-radius:5px;
width: 248px;
height: 338px;
margin: 5px;
float: left;
}
.footer {
clear: both;
}
.footer-big {
border: 1px solid #cccccc;
border-radius:5px;
width: 798px;
height: 148px;
margin: 5px;
margin-left: 20px;
float: left;
}
.footer-smol {
border: 1px solid #cccccc;
border-radius:5px;
width: 248px;
height: 148px;
margin: 5px;
float: left;
}
.footer li {
list-style-type: none;
}
.footer-menu ul {
display: inline;
}
