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

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
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 31


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

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

( продолжение)

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

Есть ссылки в Rambler, Google, Mail, Yandex, Facebook, Twitter, ВК. Хочу несколько моделей картин закинуть в Pinterest на данную тему. Те, которые заходят Rambler, Google, Mail, Yandex, Facebook, Twitter, ВК обязательно оставьте комментарий о прочитанном.Пример с позиционированием только боковых столбцов: 

                    body {
                          margin:10рх; padding: 10рх;	
                          }
                          
                    #container {
                                position: absolute;	/* создание содержащего все элементы
                                                                   блока */
                                width: 700рх;
                                border: solid lpx; 
                                }	/*	рамка, обозначающая границы контейнера*/
                                
                    #masthead {
                                height:	70рх;
                                background:	#ССС;	
                                }
                                
                    #main {
                                margin:	0 160px;	
                                }	/*	пространство	слева	
                                       и	справа	от	боковых
                                                         столбцов*/


                    #links {
                          position: absolute; top: 7 Opx;
                          left: Opx;	/*	позиционирование к
                                          левому краю контейнера */
                          width: 15Opx;
                          background: #EEE;
                          	}
                            
                    fnews {
                          position: absolute; 
                          top: 7 Opx;
                          right: Opx;
                          	/*	позиционирование к 
                              правому краю контейнера */
                          width: 15Opx;
                          background: #EEE;
                           }
                           
                   ♦footer {
                          margin:0 160px; /*как	у содержания,чтобы
                                            оставить место справа и слева*/
                          padding: 15рх;
                          background: #666;	
                          }

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

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

Элемент footer и рамка вокруг страницы сайта опущены. Это объясняется тем, что все три элемента между шапкой и низом страницы сайта позиционируются абсолютно и удаляются из потока документа. При этом элемент footer должен подняться на верх страницы сайта и встать сразу под шапкой. Точно так же рамка вокруг элемента-контейнера включала бы только шапку и элемент footer, находящийся вверху страницы сайта, а это не совсем то, что нам нужно. Чтобы избежать использования JavaScript и других сложных обходных маневров, мы удалили из примера элемент footer и рамку. Вот таблица стилей, используемая для создания этой элементарной раскладки в три столбца страниц сайта. Комментарии обозначают основные стилевые правила и их функции: 

                  body:	{
                       margin: 0; padding: 0;
                        	}
                            
                  #container {
                           position: relative; /* создание блока,
                                            содержащего все элементы */
                           width: 700рх;
                           	}
                            
                  #masthead {
                           height: 70рх	;
                           background: #ССС	;
                           	}
                            
                  #main {
                           position: absolute; top: 7 Opx;
                           left: 150px;	/* фиксированный дизайн -  
                                            значения в пикселах */
                           width: 40Opx ;
                           	}
                            
                   #links {
                           position: absolute;
                           top:	7Opx;
                           left: Opx;	/* позиционирование к 

                                          левому краю контейнера */
                           width: 15Opx;
                           background: #ЕЕЕ ;
                                    }
                                    
                  #news {
                           position: absolute;
                           top:	7Opx ;
                           left: 550px;	/* третий столбец 
                                          начинается через 550 пиксе
                                                    лов слева */
                           width: 15Opx;
                           background:	#ЕЕЕ;
                                  }

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

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

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