Авторский знак. 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 29 30


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

Три плавающих столбца в CSS.


Раскладка в три столбца страниц сайта в CSS.

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

В примере для создания раскладки в три столбца с дополнительной шапкой и нижней частью используются плавающие элементы так называемые блоки div со своими идентификаторами. Преимущество плавающих элементов состоит в том, что можете указать, чтобы нижняя часть начиналась под самым длинным столбцом, не зная их высоты на данный момент времени (что обычно знать невозможно). Помните, что при использовании плавающих элементов важен их порядок в исходном коде. Чтобы сделать пример понятным, поместили элемент div основного содержания в исходном коде между элементами div боковых столбцов; показана базовая структура разметки для данной раскладки на сайте. В примере все элементы помещены в элемент div с идентификатором «container», чтобы можно было указать ширину всей раскладки страниц сайта. К этому элементу была добавлена рамка, чтобы обозначить его границы.

                       < div id="container">
                       < div id="masthead">
                        Шапка и основные заголовки < /div>
                       < div id="links"> список ссылок < /div>
                       < div id="main">
                          Основная статья...
                       < /div>
                       < div id="news">
                          Объявления . . .
                       < /div>
                       < div id="footer">
                      Информация о защите авторских прав < /div>
                       < /div>

В таблице стилей элементы div для ссылок, основного содержания и объявлений смещаются влево. В результате они накапливаются у левого края содержащего их блока, формируя три столбца на страницах сайта. К элементу footer было применено свойство clear: both;, чтобы этот элемент всегда начинался под всеми плавающими элементами страниц сайта. Поскольку для плавающих элементов не указаны интервалы, рамки и поля, то их суммарная ширина будет равна ширине содержащего их контейнера. Пустое пространство внутри каждого элемента div можно добавить при помощи применения полей и интервалов к содержащимся внутри них элементам (h2, р и т. п.) страниц сайта. Итак, таблица стилей:

                     h2, р {
                             margin: 8рх 12рх ;	
                             }	/*	добавляем пространство между
                                                столбцами */
                                                
                     #container {
                             width: 700рх; 
                             border: solid lpx ;
                             	}
                                
                     #masthead {         
                               background:	#CCC;
                               padding:	15px;	
                               }
                               
                     #links {
                               width: 150px ; 
                               float: left;
                               background: #EEE;	
                               }
                               
                     #main {
                               float: left;
                               width: 400px;
                               	}
                                
                     fnews {
                               float: left;
                               width: 150px	;
                               background: #EEE;
                               	}
                                
                     #footer {
                               clear: both;
                                /* элемент footer 
                               начинается под плавающими элементами */
                               padding: 15рх;
                               background: #666;
                               	}
                                

Позиционирование боковых столбцов страниц.

В данном примере позиционируются только левый и правый столбцы. В элементах для основного содержания и нижней части страницы сайта применяются поля для создания места для получающегося столбца. Преимущество здесь состоит в том, что можно поместить элемент footer под основным содержанием и при этом он не должен будет пересекать весь низ страницы сайта, как в случае с плавающими элементами; если бы элемент с основным содержанием также был позиционирован, он тоже был бы удален из потока документа. Это привело бы к тому, что нижняя часть поднялась бы кверху страницы. Можно поместить элемент footer под абсолютно позиционированными элементами страниц сайта при помощи JavaScript.

div#box {width:95%;margin-bottom:15px;margin-top:10px;margin-left:5%;}

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
... ... ...

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

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