Центрирование одного блока. Библиотека I2R. При довольно простой стуктуре сайта можно использовать только один блок. Разместить его по центру можно разными способами, в зависимости от того, что вы хотите видеть в результате.

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

Если ширина блока не должна иметь фиксированной ширины, можно просто задать описание координат и размеров в процентах. При необходимой ширине блока в 60 процентов, нам необходимо будет назначить блоку ширину в 60 процентов, свойство left в данном случае будет равно 20 процентам.



#centercontent 

{ background-color:#FFDF7D;

border:2px solid #000000;

position:absolute;

left:20%; 

width:60%; 

top:10%; }

Мы получили "резиновый" блок, изменяющий свою ширину в зависимости от ширины экрана. Для блоков с текстовым содержанием этого вполне достаточно.

Как "резиновый", так и блок с фиксированной шириной можно разместить по центру и другим способом.



body {

margin:30px; 

padding:0px;

text-align:center;

}



#centercontent {

width:500px;

margin:0px;

text-align:left;

padding:15px;

border:1px dashed #000000;

background-color:#ffffff;

}

Обратите внимание! В Эксплорере при задании "центровки" всему содержимому BODY содержимое всех блоков так-же будет ориентированно по центру. В этом случае рекомендуется в нашем блоке явно прописать — text-align:left; По видимому, у Эксплорера проблемы с наследованием...

Еще один способ, несколько сложноватый, но очень интересный. Кроме того, он дает понятие о возможности исправления ошибок Эксплорера. Взят с того-же bluerobot .



body {margin:0px;

padding:0px;}



#Content {

position:absolute;

left:50%;

width:500px;

margin-top:50px;

margin-left:-250px; /* For IE5/Win. */

padding:15px;

border:1px dashed #333;

background-color:#eee;

}

body>#Content {

margin-left:-266px; /* Correct value. */

}

Пример приводится в "первоначальном" виде. Автор идеи — Simon Coggins. Первоначальная идея — задание отрицательного значения margin-left, переработка до "идеального" варианта — автор bluerobot .

Если не все поняли — цифра 266 получается как результат сложения 250px как половины центрируемого блока, 15px отступа и 1px рамки. Рамка и отступ и дают погрешность в 16px.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Центрирование одного блока