<div> <!-- Это внешний див, в нем
разместите фоновым изображением
вашу картинку. Размер дива
сделайте равным размеру
картинки -->
<div> <!-- Это внутренний див,
в нем разместите контент.
Рамер сделайте чуть меньше
предыдущего, чтобы тени
показывались по бокам. -->
</div>
</div>
Разница в отображении центрированного фонового рисунка
Здравствуйте!
Возникла проблема с отображением фонового рисунка в Firefox/Opera/IE. В первых двух (валидных) браузерах при задании background-position: center; картинка почему-то смещается на 1 пиксель левее, чем в IE. Как победить - не знаю. Хотел таким способом сделать "тень" для главного центрированного блока с контентом.
У кого какие мысли есть?
Возникла проблема с отображением фонового рисунка в Firefox/Opera/IE. В первых двух (валидных) браузерах при задании background-position: center; картинка почему-то смещается на 1 пиксель левее, чем в IE. Как победить - не знаю. Хотел таким способом сделать "тень" для главного центрированного блока с контентом.
У кого какие мысли есть?
Код в студию!
gromoff.fatal.ru/dev.html
Только почему-то FF не определяет кодировку правильно :( В опере/эксплорере все ок. Щас в сафари на маке проверю :)
Также не обращайте внимания на "<!-- '>" внизу страницы (тоже вроде бы только в FF), это я рекламу резал, которая на fatal.ru вставляется, осталось. Смотрите на фоновый рисунок (фиолетовый). Он размером 777 пикселей в ширину, можно поставить и четное число, ничего не поменяется.
Только почему-то FF не определяет кодировку правильно :( В опере/эксплорере все ок. Щас в сафари на маке проверю :)
Также не обращайте внимания на "<!-- '>" внизу страницы (тоже вроде бы только в FF), это я рекламу резал, которая на fatal.ru вставляется, осталось. Смотрите на фоновый рисунок (фиолетовый). Он размером 777 пикселей в ширину, можно поставить и четное число, ничего не поменяется.
Цитата: e1vin
Только почему-то FF не определяет кодировку правильно :( В опере/эксплорере все ок. Щас в сафари на маке проверю :)
Если код писался в notepad'е, то такие трудности могут быть при установке utf-8 кодировки. Как вариант - сменить редактор, или сменить кодировку. Вроде так.
Цитата: e1vin
Смотрите на фоновый рисунок (фиолетовый). Он размером 777 пикселей в ширину, можно поставить и четное число, ничего не поменяется.
Вы хотите этот фиолетовый кирпич выдать за тень? Я бы посоветовал поступить иначе: добавьте левому и правому div'ам боковые бордюры фиолетового цвета. А фон этот уберите совсем. И сразу жизнь покажется проще.
Хе :) Вы меня не поняли :)
Сохранена страница в utf-8 (можете посмотреть любым редактором, не поддерживающим двухбайтовые кодировки). С локального компа FF и все остальные понимают ее с первого раза. На fatal.ru почему-то у FF проблемы с определением возникают.
А насчет фона - это просто для примера я залил его фиолетовым. Тень будет совершенно другой. Сейчас я ее выложу.
update
Вот, проверьте сейчас. В IE все отлично смотрится, а в FF и Opera рисунок почему-то уезжает на пиксель влево.
Сохранена страница в utf-8 (можете посмотреть любым редактором, не поддерживающим двухбайтовые кодировки). С локального компа FF и все остальные понимают ее с первого раза. На fatal.ru почему-то у FF проблемы с определением возникают.
А насчет фона - это просто для примера я залил его фиолетовым. Тень будет совершенно другой. Сейчас я ее выложу.
update
Вот, проверьте сейчас. В IE все отлично смотрится, а в FF и Opera рисунок почему-то уезжает на пиксель влево.
как-то оно вообще странно, в опере полоска возле тени слева, в ИЕ справа. а как должно быть на самом деле?
Кстати, не пробовал указывать background-position в процентах?
Цитата: cogonet
как-то оно вообще странно, в опере полоска возле тени слева, в ИЕ справа. а как должно быть на самом деле?
Не должно быть никаких полосок ни слева, ни справа! :) Смотрите вложение.
ЗЫ. Почему вставлял я GIF, а вставился в итоге JPEG?
Цитата: Комаджу
Кстати, не пробовал указывать background-position в процентах?
Пробовал "background-position: %50", ничего не поменялось вроде бы. Какие еще предложения?
ЗЫ. Картинка моя еще и уменьшилась в придачу... Видимо дело в том, что оригинал 849х545, а это много слишком. Но зачем в жпег конвертировать? :confused:
Какие-то Вы чудеса рассказываете. Кто Ваш gif конвертировал? Браузер?
Цитата: e1vin
ЗЫ. Картинка моя еще и уменьшилась в придачу... Видимо дело в том, что оригинал 849х545, а это много слишком. Но зачем в жпег конвертировать? :confused:
Вот это я вообще не осилил ))
Есть подозрение что ширина контейнера для которого задается бекграунд указана без учета ширины теней по этому разные браузеры ее по разному обрезают.
А можно создать 2 элемента body внутри контейнера html? Т.е. что можно я знаю, но соответствует ли это стандартам? Идея такова - в одном body разместить картинку с тенью, а в другом body (чуть уже первого) - соответственно контент. Могут ли быть body внутри друг друга?
Кстати, в IE обнаружилась неприятная вещь: при изменении ширины окна фон тоже съезжает время от времени (т.е. получается что центрирование фона и body внутри html не совпадает, а полтора пикселя на экране ну никак не показать :)), поэтому нужно менять способы достижения желаемого.
Ув. товарищ Комаджу, я могу сделать скриншот с этой непонятной конвертацией. Я так понял, что картинки больше определенного размера вставлять нельзя. Я вставил большой GIF, который в итоге был уменьшен и сохранен в формате JPEG (наверное потому, что GIFы мы масштабировать не умеем). Но это всего лишь мои домыслы.
Кстати, в IE обнаружилась неприятная вещь: при изменении ширины окна фон тоже съезжает время от времени (т.е. получается что центрирование фона и body внутри html не совпадает, а полтора пикселя на экране ну никак не показать :)), поэтому нужно менять способы достижения желаемого.
Ув. товарищ Комаджу, я могу сделать скриншот с этой непонятной конвертацией. Я так понял, что картинки больше определенного размера вставлять нельзя. Я вставил большой GIF, который в итоге был уменьшен и сохранен в формате JPEG (наверное потому, что GIFы мы масштабировать не умеем). Но это всего лишь мои домыслы.
Цитата:
А можно создать 2 элемента body внутри контейнера html?
А что, дивы уже отменили? Теперь верстаим бодями?
Цитата:
Я так понял, что картинки больше определенного размера вставлять нельзя.
Вообще-то есть такая штука, но при аплуоде на сервер и меняется она в конфигах апача. А что бы в хтмл вставлять и при этом еще конвертация - ужас :eek: :D
Цитата: cogonet
А что, дивы уже отменили? Теперь верстаим бодями?
Нет, но просто изначально я решил, что логично расположить весь КОНТЕНТ в body, т.к. создавать для этого еще один контейнер совершенно не обязательно и логически получается правильно - в body содержимое сайта, а все остальное вокруг (фон и прочие тени) - в html.
Т.к. body в div не завернуть (или я ошибаюсь?), возник вопрос насчет 2 body.
Цитата:
Вообще-то есть такая штука, но при аплуоде на сервер и меняется она в конфигах апача. А что бы в хтмл вставлять и при этом еще конвертация - ужас :eek: :D
В какой еще html? Я имел в виду то, что вставляю в свой ответ на форуме codenet (тут :)) GIF-картинку, а она конвертируется в JPEG, уменьшаясь при этом.
Смотрите последовательно step1.jpg и step2.jpg :rolleyes:
Цитата:
какой еще html? Я имел в виду то, что вставляю
Да уж. Ну мы с Комаджу явно поняли иначе
Бывает.
В общем сейчас мучаюсь с тем, чтобы сделать 2 контейнера по высоте всего окна (либо содержимого, если оно длиннее, чем окно), которые лежат друг в друге. В одном - фоновый рисунок "тень", во вложеном в него - контент с границами (border).
Башка варит слабо, поэтому получается какая-то фигня... :(
В общем сейчас мучаюсь с тем, чтобы сделать 2 контейнера по высоте всего окна (либо содержимого, если оно длиннее, чем окно), которые лежат друг в друге. В одном - фоновый рисунок "тень", во вложеном в него - контент с границами (border).
Башка варит слабо, поэтому получается какая-то фигня... :(
Цитата: e1vin
Нет, но просто изначально я решил, что логично расположить весь КОНТЕНТ в body, т.к. создавать для этого еще один контейнер совершенно не обязательно и логически получается правильно - в body содержимое сайта, а все остальное вокруг (фон и прочие тени) - в html.
Т.к. body в div не завернуть (или я ошибаюсь?), возник вопрос насчет 2 body.
Т.к. body в div не завернуть (или я ошибаюсь?), возник вопрос насчет 2 body.
Вам надо купить книжку "HTML для самых маленьких". Там страница изображена в виде человечка, которого зовут HTML и у которого есть голова (HEAD) и тельце (BODY). после такого даже пятилетний малыш понимает, что человек с двумя тельцами выглядит неестественно.
Сделайте так:
Код:
Чтобы вся эта фигня была по центру и первому, и второму диву пропишите {margin:0 auto;}
Ха-ха :) Зачет ;)
Комаджу, спасибо за совет, но пожалуйста, если Вы таки решаетесь оставлять свои комментарии и давать какие-то советы, ознакомьтесь хотя бы в должной мере с тем, что я хочу сделать и что этому может прпятствовать.
А пример использования 2 body я видел на каком-то солидном сайте, правда врое-бы не вложенными, а по-очереди. Не помню для чего, но факт остается фактом. Так что оставьте своих человечков с их тельцами себе :)
Комаджу, спасибо за совет, но пожалуйста, если Вы таки решаетесь оставлять свои комментарии и давать какие-то советы, ознакомьтесь хотя бы в должной мере с тем, что я хочу сделать и что этому может прпятствовать.
А пример использования 2 body я видел на каком-то солидном сайте, правда врое-бы не вложенными, а по-очереди. Не помню для чего, но факт остается фактом. Так что оставьте своих человечков с их тельцами себе :)
Да хоть три используйте :) Ворд тоже ПОЧТИ валидно верстает ;)
Поскольку контейнер с контентом не резиновый - предлагаю вырезать однопиксельный, прозрачный (в середине) и с тенью по боках гиф на всю ширину дива с контентом, задать его бекграундом, размножить по иксу и не парить себе мозх с позиционированнием ))
Цитата: cogonet
Поскольку контейнер с контентом не резиновый - предлагаю вырезать однопиксельный, прозрачный (в середине) и с тенью по боках гиф на всю ширину дива с контентом, задать его бекграундом, размножить по иксу и не парить себе мозх с позиционированнием ))
Идея неплохая, но есть 2 "но":
1. Во-первых, я начал делать по-другому - 2 вложенных блока, один из которых шире на 20 пикселей (по 10 с каждой стороны на тень).
2. Во-вторых, если отключить картинки, то мой бордюрчик пропадет совсем, а этого не хотелось бы
В общем, всем спасибо, тему можно считать закрытой. Т.к. на изначальный вопрос - почему отцентрированный фон по-разному отображается, ответить все равно никто не смог, да и вряд ли это нужно.
Я-таки добился того, чего хотел. Проверьте пожалуйста gromoff.fatal.ru/index.html и gromoff.fatal.ru/dev.html в разных браузерах кому не лень, вдруг тень куда-то уедет или граница не дорисуется до конца..
Добился этого известным методом "100% height" с некоторыми своими доработками. Кому интересно - спрашивайте или смотрите таблицу стилей. Завязано все на плавающих блоках, иначе 100% высоты в моем случае никак было не добиться.
Всем спасибо и, выставляйте принудительно UTF-8. Хостинг мой дурацкий заголовки неверные отдает почему-то, хоть страница в UTF-8, хоть в KOI8-R, а у него все равно Windows-1251 ;)
Добился этого известным методом "100% height" с некоторыми своими доработками. Кому интересно - спрашивайте или смотрите таблицу стилей. Завязано все на плавающих блоках, иначе 100% высоты в моем случае никак было не добиться.
Всем спасибо и, выставляйте принудительно UTF-8. Хостинг мой дурацкий заголовки неверные отдает почему-то, хоть страница в UTF-8, хоть в KOI8-R, а у него все равно Windows-1251 ;)