Не могу прижать подвал к полу

il.prohorowi4 · April 2, 2012

Здравствуйте, уважаемые профессора!

Нужна ваша помощь! Не могу растянуть макет на всю страницу, хоть ты тресни! Хочется застрелиться :dash: :dash: :dash:

Код html

<!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>
<title>Покупателю - Копченые орешки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>

<body>
<div class="main">
					<div class="header">	
	<img src="head_line.jpg" alt="Nuts" />
	<img src="head_img.jpg" id="head_img" alt="Копченые орехи" />
	<a href="index.html" title=""><img src="logo.jpg" alt="Копченые орехи" /></a>
	<div class="nav">
		<ul>
			<li><a href="index.html" title="Главная">Главная</a></li>
			<li><a href="products.html" title="Выпускаемые продукты">Продукты</a></li>
			<li><a href="pokupatel.html" title="Покупателю">Покупателю</a></li>
			<li><a href="interesno.html" title="Это интересно">Это интересно</a></li>
			<li><a href="contacts.html" title="Контакты">Контакты</a></li>
			<li><a href="sotr.html" title="Сотрудничество">Партнерство</a></li>
			</ul>
		</div>
					</div>
			<div class="section">
									<div class="desc2">
									</div>
									<div class="clearMain"></div>
						<div class="footer"><hr color="black" size="3px" /><p class="footer-text">
<u>Без жидкого дыма, усилителей вкуса и красителей!</u><br />
© 2012 Частная коптильня. ИП Смирнов К.В. </p>
						</div>
			</div>


	</div>

</body>
</html>

Код css

*{margin: 0; padding: 0;} /* обнуляем отступы */
html {
	text-align: left;
	font-size: 12pt;
	font-family: Arial, sans-serif;
	min-height: 100%;
	background-image: url("line_top.png"), url("line_bottom.png"), url("bg_body.jpg");
	background-position: top left, bottom center, top center;
	background-repeat: repeat-x, repeat-x, repeat;
	margin: 0px auto;
}

body {
	height: auto;
}

.main {
	height: 100%;
	width: 949px;
	margin: 0px auto;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Параметры тени */
}

.section {
	position: relative;
	background-image: url("bg_center.jpg");
	background-repeat: repeat-y;
	padding: 0px;
	min-height: 100%;
	max-height: 100%;
	padding-bottom: 100px;
}

.clearMain {
	clear: both;
}
.footer { /* подвал */
	text-align: right;
	width: 949px;
	margin: 0px auto;
	background-image: url("line_bottom.png");
	background-position:  bottom center;
	background-repeat: repeat-x;
	color: #000; 
	height: 100px; /* высота подвала */
	position: absolute;
	bottom: 0;
}

.footer-text {
	font-size: 12pt;
	padding-right: 10px;
}

.nav {
	background-image: url("memu.jpg");

}
.nav ul {list-style: none;height: 44px; padding-top: 15px;}
.nav ul li {display: inline; margin-right: 3px; margin-left: 3px; font-size: 13.5px;}
.nav ul li a {color: #772500; font-weight: bold;}

.header {
	width: 949px;
	display: block;
}
.header img {
	display: block;
	margin: 0;
	padding: 0;
}
#head_img {
	float: right;
}

.desc {
text-align: center;
margin: 0px auto;
padding: 10px;
font-size: 10pt;
}

.desc2 {
text-align: justify;
margin: 0px;
padding: 10px;
font-size: 16pt;
color: #000;
padding: 10px;
margin: 0px auto;
width: 860px;
font-family: Arial, sans-serif;
line-height: 120%
}

.products {
width: 860px;
margin: 0px auto;
}

.products_index {
font-size: 10pt;
width: 900px;
margin: 10px auto;
background-color: rgba(239, 208, 156, 0.5);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #EFD09C;
padding: 5px;
}

.oreh_index {
vertical-align: top;
text-align: center;
border-width: 1px;
border-style: solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-color: #000;
padding: 5px;
margin: 10px;
height: 230px;
width: 180px;
background: rgb(237,210,163, 0.5); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(237,210,163,0.7) 0%, rgba(220,179,122,0.7) 44%, rgba(220,179,122,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,210,163,0.7)), color-stop(44%,rgba(220,179,122,0.7)), color-stop(100%,rgba(220,179,122,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,210,163,0.7) 0%,rgba(220,179,122,0.7) 44%,rgba(220,179,122,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,210,163,0.7) 0%,rgba(220,179,122,0.7) 44%,rgba(220,179,122,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,210,163,0.7) 0%,rgba(220,179,122,0.7) 44%,rgba(220,179,122,0.7) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(237,210,163,0.7) 0%,rgba(220,179,122,0.7) 44%,rgba(220,179,122,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edd2a3', endColorstr='#dcb37a',GradientType=0 ); /* IE6-9 */
display: inline-block;
}

.oreh_index img {
margin: 0 auto;
}

h1 {
font-size: 16pt;
color: #772500;
margin: 10px;
}

p {
margin: 10px;
font-size: 16pt;
}

table {
margin: 0px auto;
font-size: 14pt;
}

Скачать архив (для вашего удобства ): _http://smokednuts.narod.ru/smokednuts.zip файл pokupatel.html

Очень прошу помочь!

Может я не тот доктайп юзаю?

v01d0s · April 2, 2012

html, body {height: 100%;}

il.prohorowi4 · April 3, 2012

Да пробовал. У меня тогда узор оказывается не там где надо.

v01d0s · April 3, 2012

<!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>
<title>Покупателю - Копченые орешки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>

<body>
<div class="main">
					<div class="header">	
	<img src="head_line.jpg" alt="Nuts" />
	<img src="head_img.jpg" id="head_img" alt="Копченые орехи" />
	<a href="index.html" title=""><img src="logo.jpg" alt="Копченые орехи" /></a>
	<div class="nav">
		<ul>
			<li><a href="index.html" title="Главная">Главная</a></li>
			<li><a href="products.html" title="Выпускаемые продукты">Продукты</a></li>
			<li><a href="pokupatel.html" title="Покупателю">Покупателю</a></li>
			<li><a href="interesno.html" title="Это интересно">Это интересно</a></li>
			<li><a href="contacts.html" title="Контакты">Контакты</a></li>
			<li><a href="sotr.html" title="Сотрудничество">Партнерство</a></li>
			</ul>
		</div>
					</div>
			<div class="section">
									<div class="desc2">
									</div>
									<div class="clearMain"></div>

			</div>


	</div>
<div class="footer"><hr color="black" size="3px" /><p class="footer-text">
<u>Без жидкого дыма, усилителей вкуса и красителей!</u><br />
© 2012 Частная коптильня. ИП Смирнов К.В. </p>
						</div>
</body>
</html>

*{margin: 0; padding: 0;} /* обнуляем отступы */
html {
	text-align: left;
	font-size: 12pt;
	font-family: Arial, sans-serif;
	height: 100%;
	background-image: url("line_top.png"), url("line_bottom.png"), url("bg_body.jpg");
	background-position: top left, bottom center, top center;
	background-repeat: repeat-x, repeat-x, repeat;
	margin: 0px auto;
}

body {
	height: 100%;
}

.main {
	min-height: 100%;
	width: 949px;
	margin: 0px auto;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,0.9); /* Параметры тени */
}

.section {
	position: relative;
	background-image: url("bg_center.jpg");
	background-repeat: repeat-y;
	padding: 0px;
	min-height: 100%;
	max-height: 100%;
	padding-bottom: 100px;
}

.clearMain {
	clear: both;
}
.footer { /* подвал */
	text-align: right;
	width: 949px;
	margin: 0px auto;
	margin-top:-100px;
	background-image: url("line_bottom.png");
	background-position:  bottom center;
	background-repeat: repeat-x;
	color: #000; 
	height: 100px; /* высота подвала */


}

maxpryg · April 3, 2012

Можно так попробовать:

html,body{

height:100%;

}

.main{

height:100%;

}

.section{

min-height:100%;

margin-bottom:-100px;/* высота подвала */

}

.header{

position:absolute;

}

#all{

overflow:hidden;

padding-bottom:100px;/* высота подвала */

}

html-код:

</div>

</div>

il.prohorowi4 · April 3, 2012

НЕЕЕТ!

1. Футер должен находиться в блоке section.

2. maxpryg, вы пробовали так?

ХТМЛ И БАДИ ДОЛЖНЫ иметь мин-хейт: 100%;

Sensei · April 4, 2012

сделайте отрицательный нижний маржин у main и нижний паддинг на высоту футера. по моему такие вещи делаются именно так.

Edited April 4, 2012 by Sensei

il.prohorowi4 · April 4, 2012

Нет, ну вы тему читали???? ПРОБЛЕМУ ПОНЯЛИ? Я знаю как это делается!

Switch74 · April 4, 2012

Нет, ну вы тему читали???? ПРОБЛЕМУ ПОНЯЛИ? Я знаю как это делается!

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

2. без html,body{height:100%;} у тебя вряд ли получится растянуть на всю высоту окна браузера, только если js использовать,

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

3. по ширине растягивается элементарно width:100%; (указывайте вопрос точнее, а то получите много лишних и не нужных советов)

4. если футер нужен в блоке section, его можно абсолютно позиционировать внутри него по нижнему краю

Sign In

Не могу прижать подвал к полу

Question

il.prohorowi4

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

v01d0s

Link to comment

Share on other sites

il.prohorowi4

Link to comment

Share on other sites

v01d0s

Link to comment

Share on other sites

maxpryg

Link to comment

Share on other sites

il.prohorowi4

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

il.prohorowi4

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information