Jump to content
  • 0

Помогите с шапкой для фиксированного шаблона


Demon_gms
 Share

Question

Помогите с версткой шаблона.Проблема в следующем..Левая и правая часть в шапке=баннере и футере разная.Вот картинка..

http://nds09.narod.ru/images/shapka.jpg

Область где шапка расположена строго на своем фиксированном месте - область Шаптель- сам баннер..

Область №1 - этот div я просто перед div баннера и выкинул его левее margin-left:-107px;..таким образом она чётко сместилась влево...А вот область №2 должна идти до самого конца сайта как бы резоновая не зависимо от разрешения монитора или его размера..Т.Е напрашивается сделать repeat-x, но тогда не могу понять если делать для body..то и слева естественно вылезит эта картинка..перед областью 1..А мне там нужен другой фон..фон неба..

Как сделать так чтобы слева в body был залит один фон а справа от баннера другой..

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

есть прямой и красивый способ, который будет работать только в современных браузерах.

Используется свойство background-size;

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

Link to comment
Share on other sites

  • 0

Не пойдетЬ..Если IE 6.0 я по тихому игнорирую...То с "семёрочкой" все таки приходится считаться..

  On 3/31/2011 at 6:37 PM, Demon_gms said:

Не пойдетЬ..Если IE 6.0 я по тихому игнорирую...То с "семёрочкой" все таки приходится считаться..

Если надо нагромоздить..мона и нагромоздить..лишь бы валидацию пройти и не усложнить код в крайностях..Вариант с изменением дизайна приходит в голову..но сдаваться не хочу..

Edited by Demon_gms
Link to comment
Share on other sites

  • 0

Есть такой принципиальный подход как изящная деградация.

То есть, для современных браузеров делаем всё замечательно и красиво, а для устаревших — новые возможности не используем, а отображаем только то, что старички могут отобразить без ошибок.

В данном случае вполне можно бы сделать один общий фон в устаревших браузерах, и нужную красоту в новых.

Link to comment
Share on other sites

  • 0
  On 3/31/2011 at 5:54 PM, Demon_gms said:

Помогите с версткой шаблона.Проблема в следующем..Левая и правая часть в шапке=баннере и футере разная.Вот картинка..

http://nds09.narod.ru/images/shapka.jpg

Область где шапка расположена строго на своем фиксированном месте - область Шаптель- сам баннер..

Область №1 - этот div я просто перед div баннера и выкинул его левее margin-left:-107px;..таким образом она чётко сместилась влево...А вот область №2 должна идти до самого конца сайта как бы резоновая не зависимо от разрешения монитора или его размера..Т.Е напрашивается сделать repeat-x, но тогда не могу понять если делать для body..то и слева естественно вылезит эта картинка..перед областью 1..А мне там нужен другой фон..фон неба..

Как сделать так чтобы слева в body был залит один фон а справа от баннера другой..

Почему область 2 вылазит перед областью 1, если она прижата к левому края намертво?

1. Покажи конечный скриншот того, что должно быть на широких мониторах

2. И скриншот того, что происходит щас, когда экран становиться шире. (короче скрин с косяком)

Link to comment
Share on other sites

  • 0

Извиняюсь за опоздание.Не думайте что я пропал.Помощь очень нужна..

http://nds09.narod.ru/images/2.png

Вот если я вставляю справа <div>естестевенно растянуть его до конца моника не могу..Размеры то фиксированные, а хотелось бы чтоб эта зеленая часть доходила до конца моника и соответственно в футере я сделаю тож самое только наоборот

http://nds09.narod.ru/images/shapka.jpg

Link to comment
Share on other sites

  • 0

Можно сделать таблицами

А можно для шапки и футера сделать по два дива, растянуть их по ширине 100%, и им задать фоновые рисунки. То что внутри - отцентрировать по ширине так margin:0 auto;

Edited by clavin
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy