Шапка 1600px

[mutkoc]

Добрый день всем, уважаемые форумчане.

Есть несколько вопросов.

Я, мягко говоря, в ступоре, два дня пытаюсь найти решение.

Значит так - есть шапка, в шапке на бэкграунде имага с размером 1600пикселей в длину, чтобы на любом разрешении (не беру во внимание 1900+ итд) было смотрибельно и приятно.

Проблема в следующем - в ДИВе шапки должно быть несколько элементов (меню и картинки-ссылки)

! если ДИВу шапки задать width: 100%; то все замечательно на всех разрешениях - тянется, как надо

! но! мне нужно отпозиционировать относительно краев шапки элементы вышеуказанные (меню и картинки) если же у нас width: 100%, соответственно элементы каждый раз просто-напросто от краев браузера будут позиционироваться.

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

подскажите пожалуйста выход из ситуации, голова уже просто раскалывается, сроки горят

Upd: естественно, совершенно НЕ важно, что на меньших разрешениях, чем в длину 1600 - шапка обрубится

Edited March 15, 2012 by mutkoc

[Softlink]

1) использовать бэкграунд

2) сделать внутри блок, нужных размеров, и в нем позиционировать элементы

И вообще, лучше показать на картинку где-нибудь, что там у вас.

[mutkoc]

посмотреть сие нерадивое чудо здесь: http://postmind.ru/tests/

1). картинка в 1600 и является бэкграундом дива, а что толку? размер задать требуется, в любом случае

2). а вот здесь уже почитал бы поподробнее, как в блоке, который должен вмещать в себя бэкграунд на 1600пикселей можно создать еще один блок, относительно которого будет позиционирование?

div.art-Header

{

margin: 0 auto;

position: relative;

z-index:0;

width: 100%;

height: 604px;

}

div.art-Header-jpeg

{

margin:0 auto;

position: absolute;

z-index:-1;

top: 0;

left: 0;

width: 100%;

height: 604px;

background-image: url('images/Header.jpg');

background-repeat: no-repeat;

background-position: center center;

}

Edited March 15, 2012 by mutkoc

[Nanto]

две картинки общим весом в 2Мб?

сделайте что-то типа body{background:url(....jpg) 50% 0; min-width:1000px;} и позиционируйте элементы через left:50% и подобранный марджин

Edited March 15, 2012 by Nanto

[Softlink]

О таком варианте я говорил http://jsfiddle.net/Softlink/bXh4C/

[mutkoc]

Да нет, 900кб

в наши дни не считаю это суровым показателем

блок тянем в сто процентов

а бэкграунд в половину этого?

нет же, мне надо, чтоб при любом разрешении до 1600 пикселей бэкграунд был от начала окна браузера до конца вплотную

кажется, нашел решение - придется несколько ксс создавать - http://www.php-jquery.ru/examples-on-the-jquery/podstrojka-sajta-pod-lyuboj-monitor-na-jquery

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

[Softlink]

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

[Nanto]

Да нет, 2Мб!

Это Ваше? http://postmind.ru/tests/wp-content/themes/Linux_Generation/images/bg.jpg (бэкграунд у body весом в 1,2Мб)

ничего не тянем - блок сам растянется на 100%, а background:url(....jpg) 50% 0; - это центровка бэкграунда по горизонтали, то что не влезет в блок - обрежется.

и остальные элементы позиционировать от середины блока/бэкграунда (left:50% путем подобранных положительных-отрицательных марджинов.

[mutkoc]

Softlink, 1 -пытаюсь проверить способ по ссылке

2 - относительно края блока, а не окна

про бэкграунд забыл - я его еще не урезал, скопировал с ПСД макета без изменения размера, отсюда вес

[Nanto]

Короче, бэкграунд у Вас и так центруется... поэтому:

.art-Header-jpeg div{left:50% !important;margin-left:-485px !important;}
.art-Header-jpeg div:first-child{left:50% !important; margin-left:0 !important;}

Блин, кто там Вам инлайновые стили распихал?

Edited March 15, 2012 by Nanto

[mutkoc]

Nanto, извиняюсь, не понял с первого раза!

ПРЕМНОГО БЛАГОДАРЕН

действительно проблема решена!

итого, двое суток искал решение - ни одного не нашел

меньше чем два часа на форуме - и аж целых три, правда остальные два непроверенные, но уверен, что тоже все получилось бы, спасибо огромное!

вывод - стоит обращаться к знающим людям, ждите в гости

Стихами пишет вордпресс, да и я так привыкший

почему мозг имеет свойство входить в ступор, как я про 50% постоянные не допетрил сам - не понимаю

еще раз, всем огромное спасибо!

[Nanto]

ещё это допишите, чтобы меню не вылезало за левый край:

div.art-Header-jpeg{min-width:1000px;}