Div по центру. Ну разве это сложно? 15.06.2013

Здравствуйте! Я представляю, сколько вы мучились прежде чем решить эту задачу самостоятельно. Но потом, взяли и ползли в инет за ответом и набрели вот на эту статью :) Я так же делал. Причем когда только начинаешь учить язык CSS ты ведь это сто процентов проходил, но как то без практики все забывается.

Ну в общем — div по центру, поехали! Для чего он может понадобится. Ну во-первый для того чтобы сделать главный div блок сайта, которые естественно должен располагаться по центру страницы в браузере.

Еще одно решение которое точно понадобиться рано или поздно, если вы делаете сайты на заказ или просто делаете сайты для собственных проектов. Это задача, когда внутри главного блока до позиционировать и внутренние блоки относительно главного. Например, сделать столбец слева, столбец справа и блок с контентом по центру.

Это тоже разберем. Что уж точно все встало на свои места. По сути не важно стандартно располагать блоки или не стандартно, все зависит от нашей фантазии или фантазии дизайнера.

Div по центру. Классическая задача со стандартным решением.

Ну все просто. Собственно я создаю каркас страницы и первый блок которые у меня идет между тегами <body></body> — это div с классом main, потому что основной:

<div class="main">

</div>

В файле style.css  для него идет обычно так же стандартная надпись, с заданием ширины блока и т.е. Вот как это выглядит у меня обычно:

/* Задаем ширину главного блока */

.main {
width: 1000px;
overflow: hidden;
margin: 0 auto;
outline: 1px solid #cc0000;
}

Outline — это свойство я добавляю для удобства к основным блокам, оно помогает разбираться с ошибками и конфликтами полей, если что то вдруг не так стоит. Просто исправляю 0px на 1px и появляется рамочка.

Кроме width еще можно добавить и height (высота) по скольку если вы сделаете все как я сказал, а внутри блока не будет ни какого наполнения, то собственно вы ничего и не заметите.

Div по центру расположили, наша задача выполнена.

Располагаем колонки внутри основного блока.

Рассмотрим один, самый большой пример, относительно которого вы уже сможете сделать остальные более подходящие для вас конструкции. Итак, после того как мы сделали основной блок заключаем в него вот таки дивы:

<div class="main">

<div class="sidebar-left">
<p>Текст текст текст. Текст текст текст. Текст текст текст. Текст текст текст.</p>
</div>

<div class="sidebar-right">
<p>Текст текст текст. Текст текст текст. Текст текст текст. Текст текст текст.</p>
</div>

<div class="content">
<p>Текст текст текст. Текст текст текст. Текст текст текст. Текст текст текст.</p>
</div>

</div>

Это и будет наши колонки. Левая колонка называется class="sidebar-left", правая колонка называется - class="sidebar-right" и блок с основным контентом я назвал class="content".

Для этих блоков мы пропишем следующие стили:

.sidebar-left {
width: 198px;
background: #F9F9F9;
border: 1px solid #008F00;
float: left;
outline: 0px solid #cc0000;
}

.sidebar-left p {

}

.sidebar-right {
width: 248px;
background: #F9F9F9;
border: 1px solid #008F00;
float: right;
outline: 0px solid #cc0000;
}

.sidebar-right p{

}

.content {
margin: 0 270px 0 220px;
background: #F9F9F9;
border: 1px solid #008F00;
outline: 0px solid #333333;
}

Замете, что width для левой и правой колонки я специально сделал разными для наглядности. Чтоб показать, наши колонки не обязательно должны быть зеркальными.  Ну вот, собственно, по этой теме все. Вот, скачайте этот архив, чтоб все было более нагляднее и понятнее.

Подписывайтесь на обновления моего блога, будем говорить о интересном.

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте