Позционирование картинки "с ушами" по центру окна

сс9000 · July 16, 2011

Привет.

Есть макет 2 колонки 970px фиксированный (хедер, левый сайдбар, контент, футер).

Между хедером и контентом есть картинка больше размера body (неоднородная переходящая в фон) 1222px (типа с ушами слева/справа). Задача была чтобы картинка всегда была по центру, а при сворачивании окна, "уши" картинки прятались слева/справа, под окно браузера. Короче, я ее спозиционировал относительно. Проблема в появлении горизонтальной прокрутки, может кто подскажет как убрать?

картинка:

Код css:

html, body {

margin:0 auto;

padding:0;

border:0;

width: 970px;

background: #f7d100;

}

.centerimage {

position:relative;

left: -125px;

width: 1222px;

height: 300px;

}

код html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Softlink · July 16, 2011

html, body {
margin:0 auto;
padding:0;
border:0;	
width: 970px;
background: #f7d100;
overflow:hidden;
}

так должно получиться? А может и вовсе картинку в бэграунд затолкать? Наверное лучше будет.

p.s. заключайте код в спец. теги

Edited July 16, 2011 by Softlink

сс9000 · July 16, 2011

html, body {
margin:0 auto;
padding:0;
border:0;	
width: 970px;
background: #f7d100;
overflow:hidden;
}
так должно получиться? А может и вовсе картинку в бэграунд затолкать? Наверное лучше будет.
p.s. заключайте код в спец. теги

Если делать

overflow: hidden;

, тогда обрезаются "уши" . Сам див с картинкой должен быть замещаемым, т.е. будет серия картинок "с ушами".

Softlink · July 16, 2011

есть ссылка на страничку? Как это должно выглядеть? Пока сложно представить.

И еще раз повторю свой вариант, почему бы не затолкать картинку в бэграунд?

sigma77 · July 16, 2011

сс9000,


body {
 background: #f7d100 url(4.jpg) 50% 0 no-repeat;
}

Так не пойдет?

Фон вместо боди можно повесить на любой подходящий элемент.

overflow:hidden - тебе не нужен тут

Softlink · July 16, 2011

и я про бг говорил. Только, наверное, его засунуть в сам див, а не боди и позиционировать по центру.

сс9000 · July 16, 2011

и я про бг говорил. Только, наверное, его засунуть в сам див, а не боди и позиционировать по центру.

Парни, сделал background в див, всеравно прокрутка внизу появляется. По идее Такая же картинка с "ушами" должна быть в футере, и также смещаться вместе с контентом относительно правого края.

Вот закачал на сайт, посмотрите плз.

http://www.707157.ru/

Temiks · July 16, 2011

centerimage нужно задать не фикс ширину , а резиновую , max-width: 1222px;

p.s сделайте скриншоты как должно быть, и как НЕ должно быть

Edited July 16, 2011 by Temiks

сс9000 · July 16, 2011

centerimage нужно задать не фикс ширину , а резиновую , max-width: 1222px;
p.s сделайте скриншоты как должно быть, и как НЕ должно быть

Если centerimage сделать резиновый - обрезаются "уши".

Скриншот как должно быть при сворачивании окна, но только без нижней прокрутки.

http://www.707157.ru/1.jpg

Temiks · July 16, 2011

Если я вас правильно понял:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
            html, body {
                margin: 0;
                padding: 0;
            }
            body {
                background: gold url(./img.jpg) no-repeat 50% 0;
            }
            p {
               margin: 0; 
            }
            #box {
                max-width: 970px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div id="box" >
            <p>Тут идет весь контент и тому подобное</p>
        </div>
    </body>
</html>

Или можете посмотреть тут http://atemiks.wen.ru/test.html

Softlink · July 16, 2011

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

Temiks · July 16, 2011

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

Какие проблемы? Я же все вроде правильно сделал, при сужение уши по боках обрезаются

Edited July 16, 2011 by Temiks

Softlink · July 16, 2011

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

Смотри, ты задал бг для боди, а чуть выше ТС писал, что такая же картинка будет внизу. Вешать на html еще фон? Или я чего-то не догоняю. :unsure:

сс9000 · July 16, 2011

я так понимаю, что тут именно в диве должна быть картинка от этого все проблемы.
Какие проблемы? Я же все вроде правильно сделал, при сужение уши по боках обрезаются
Смотри, ты задал бг для боди, а чуть выше ТС писал, что такая же картинка будет внизу. Вешать на html еще фон? Или я чего-то не догоняю.

Парни гляньте! http://www.707157.ru/

Сделал чтобы было более понятно =)

Softlink · July 16, 2011

да, вот именно об этом я и говорил Что для боди это не подходит. Правильно?

ИМХО, по-моему проще картинку меньше сделать)))

Temiks · July 16, 2011

я так понимаю, что тут именно в диве должна быть картинка от этого все проблемы.
Какие проблемы? Я же все вроде правильно сделал, при сужение уши по боках обрезаются
Смотри, ты задал бг для боди, а чуть выше ТС писал, что такая же картинка будет внизу. Вешать на html еще фон? Или я чего-то не догоняю.

Можно сделать так, почему бы и нет? Если шапка будет фикс высотой то можно и для body (в html например будет внизу), а если нет то нужно делать через див, а внизу бг тогда через html или body, как кому удобнее

Все зависит от самого макета, как там все расположено на 100% я не знаю

Edited July 16, 2011 by Temiks

сс9000 · July 16, 2011

да, вот именно об этом я и говорил Что для боди это не подходит. Правильно?
ИМХО, по-моему проще картинку меньше сделать)))

Ага, я бы так поступил, но клиент зараза хочет чтобы были "уши" .

Вроде проблему решил, но блин прокрутка внизу глаза режет.

Temiks · July 16, 2011

Вот с двумя картинками http://atemiks.wen.ru/test.html (это если шапка резина)

Softlink · July 16, 2011

Вот с двумя картинками http://atemiks.wen.ru/test.html (это если шапка резина)

ну ты поступил, прям как я сказал - сделал картинку меньше))) Она же 1222px.

хотя все равно работать будет

сс9000 · July 16, 2011

Вот с двумя картинками http://atemiks.wen.ru/test.html (это если шапка резина)

Спасибо друг, но у тебя "ухи" обрезались и картинка меньше. Див с картинкой должен быть с фиксированным размером 1222х300px.

Может есть другой способ, чтобы уши прятались за вьюпортом?

ПС. от еще сайт увидел Лебедева, http://www.baby-club.ru/ там футер, аналогичный т.е. как бы смещается, относительно правой стороны.

Edited July 16, 2011 by сс9000

Temiks · July 16, 2011

У меня нету исходной картинки в 1222х300px.

но у тебя "ухи" обрезались и картинка меньше

Так тебе то и надо же что бы ухи обрезались?

ps. Лучше картинку которая будет внизу не делать через бг html, а лучше через див, потому что если будет много контента картинка будет начинаться не в самом низу контента, а в низу экрана

Softlink · July 16, 2011

Вот с двумя картинками http://atemiks.wen.ru/test.html (это если шапка резина)
Спасибо друг, но у тебя "ухи" обрезались и картинка меньше. Див с картинкой должен быть с фиксированным размером 1222х300px.
Может есть другой способ, чтобы уши прятались за вьюпортом?
ПС. от еще сайт увидел Лебедева, http://www.baby-club.ru/ там футер, аналогичный т.е. как бы смещается, относительно правой стороны.

да не, пример Temiks'a будет работать. Но это тогда надо знать заранее местоположение бг. В этом примере, если шапка будет больше 100пк, то она заедет на фон.

сс9000 · July 16, 2011

У меня нету исходной картинки в 1222х300px.
но у тебя "ухи" обрезались и картинка меньше
Так тебе то и надо же что бы ухи обрезались?
ps. Лучше картинку которая будет внизу не делать через бг html, а лучше через див, потому что если будет много контента картинка будет начинаться не в самом низу контента, а в низу экрана

Исходник http://www.707157.ru/44.jpg

Щас попробую по-другому. В общем ухи должны как бы не обрезаться а уходить в границы окна слева/справа попробуй уменьши окно до 970px на www.707157.ru

они не обрезаются а плавно переходят в фон и скрываются. =)

Softlink · July 16, 2011

слушай, ну тут только вешать фон на боди, задавать шапке фикс высоту и будет работать. Больше не знаю как сделать это на ксс. По сути тебе надо уместить картинку 1222пк в 1024)

сс9000 · July 16, 2011

слушай, ну тут только вешать фон на боди, задавать шапке фикс высоту и будет работать. Больше не знаю как сделать это на ксс. По сути тебе надо уместить картинку 1222пк в 1024)

Ладно, в общем прибегну тогда к помощи таблиц =)

Temiks · July 16, 2011

да не, пример Temiks'a будет работать. Но это тогда надо знать заранее местоположение бг. В этом примере, если шапка будет больше 100пк, то она заедет на фон.

А ясли так , то нужно будет помещать в див

Ладно, в общем прибегну тогда к помощи таблиц =)

Покажешь что выйдет

Sign In

Позционирование картинки "с ушами" по центру окна

Question

Link to comment

Share on other sites

39 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information