Картинка за пределами 1000px

[Буллет]

Здравствйте. Подскажите, как сверстать макет ?

Конкретно интересует, как поставить картинку 725*533 как нарисовано в макете и блок шириной 1100px< при ширине сайта 1000px

[Shift-Web]

Копайте сюда:

Перекрытие(фикс ширина overflow: hidden)

+ position: relative\absolute

или Отрицательный отступ

z-index

[Буллет]

Копайте сюда:

Перекрытие(фикс ширина overflow: hidden)

+ position: relative\absolute

или Отрицательный отступ

z-index

Отрицательный отступ и absolute увеличивают ширину на 100px и скролл снизу появляется когда 1100px ширина браузера

[Bonzash]

Копайте сюда:

Перекрытие(фикс ширина overflow: hidden)

+ position: relative\absolute

или Отрицательный отступ

z-index

Отрицательный отступ и absolute увеличивают ширину на 100px и скролл снизу появляется когда 1100px ширина браузера

overflow: hidden ?

[Shift-Web]

Копайте сюда:

Перекрытие(фикс ширина overflow: hidden)

+ position: relative\absolute

или Отрицательный отступ

z-index

Отрицательный отступ и absolute увеличивают ширину на 100px и скролл снизу появляется когда 1100px ширина браузера

overflow: hidden ?

Что то не так? )

[Буллет]

overflow: hidden; для дива с фиксированной шириной и тогда картинка обрезается.

[Bonzash]

Shift-Web Вам написал вариант, который должен работать. Давайте или код или ссылку на страницу.

[Shift-Web]

Shift-Web Вам написал вариант, который должен работать. Давайте или код или ссылку на страницу.

Может позже. А что там думать? Это же очевидно ...

[SelenIT]

Как вариант, сделать картинку шириной 1200 (добавив белое — или какой там фоновый цвет — поле слева) и положить ее фоном на body по центру.

[Буллет]

Shift-Web Вам написал вариант, который должен работать. Давайте или код или ссылку на страницу.

http://jsfiddle.net/Z63xt/

Как вариант, сделать картинку шириной 1200 (добавив белое — или какой там фоновый цвет — поле слева) и положить ее фоном на body по центру.

Спс, но не вариант.

[SelenIT]

Еще вариант — блок с position: absolute; left: 50%; width: 50%; max-width: 725px; margin-left: -125px; и картинка в нем фоном.

[Буллет]

Еще вариант — блок с position: absolute; left: 50%; width: 50%; max-width: 725px; margin-left: -125px; и картинка в нем фоном.

Не работает как нужно

[Justnewone]

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

[Буллет]

Нужно, чтобы картинка 725*533 стояла на одном месте (Как на рисунке в первом посте), независимо от размера экрана. Получается если ширина экрана больше ~1150, то эта картинка показывается полностью. Если ширина экрана 1000px, то ~150px этой картинки скрываются справа (!скролл снизу не появляется). Если ширина экрана меньше 1000px, то появляется внизу браузера скролл, который показывает 1000px;

Не знаю как больше объяснить

В последнем варианте картинка двигается в зависимости от размера экрана. В других вариантах, не работает вообще (Как понял, так сделал, может и не так как задумывал автор поста)

[Bonzash]

Попробуйте отступ слева в процентах задать.

[amelice]

Нужно, чтобы картинка 725*533 стояла на одном месте (Как на рисунке в первом посте), независимо от размера экрана. Получается если ширина экрана больше ~1150, то эта картинка показывается полностью. Если ширина экрана 1000px, то ~150px этой картинки скрываются справа (!скролл снизу не появляется). Если ширина экрана меньше 1000px, то появляется внизу браузера скролл, который показывает 1000px;

Не знаю как больше объяснить

В последнем варианте картинка двигается в зависимости от размера экрана. В других вариантах, не работает вообще (Как понял, так сделал, может и не так как задумывал автор поста)

Для картинки задайте position:fixed.Например:

<div class="block_1000px">
    <div class="img_block"></div>
</div>

css:

	
.block_1000px{
width:1000px;
margin:0 auto;
background:#555;
height:800px;
}
.img_block{
position:fixed;
height:533px;
width:725px;
left:50%;
margin-left:-125px;
background:red;
 z-index:100;
}

[Буллет]

Попробуйте отступ слева в процентах задать.

Не получается.

Вот как делал

.main {
width:100%;
}

.main_resize {
margin:0 auto;
width:1000px;
}

.main_head {
background:url('../images/head.png') no-repeat right top;
height:533px;
width:725px;
margin-left:50%;
position:relative;
}

<div class="main">
<div class="main_resize">
<div class="main_head"></div>
</div>
</div>

Edited September 22, 2011 by Буллет

[Буллет]

Для картинки задайте position:fixed.

Спасибо большое. Теперь работает почти как нужно. Вот только фон у резиновой шапки пропадает, если мотнуть скроллом вправо, когда ширина экрана меньше 1000px

[Буллет]

Спасибо большое. Теперь работает почти как нужно. Вот только фон у резиновой шапки пропадает, если мотнуть скроллом вправо, когда ширина экрана меньше 1000px

Как это исправить, не подскажите?

И еще сделать блок шириной 1100px как на рисунке в первом посту?

Edited September 22, 2011 by Буллет

[Bonzash]

ссылку можно?

[Буллет]

ссылку можно?

_http://srn.kz/

[amelice]

ссылку можно?

_http://srn.kz/

.head сделайте тоже

position:fixed; top:0 ;left:0; right:0;

Как я вижу этот блок просто обрамляет внутренний блок и тянет бекграунд.

.main задайте 104px маргин сверху.

Может будут другие варианты.

Старые ИЕ<=6 не поддерживают фиксированное позиционирование.

Edited September 22, 2011 by cheburek

[Буллет]

Тогда скролл снизу вообще не появляется, когда ширина экрана <1000px

И если обрамить див с картинкой в <div style="float:right"></div> то картинка не отображается

Edited September 22, 2011 by Буллет