Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Раскладка в два столбца в CSS.

Раскладки в несколько столбцов, для которых ранее требовались HTML-таблицы, теперь можно получить при помощи каскадных тадлиц стилей CSS. Раскладки со столбцами можно создавать с помощью плавающих элементов или абсолютного позиционирования; существует масса вариантов раскладки в две колонки в смысле компонентов страницы, размеров, фона и т. д. Они показывают основу подхода к раскладке в два столбца, и они должны послужить хорошей отправной точкой при создании Ваших собственных раскладок. Однако следует отметить, что эти примеры основываются на допущении, что основной столбец длиннее, чем боковые столбцы. Если у вас длиннее боковые столбцы, необходимо будет внести определенные корректировки в показанные примеры кода.

Использование плавающих элементов в CSS.

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

                      < p>< div class="masthead"> шапка и важные заголовки < /div>
                      < div class="main"> Основная статья < /div>>
                      < div class="sidebar"> список ссьшок < /div>
                      < div class="footer">
                        информация о защите авторских прав
                      < /div>
                  /* Раскладка в два столбца. */

Исходный документ был разделен на четыре элемента div для шапки, содержания, бокового столбца и нижней части. Элемент для содержания был размещен в исходном коде перед боковым столбцом, чтобы пользователи, применяющие неграфические браузеры могли обращаться в первую очередь к нему. Это также означает, что мы не можем смещать боковой столбец, поскольку он не может располагаться выше предыдущего блочного элемента. Вместо этого элемент div с основным содержанием сдвигается влево и для него задается ширина, равная 70% ширины страницы, а боковой столбец начинает его обтекать. Смещение задается при помощи следующих стилевых правил:

 
                   .masthead {
                    background:	#ССС	;
                     padding: 15рх	;}
                    .main {float: left;
                     width: 70%;
                   margin-right: 3%; /*	добавляем	пространство
                                            	между столбцами */
                   margin-left:	3% ;
                          }
                   .footer {
                   clear: left; /* начинаем нижнюю часть под 
                                 плавающим элементом */ padding: 15рх;
                     background:	#666	;
                         }

К элементу div с основным содержанием применяется правое поле, чтобы добавить немного пространства между столбцами. Конечно, такой набор стилей будет лишь самым минимальным для формирования каркаса столбцов. Для форматирования содержимого страницы будут добавляться дополнительные стилевые правила.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: