Несимметричный фон на центрированном сайте

30 September, 2007

XHTML/CSS

Относительно часто встречаются макеты центрированные по горизонтали, но с уходящими влево и вправо разнымы фоновыми картинками, примерно так.

Делюсь своим способом решения этой задачи.

Конечный результат

Добиваться будем примерно следующего.

Кто понимает код – можно дальше и не читать =)

Центрирование

Вообще классическое центрирование обычно выглядит так:
HTML:

  1. <body>
  2. <div id="out">
  3. …сайт…
  4. </div>
  5. </body>

CSS:

  1. body{text-align:center}
  2. #out{
  3. width:700px;
  4. margin: 0 auto;
  5. }

Почему-то все еще часто можно услышать вопросы о центрировании или применении тага CENTER, потому не лишне наверно было упомянуть эту реализацию =)

несимметричный фон

Для реализации придется добавить пустой див(это стыдно и неправильно, да):

  1. <body>
  2. <div class="stupid-right"></div>
  3. <div id="out">
  4. …сайт…

и соответствующий этому диву CSS:

  1. .stupid-right{
  2. position:absolute
  3. top:0;
  4. right:0;/*правый верхний угол */
  5. width:50%;/*половина экрана */
  6. height:200px;
  7. background:green;
  8. }

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

Добавим:

  1. #out{
  2. position:relative;
  3. }

Таким образом мы поменяли их местами “в третьем” измерении, и все выглядит как надо.

В конце

Паттерн до боли простой, если кто-то решал подобную задачу по другому, был бы рад опыту.

XHTML/CSS

27 комментариев к “Несимметричный фон на центрированном сайте”

pepeplsbey | 1. 30 September, 2007

Если картинка довольно простая, то можно просто создать её из требуетмых половинок очень (ну очень) большой в ширину, сохранить в PNG-8 и положить со смещением 50% на BODY.

Пару раз так делал, вполне себе удобно.

Mourner | 2. 30 September, 2007

Блин, не додумался в своё время, спасибо за совет!

Делал всегда как указал pepelsbey, но в этом решении нельзя поспользоваться преимуществом repeat-x, а картинка большая всё-таки больше весит одного пикселя.

akella | 3. 30 September, 2007

Да – полностью согласен насчет большой(широкой) картинки. Хотя пересев за 20″ Аймак я слегка разочаровался в этой идее на некоторых сайтах :) Большое разрешение балует…

Сергей | 4. 30 September, 2007

Спасибо. Хороший совет. Как и все остальные :)

Local | 5. 1 October, 2007

Полезная статья, пригодится, спасибо.

akira | 6. 1 October, 2007

Мне кажется или ссылка одинаковые? :-)

akella | 7. 1 October, 2007

в index1.html у меня серые блоки поверх текста… а в каком броузере обе ссылки одинаково выглядят?

Ivan | 8. 2 October, 2007

Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте.

Вечером отпишу свое решение, сейчас под рукой нету исходников.

akella | 9. 2 October, 2007

Первое что приходит в голову
body{padding-left:20%}
#out{padding-right:20%}
Ну и соответственно фоны задавать для БОДИ и #out. Их протяженность по вертикали уже можно контролировать

Cooluck | 10. 3 October, 2007

«Глюк?» на Яндекс.Фотках

И ссылки у меня тоже одинаковые, кликал из Feedreader

akella | 11. 4 October, 2007

Хм – а в моих виндошных все ок… что у тебя за броузер?

Cooluck | 12. 4 October, 2007

ИЕ 6, стандартная сборка.

akella | 13. 5 October, 2007

Странно – на моей чистой WinXP – все ок в ИЕ6 (

Tween | 14. 5 October, 2007

В общем-то то же самое можно и таблицами сверстать. Или CSS-Таблицами ,если уж все так любят DIV:)

akella | 15. 5 October, 2007

На этом блоге нет обсуждений как верстать – таблицами или нет =). И я никого не буду уговаривать…

Tween | 16. 5 October, 2007

В смысле имелось ввиду ,решить проблему наверняка можно ещё проще=)

akella | 17. 5 October, 2007

При всем уважении – вряд ли. Решение при помощи кучи лишнего кода для меня не более простое решение. Даже добавление пустого дива ) нож по сердцу. Я уж молчу о таблице с тремя ячейками, в которой я запутаюсь очень быстро =)

Cooluck | 18. 6 October, 2007

Проявляется данный глюк на самом крупном размере шрифта, как оказалось.
По-моему из-за слова Несимметричный его “распирает”

karasik | 19. 26 October, 2007

Ivan сказал(а) 2 октября:

Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте.

Вечером отпишу свое решение, сейчас под рукой нету исходников.

Так как же все-таки это сделать? Очень нужно .. пока что не нашел решения

За инфу – большое СПС

akella | 20. 26 October, 2007

Так в 9м каменте я вроде бы постарался описать свое решение.
Иван?

karasik | 21. 29 October, 2007

2akella:
что касается “9” – все ясно.

Надеялся на решение которое позволит использовать левый и правый дивы в качестве “ушек”, т.к. бэкграунд на боди уже занят ))

и еще вопросик(сорри за оффтоп):
можно ли сделать так чтобы заканчивался не под , а возле его края … при условии что ширина фиксированная?

akella | 22. 29 October, 2007

Напиши мне на имейл внизу страницы, а то я не очень понимаю что ты хочешь сделать…

karasik | 23. 6 November, 2007

2akella
Спасибо, проблема была решена другими методами.

Del'ka | 24. 15 May, 2008

в IE не работает(

Del'ka | 25. 15 May, 2008

ага, увидел в самом низу пример где для IE используется filter – красиво!
взял на вооружение)

Несимметричный фон на центрированном сайте « Articles about Web Development | 26. 18 July, 2008

[…] Читаем […]

aga | 27. 11 March, 2009

Засунули весь сайт в один див и радуются, обсуждают как круто получилось! Я бы за такое как минимум пропесочил верстальщика, как максимум выгнал с работы.

Оставить комментарий