На главную

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

Rambler's Top100

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

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

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

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

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

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

Если ширина блока не должна иметь фиксированной ширины, можно просто задать описание координат и размеров в процентах. При необходимой ширине блока в 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.

Алямкин Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100