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

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

                     body {
                           margin: Орх;
                           padding:	Орх;
                           text-align: center;	
                           }	
                                /*	обеспечить	центрирование в	IE	
                                    создаем блок "container" 
                                    правильный CSS-способ центрирования 
                                    замена правила text-align для body */
                     ♦container {
                              position: relative;
                              margin: 0 auto;
                              width: 700px ;
                              text-align: left;
                                    }
                                    
                     fmasthead {
                              height: 7Opx ;
                              background: #CCC;	
                              }
                              
                     #main {
                              position: absolute;
                              top: 7 Орх;
                              left: 150рх;
                              width: 40Орх;
                              border-left: solid lpx black; 
                              border-right: solid lpx black; 
                              margin: 0 lOpx;
                              padding: 0 lOpx;
                                           /* обход блоковой модели IE 5 */
                              voice-family:inherit;
                              width: 358px;	
                              }	
                                          /*	указываем правильную ширину 
                                              это обходной путь для Opera */ 
                              body>#main {
                                   width: 358рх;
                                   	}
                                    
                     #links {
                              position: absolute; 
                              top: 7Opx ;
                              left:	Opx	;
                              width: 15Opx ;
                              background: #EEE	;	}
                     #news {
                              position:	absolute;
                              top: 7Opx ;
                              left: 550px ;
                              width: 15Opx ;
                              background: #EEE;	
                              }
                              

Внесены следующие изменения:

               
                    Добавление интервалов, границ и полей к столбцу основного 
                    содержания при создании бесплатного сайта. Сумма ширин трех
                    позиционированных элементов-столбцов должна быть равна 700 пикселей
                    (ширине контейнера в данном примере). Если боковые столбцы занимают 
                    300 пикселей (150+150), то на центральный столбец остается 400 пикселей.
                    Помните, что свойство width применяется только к области содержания. 
                    Все интервалы, поля и рамки согласно блоковой модели CSS добавляются
                    к этому значению. В данном примере суммарная величина интервалов 
                    составляет 20 пикселей (10 слева и 10 справа), 20 пикселей - размер полей
                    и 2 пикселя - рамка. Это означает, что нам нужно уменьшить ширину элемента 
                    на 42 пикселя и мы получим 358 (и это указано в последней строке стилевого 
                    правила #main) браузеров указывается правильное значение ширины.

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


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

обратно    назад    дальше     вперед

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