Помогите решить проблему с версткой

SonyKo · 04.02.2012

Здраствуйте. Прошу помощи, т.к. сама решить проблему не могу, а верстальщик, который нанялся помогать, пропал.
Есть сайт:
http://dd-vinyl.com.ua/galery.html
Как видно "зеленый" блок(page), внутри которого будет отображаться информация при скроллинге растягивается, но если дабавить информацию, она уходит под футер и за пределы page, вот так http://dd-vinyl.com.ua/index_1.html.
А на главной футер поднялся вверх и блок page некрасиво обрывается.
Мне необходимо сделать так, чтобы материал прокручивался внутри page и не залезал под футер, т.е чтобы page растягивался исходя из размеров содержимого.

Вот стили:

Код:

html {height: 100%;}
*html body {height: 100%;}
#page { position:relative;
		width:1284px;
		background-image:url(images/fon.png) ;
		height:100%;
		background-repeat:repeat-y;
		margin:auto;
}
body {background-image:url(images/bg.jpg) ;
		width:1280px;height:100%;
		background-repeat:repeat;
		margin:0 auto;
		min-height: 100%;
		position:relative;
		font-size:14px;
		font-family:"Trebuchet MS", Gadget, sans-serif	
}
#content {position:relative;
		margin-left: 160px;
	padding-top: 50px;
		width: 1000px;
		float: left; /*прижимаем контейнер к левому краю*/
		color:#000;
		text-align:justify;
}
#rasporka{height:283px;}
#footer{ width: 1280px; /* ширина*/
		height: 283px; /* высота*/
		background-image:url(images/foot.png); /* задаем фон футера*/
		position: absolute;
		bottom: 0px;
		margin:-283px auto 0;
		background-repeat:no-repeat; /* запрещаем размножение изображения по осям Х и Y */
}

motek · 04.02.2012

а есть картинка, как оно должно выглядеть?

Jackito · 04.02.2012

А зачем в #content стоит float: left; и в #footer position: absolute;

SonyKo · 04.02.2012

1. Такой картинки нет
2. наличие Float не влияет на мою проблему, при смене позиции на relative, проблема так же не решается, а информация, расположенная в футере уезжает вниз. Я так понимаю, чтобы добиться результата, вносить изменения необходимо в стили нескольких блоков.

Поясню, это моя первая верстка. Просьба не отвечать вопросом на вопрос.

motek · 05.02.2012

SonyKo сказал(а):
1. Такой картинки нет
2. наличие Float не влияет на мою проблему, при смене позиции на relative, проблема так же не решается, а информация, расположенная в футере уезжает вниз. Я так понимаю, чтобы добиться результата, вносить изменения необходимо в стили нескольких блоков.

Поясню, это моя первая верстка. Просьба не отвечать вопросом на вопрос.

судя по этому куску кода

Код:

#rasporka{height:283px;}
#footer{ width: 1280px; /* ширина*/
				height: 283px; /* высота*/
				background-image:url(images/foot.png); /* задаем фон футера*/
				position: absolute;
				bottom: 0px;
				margin:-283px auto 0;
				background-repeat:no-repeat; /* запрещаем размножение изображения по осям Х и Y */
}

footer должен быть прижат к низу окна браузера?
тогда вынесите его за пределы <div id="page"> (он у Вас шире,чем body

)

Код:

#page {
	width: 1280px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#content {
    padding: 0 0 283px;
}
#footer {
	width: 1280px;
	margin: -283px auto 0;
	height: 283px;
	background: url('images/foot.png') no-repeat;
	position: relative;
}

тогда пустой <div id="rasporka"></div> можно удалить
а <div id="page-inner"> и <div id="content"> вкладываем в <div id="page"> на одном уровне...

Код:

<body>

<div id=page">

	<div id="page-inner">
		 .......
	</div><!-- #header-->

	<div id="content">
		 ........
	</div><!-- #content-->

</div><!-- #page -->

<div id="footer">
		........
</div><!-- #footer -->

</body>

SonyKo · 05.02.2012

Спасибо, вроде все неплохо, только остается вопрос, что делать с текстом, который заходит за футер (см. скрин).
Необходимо чтобы текст доходил до узора. и появлялась вертикальная прокрутка...

Кроме того, наличие текста на странице смещает содержимое футера вниз....

BaNru · 05.02.2012

Добавить у блока с текстом margin-bottom или padding-bottom

SonyKo · 05.02.2012

спасибо, все оказалось проще добавила overflow: auto; и высоту content 100%. Теперь контент не вылезает за пределы.
Спасибо большое motek!

Помогите решить проблему с версткой

SonyKo

Новичок

motek

злой как @

Jackito

Designer

SonyKo

Новичок

motek

злой как @

SonyKo

Новичок

Вложения

BaNru

Пацифизжу

SonyKo

Новичок

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей