Верстка, как правильно расположить шапку на сайте

Ben_Laden
На сайте с 26.03.2011
Offline
92
1723

Есть шапка 1920px в ширину? изображение. Нужно сделать чтобы ее элементы и лого не плавали при разных расширениях окна относительно основному блоку. Как бы зафиксировать по центру, а при уменьшении окна обрезалась по краям. как то так, приложу картинку для более понятности.

1) как есть

2) Как есть при уменьшении окна

3) Нужно сделать так

p.s. просьба не отправлять на учебники, а помочь) Спасибо!

jpg Untitled-2.jpg
Korew
На сайте с 31.12.2007
Offline
195
#1

лучше покажите сайт, тогда быстрее помогут.

[Удален]
#2

Можно просто создать еще один div блок со свойствами position: absolute, и фиксированной шириной (такая же как у контента), и поместить его в шапку прямо на картинку. И уже в этом блоке расставить все элементы как надо, и тогда они не будут двигаться при разных расширениях.

А вообще - шапка в 1920px - жестко, а если у меня монитор квадратный например и всего лишь 1024px, у меня пол сайта видно не будет из-за такой длины.... или ваш сайт исключительно для широкоформатных мониторов? =))))))

TaediumVitae
На сайте с 22.09.2011
Offline
41
#3
mrxmry:
еще один div блок со свойствами position: absolute

который тоже будет плавать.

Ben_Laden, мешает что-то шапкокартинику сделать бекграундом?

т.е. имею в виду такую штуку:

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

[Удален]
#4
TaediumVitae:
который тоже будет плавать.
Ben_Laden, мешает что-то шапкокартинику сделать бекграундом?
т.е. имею в виду такую штуку:
есть див с шириной в 100%, для него бекграундом задается нужная картинка и центрируется, внутри есть центрированный див фикс. ширины с контентом для шапки.

Ну он не будет плавать если у него ширина 1000px например и он абсолютно позиционирован относительно фиксированной ширины шапки, а ширина шапки как я понял 1920px, но ваш вариант тоже логичен и вполне можно использовать его.

TaediumVitae
На сайте с 22.09.2011
Offline
41
#5

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

[Удален]
#6
TaediumVitae:
mrxmry, а вот как я понял: есть картинка шириной 1920 пикселей, которую есть необходимость впихнуть в резиновую шапку, да еще и так, чтобы центр этой картинки (так же, как и содержимое самой шапки - лого и, может, какой-нибудь текст) был всегда на уровне центра контентного блока. Не?

Старт пост начинается с фразы - "Есть шапка 1920px в ширину? изображение." - я так понял что вся шапка это и есть картинка, шириной в 1920px. :)

TaediumVitae
На сайте с 22.09.2011
Offline
41
#7

А еще там есть

Ben_Laden:
Как бы зафиксировать по центру, а при уменьшении окна обрезалась по краям
Ben_Laden
На сайте с 26.03.2011
Offline
92
#8
mrxmry:
Можно просто создать еще один div блок со свойствами position: absolute, и фиксированной шириной (такая же как у контента), и поместить его в шапку прямо на картинку. И уже в этом блоке расставить все элементы как надо, и тогда они не будут двигаться при разных расширениях.

А вообще - шапка в 1920px - жестко, а если у меня монитор квадратный например и всего лишь 1024px, у меня пол сайта видно не будет из-за такой длины.... или ваш сайт исключительно для широкоформатных мониторов? =))))))

это только шапка при том что элементы основные в центре, а сам сайт 1000px

---------- Добавлено 04.02.2013 в 15:49 ----------

ВОТ http://beta.fishing-club.pro/ нужно только изначально взглянуть при разрешении экрана в 1920px, а потом уменьшать дабы, в чем дело)) Спасибо за советы

---------- Добавлено 04.02.2013 в 15:50 ----------

mrxmry:
Старт пост начинается с фразы - "Есть шапка 1920px в ширину? изображение." - я так понял что вся шапка это и есть картинка, шириной в 1920px. :)

Совершенно верно

---------- Добавлено 04.02.2013 в 15:57 ----------

На данный момент у меня в верху сайта 2 diva один 100% а другой находиться внутри первого по ширине wrappera, по центру.

шапку сделал бекграундом для первого дива......

Но поскольку дизайн делал сам, то пришла была идея сделать для первого дива бекгаун картинку без элементов и логго 1920px а во второй что по центу вставить элементы, и получится что элементы будут ездить по бекграунду, что в принцепе допустимо

C
На сайте с 04.02.2005
Offline
277
#9

#header-back {

background: url("../images/header1.jpg") no-repeat center 0

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий