Несимметричный фон на центрированном сайте
30 Сентября, 2007Относительно часто встречаются макеты центрированные по горизонтали, но с уходящими влево и вправо разнымы фоновыми картинками, примерно так.
Делюсь своим способом решения этой задачи.
Конечный результат
Добиваться будем примерно следующего.
Кто понимает код – можно дальше и не читать =)
Центрирование
Вообще классическое центрирование обычно выглядит так:
HTML:
- <body>
- <div id="out">
- …сайт…
- </div>
- </body>
CSS:
- body{text-align:center}
- #out{
- width:700px;
- margin: 0 auto;
- }
Почему-то все еще часто можно услышать вопросы о центрировании или применении тага CENTER, потому не лишне наверно было упомянуть эту реализацию =)
несимметричный фон
Для реализации придется добавить пустой див(это стыдно и неправильно, да):
- <body>
- <div class="stupid-right"></div>
- <div id="out">
- …сайт…
- …
и соответствующий этому диву CSS:
- .stupid-right{
- position:absolute
- top:0;
- right:0;/*правый верхний угол */
- width:50%;/*половина экрана */
- height:200px;
- background:green;
- }
Таким образом див берется шириной в половину экрана, и позиционируется в правый верхинй угол, а значит никогда не будет вылазить слева от сайта, ни при каких разрешениях.
Добавив такой же блок слева, получим вот что-то вроде этого (дивы перекроют по половине сайта справа и слева):
Добавим:
- #out{
- position:relative;
- }
Таким образом мы поменяли их местами “в третьем” измерении, и все выглядит как надо.
В конце
Паттерн до боли простой, если кто-то решал подобную задачу по другому, был бы рад опыту.
Если картинка довольно простая, то можно просто создать её из требуетмых половинок очень (ну очень) большой в ширину, сохранить в PNG-8 и положить со смещением 50% на BODY.
Пару раз так делал, вполне себе удобно.
Блин, не додумался в своё время, спасибо за совет!
Делал всегда как указал pepelsbey, но в этом решении нельзя поспользоваться преимуществом repeat-x, а картинка большая всё-таки больше весит одного пикселя.
Да – полностью согласен насчет большой(широкой) картинки. Хотя пересев за 20″ Аймак я слегка разочаровался в этой идее на некоторых сайтах :) Большое разрешение балует…
Спасибо. Хороший совет. Как и все остальные :)
Полезная статья, пригодится, спасибо.
Мне кажется или ссылка одинаковые? :-)
в index1.html у меня серые блоки поверх текста… а в каком броузере обе ссылки одинаково выглядят?
Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте.
Вечером отпишу свое решение, сейчас под рукой нету исходников.
Первое что приходит в голову
body{padding-left:20%}
#out{padding-right:20%}
Ну и соответственно фоны задавать для БОДИ и #out. Их протяженность по вертикали уже можно контролировать
«Глюк?» на Яндекс.Фотках
И ссылки у меня тоже одинаковые, кликал из Feedreader
Хм – а в моих виндошных все ок… что у тебя за броузер?
ИЕ 6, стандартная сборка.
Странно – на моей чистой WinXP – все ок в ИЕ6 (
В общем-то то же самое можно и таблицами сверстать. Или CSS-Таблицами ,если уж все так любят DIV:)
На этом блоге нет обсуждений как верстать – таблицами или нет =). И я никого не буду уговаривать…
В смысле имелось ввиду ,решить проблему наверняка можно ещё проще=)
При всем уважении – вряд ли. Решение при помощи кучи лишнего кода для меня не более простое решение. Даже добавление пустого дива ) нож по сердцу. Я уж молчу о таблице с тремя ячейками, в которой я запутаюсь очень быстро =)
Проявляется данный глюк на самом крупном размере шрифта, как оказалось.
По-моему из-за слова Несимметричный его “распирает”
Ivan сказал(а) 2 октября:
Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте.
Вечером отпишу свое решение, сейчас под рукой нету исходников.
Так как же все-таки это сделать? Очень нужно .. пока что не нашел решения
За инфу – большое СПС
Так в 9м каменте я вроде бы постарался описать свое решение.
Иван?
2akella:
что касается “9″ – все ясно.
Надеялся на решение которое позволит использовать левый и правый дивы в качестве “ушек”, т.к. бэкграунд на боди уже занят ))
и еще вопросик(сорри за оффтоп):
можно ли сделать так чтобы заканчивался не под , а возле его края … при условии что ширина фиксированная?
Напиши мне на имейл внизу страницы, а то я не очень понимаю что ты хочешь сделать…
2akella
Спасибо, проблема была решена другими методами.
в IE не работает(
ага, увидел в самом низу пример где для IE используется filter – красиво!
взял на вооружение)
[...] Читаем [...]
Засунули весь сайт в один див и радуются, обсуждают как круто получилось! Я бы за такое как минимум пропесочил верстальщика, как максимум выгнал с работы.
Оставить комментарий