Моя мастер-страница имеет пустое пространство внизу и справа. Можно ли центрировать главную страницу и установить фоновое изображение?

Вот как это выглядит сейчас:

мой скриншот

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


person Sergio Tapia    schedule 01.09.2009    source источник


Ответы (2)


Центрирование по горизонтали можно выполнить, заключив содержимое, которое вы хотите центрировать, в div и применив стиль:

margin-left: auto;
margin-right: auto;

к указанному див.

Это позаботится о вашей проблеме с пространством справа. Вы также можете разместить фоновое изображение (повторяющееся или нет) с помощью CSS.

Вашей большей проблемой будет вертикальное центрирование. Насколько мне известно, (в настоящее время) нет простого кросс-браузерного (включая IE6/7) способа сделать это. Тем не менее, я хотел бы, чтобы другой пользователь доказал мою неправоту. :)

person John Rudy    schedule 01.09.2009
comment
Для вертикального центрирования мне пришлось прибегнуть к таблицам. Каждый раз, когда я это делаю, я немного умираю внутри. - person Jon B; 01.09.2009
comment
Это звучит неплохо. :) Могу ли я обернуть свою главную страницу тегом ‹div›? :С - person Sergio Tapia; 01.09.2009
comment
Вы можете обернуть эту часть тегом div или областью содержимого. Вы можете обернуть все это в тег div, разместив открывающий тег div сразу под ‹body› и закрывающий тег div прямо над ‹/body›. - person John Rudy; 01.09.2009
comment
@Jon: Да, был там, сделал это. То же грязное чувство. У меня также есть такая же проблема, когда я пытаюсь сделать столбцы одинакового размера. (Что на самом деле не должно быть таким сложным, как оно есть на самом деле...) - person John Rudy; 01.09.2009

Мне кажется, что вам просто нужно немного отступов сверху и слева в области содержимого.

Извините, я не знал, что ваша страница была только частью экрана.

Почему бы не разделить ваш сайт на части (div) и не использовать гибкий макет? Вот статья из Smashing Magazine о фиксированных и гибких макетах.

person Bryan Denny    schedule 01.09.2009
comment
Недостаточно времени. Я должен сдать этот проект за 1 час. :P Могу ли я обернуть главную страницу внутри тега ‹div›? - person Sergio Tapia; 01.09.2009