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

сс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>

hoper · July 16, 2011

Привет

Это должно помочь, картинку брал с примера http://www.707157.ru/44.jpg.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body {
			margin:0;
			background:#FFC000;
			min-width:970px;
		}
		#wrapper {
			position:relative;
			width:100%;
			overflow:hidden;
		}
		#header {
			width:970px;
			margin:0 auto;
			padding:10px 0;
			background:#FFE680;
		}
		.visual {
			position:relative;
			width:1222px;
			left:50%;
			margin-left:-611px;
		}
		#content {
			width:970px;
			margin:0 auto;
		}
		#footer {
			width:970px;
			margin:0 auto;
			background:#BFF08E;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
		</div>
		<div class="visual"><img src="http://www.707157.ru/44.jpg" alt="" /></div>
		<div id="content">
			<strong>Content</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
		</div>
		<div id="footer">
			<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
		</div>
	</div>
</body>
</html>

сс9000 · July 16, 2011

Привет
Это должно помочь, картинку брал с примера http://www.707157.ru/44.jpg.

Во! То, что надо! Спасибо =)

Softlink · July 16, 2011

и все-таки overflow:hidden; ))) Только не для боди

SelenIT · July 16, 2011

А чем этого мало?

Softlink · July 16, 2011

А чем этого мало?

ну ты как всегда)) Как Дед Мороз с подарком приходишь.

Как это работает, что-то не могу дотумкать :blush:

все, додумался))

Edited July 16, 2011 by Softlink

Temiks · July 16, 2011

Хм, и чем же не устраивал мой вариант решения?.

SelenIT · July 16, 2011

Softlink, это я просто твою же идею

А может и вовсе картинку в бэграунд затолкать?

реализовал

Temiks, по сути это он и есть, согласен. Просто дополнение про див я, если честно, сам при первом чтении темы пропустил...

Softlink · July 16, 2011

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

да, я это заметил. Просто сразу не сообразил, как в твоем примере фон растягивается за пределы блока.

Погоди, а если надо будет обертку делать типа wrapper для всего сайта, что тогда?

SelenIT · July 16, 2011

Погоди, а если надо будет обертку делать типа wrapper для всего сайта, что тогда?

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

Softlink · July 16, 2011

тогда, наверное, могут быть заморочки с прижиманием футера к низу. Не?

Сложно мне представляется все это.

Temiks · July 16, 2011

тогда, наверное, могут быть заморочки с прижиманием футера к низу. Не?

Нет, если конечно делать через таблицу

SelenIT · July 16, 2011

Ну почему. Одна внешняя обертка (в простейшем случае body) 100%-й (точнее, auto) ширины и 100%-й же минимальной высоты, футер прибивается к ней. А смысловым блокам (вряд ли их будет много — чего-то типа .header_content, .main_content и .footer_content наверняка хватит) одной строчкой CSS задается фикс. ширина.

Можно, конечно, и так извернуться...

Softlink · July 16, 2011

воо, я позже начал копать в сторону псевдоэлементов. Но не хватило фантазии, как сделать так, чтобы фон не был зависим от основного блока. В общем теперь понял.

SelenIT · July 16, 2011

Вместо псевдо- можно реальный элемент вставить, некрасиво только (зато кроссбраузерность шире). Фокус в том, что при абс. позиционировании, если не задавать координат по одной оси (у меня по вертикали), они берутся как для статического позиционирования (т.е. зависят от текста). А указанные координаты (у меня left и right) берутся от ближайшего позиционированного предка, а при отсутствии такового — от body.

Но лично на мой вкус, вариант с фоном у частичной обертки практичнее, сам обычно использую его.

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

Join the conversation

Обсуждения

Important Information