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


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

Центрирование страницы в CSS.

О наиболее популярных методиках создания дизайна и раскладки, применяемых в Web-дизайне на основе CSS, в том числе такими, как:

                      •	 центрирование страницы фиксированной ширины;
                      •	 раскладка в несколько столбцов;
                      •	 прямоугольники с закругленными углами;
                      •	 замена текста фоновыми изображениями;
                      •	 эффекты наведения в CSS;
                      •	 навигация, построенная на основе списка.

В качестве основного решения по контролю ширины страницы в CSS с учетом разных разрешений мониторов многие Web-дизайнеры используют страницы фиксированной ширины, которые затем центрируются по ширине окна браузера. В прошлом это достигалось при помощи ввода тега center (или < div align="center"> . . . < /div>), заключающего в себе таблицу.

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

                     div#page {
                            width: 500рх; 
                            margin-left: auto;
                            margin-right: auto;
                             }

Альтернативным, хотя и не столь элегантным решением является центрирование всей страницы с помощью свойства text-align для элемента body. В конечном счете этот метод является обходным путем, поскольку текстовое свойство используется для центрирования любых элементов. Проблема использования этого метода состоит в том, что, поскольку горизонтальное выравнивание наследуется, весь текст страницы будет центрироваться в своих блоках элементов. Такое унаследованное центрирование нужно изменять путем указания выравнивания по левому краю для всех потомков элемента body. В следующем примере с помощью универсального селектора (*) отмечаются все элементы, находящиеся в элементе body документа, и для них в свойстве text-align указывается значение left. Обратите также внимание, что были изменены значения margin-left и margin-right в примере, где используется объединенное свойство margin. Хотя это не является обязательным, это позволяет уменьшить объем кода и сделать таблицу стилей краткой и аккуратной:

                           body * {
                              text-align:	left;	
                                 } 
                           div#page {
                               width: 500px ;
                               margin: 0 auto; 
                               }

В третьем методе для эффективного центрирования блока на странице во всех браузерах, поддерживающих базовое абсолютное позиционирование используются отрицательные значения полей. Во-первых, элемент «page» (имя элемента div в данных примерах) абсолютно позиционируется так, чтобы левый край на 50% пересекал исходный содержащий его блок (т. е. ширину содержащего его окна браузера). Затем применяется отрицательное левое поле, которое смещает страницу влево на половину ее ширины, выравнивая, таким образом, серединную точку страницы с серединной точкой окна:

                           div#page {
                               position: absolute; 
                               left: 50% width:	500px ;
                               margin-left: - 250px ;	
                                 }
                       	/* половина ширины */

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

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


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