Прижать футер

mazhar · May 17, 2010

Помогите прижать футер.

вот код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Костюмные ткани, лето</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
  <div id="main">
	<div id="header">  </div>
	<div id="container">
	  <div id="logo">	</div> 
		<div id="menu">
		  <ul>
			<li><a href="index.html">О компании</a></li>
			<li><a href="novinki.html">Новинки</a></li>
			<li><a href="product.html">Продукция</a></li>
			</ul>
			  <ul class="spisok">
				<li class="spisok"><a href="/" >- АТЛАС</a></li>
				  <li class="spisok"><a href="/" >- ВЕЛЬВЕТ	</a></li>
				  <li class="spisok"><a href="/" >- ВЕЛЮР</a></li>
				  <li class="spisok"><a href="/" >- ГИПЮР</a></li>
				  <li class="spisok"><a href="/" >- ДЖИНС</a></li>
				  <li class="spisok"><a href="/" >- КОЖА искусственная</a></li>
				  <li class="spisok"><a href="/" >- КОСТЮМНЫЕ зима</a></li>
				  <li class="spisok"><a href="/product_kost_leto.html" >- КОСТЮМНЫЕ лето</a></li>
				  <li class="spisok"><a href="/" >- ПАЛЬТОВАЯ</a></li>
				  <li class="spisok"><a href="/" >- ПЛАЩЕВАЯ</a></li>
				  <li class="spisok"><a href="/" >- ТВИД</a></li>
				  <li class="spisok"><a href="/" >- ТРИКОТАЖ зима</a></li>
				  <li class="spisok"><a href="/" >- ТРИКОТАЖ лето</a></li>
				  <li class="spisok"><a href="/" >- ШИФОН</a></li>
			  </ul>
			<ul>
			<li><a href="skidki.html">Скидки</a></li>
			<li><a href="kontact.html">Контакты</a></li>
			<li><a href="karta_proezda.html">Карта проезда</a></li>
		  </ul>
	  </div>
	  <div id="content">

		<h1>Продукция/Костюмные лето </h1>
		<hr />
		<div> 
<table class="table1" cellspacing="0">
<tr>
<td width="150px"><a href="/"><img src="images/tl.gif" /></a></td>
<td><b>Батист</b>
  <p>
<a href="/"><br /><b>Ткань предназначена для курток, брюк.<br />
Большая цветовая гамма.</b>
</a></p></td>
</tr>
<tr>
<td colspan="2" class="td2" height="20px"><a href="/">Подробнее</a></td>
</tr>
</table>
<table class="table2" cellspacing="0">
<tr>
<td width="150px"><a href="/"><img src="images/tl.gif" /></a></td>
<td><strong>Вискоза Индонезия</strong> <br />
Ширина: 1.5 м<br />
<a href="/"><b>Ткань предназначена для курток, брюк.<br />
Большая цветовая гамма.</b></a></td>
</tr>
<tr>
<td colspan="2" class="td2" height="20px"><a href="/">Подробнее</a></td>
</tr>
</table>
<table class="table2" cellspacing="0">
<tr>
<td width="150px"><a href="/"><img src="images/tl.gif" /></a></td>
<td>Артикул: №7777777<br />
Ширина: 1.5 м<br />
<a href="/"><b>Ткань предназначена для курток, брюк.<br />
Большая цветовая гамма.</b>
</a></td>
</tr>
<tr>
<td colspan="2" class="td2" height="20px"><a href="/">Подробнее</a></td>
</tr>
</table>
<table class="table2" cellspacing="0">
<tr>
<td width="150px"><a href="/"><img src="images/tl.gif" /></a></td>
<td>Артикул: №7777777<br />
Ширина: 1.5 м<br />
<a href="/"><b>Ткань предназначена для курток, брюк.<br />
Большая цветовая гамма.</b>
</a></td>
</tr>
<tr>
<td colspan="2" class="td2" height="20px"><a href="/">Подробнее</a></td>
</tr>
</table>
</div><!--table-->  
	  <div id="rs"></div>
	  </div><!--content-->
		</div>
	<!--container-->
	 </div>

<div id="footer">
<!--LiveInternet counter--><script type="text/javascript"><!--
				document.write("<a href='http://www.liveinternet.ru/click' "+
				"target=_blank><img src='//counter.yadro.ru/hit?t52.6;r"+
				escape(document.referrer)+((typeof(screen)=="undefined")?"":
				";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
				screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
				";"+Math.random()+
				"' alt='' title='LiveInternet: показано число просмотров и"+
				" посетителей за 24 часа' "+
				"border='0' width='88' height='31'><\/a>")
				//--></script><!--/LiveInternet-->
</div>
</body>
</html>

css

* {
	padding:0;
	margin:0;
	}

img {
	border: none;
}

html { height: 100%;}
body {
	  height: 100%;
	font: 9pt/18pt Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}


#header {
	background: #FFFFFF url(../images/header.gif) no-repeat;
	height: 163px;
	width: 1000px;
	margin: 0px;
	padding: 0px;
}
#logo {
	background: #FFFFFF url(../images/newlogo.jpg) no-repeat;
	position: absolute;
	width: 302px;
	height: 274px;
	top: 163px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}
#content {
	background: #FFFFFF url(../images/index_051.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 475px;
	top: 163px;
	left: 302px;
	right: 193px;
	padding: 150px 15px 0px;
	margin: 0px;
	text-align: justify;
	}



h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: x-large;
	font-weight: bold;
	color: #FF0000;
	line-height: normal;
}

#menu .spisok {
	background: url(none);
	margin: 0px;
	padding: 3px 0px 0px;
}
#menu .spisok:hover {
	background: url(none);
	margin: 0px;
	padding: 3px 0px 0px;
}






hr {
	color: #555; /*для IE */
	background-color:#555; /*для Firefox, Opera, Safari*/
	border:0px none;
	height:1px; /* высота 1px IE, Firefox, Opera, Safari */
	clear:both; /* для очистки, если тег идет после float елемента */
	margin: 0px 0px 20px;
	padding-bottom: 0px;
}

#rs {
	background: #FFFFFF url(../images/sr.gif) no-repeat;
	position: absolute;
	height: 637px;
	width: 193px;
	top: 0px;
	float: left;
	left: 505px;
}


#menu {
	background: #FFFFFF;
	position: absolute;
	width: 302px;
	top: 431px;
	left: 0px;
	margin: 0px;
	height: 749px;
	padding-top: 15px;
}
#menu a {
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #333333;
	font-weight: bold;
	margin: 5px;
	padding: 0px 0px 0px 80px;
}


#menu ul {
	list-style: none;
	background: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#main {
	position: relative;
	min-height: 100%;
}

#menu li {
	background: url(../images/menu3.png) no-repeat center center;
	margin: 0px;
	padding: 5px 0px 12px;
}

#menu li:hover {
	background: url(../images/menu_hover2.png) no-repeat center center;
	margin: 0px;
	padding: 5px 0px 12px;
}
#menu .spisok a {
	font: normal 12px/normal "Times New Roman", Times, serif;
	margin: 0px;
	padding: 0px 0px 0px 80px;
}
#menu .spisok a:hover {
	color: #FF0000;
	text-decoration: underline;
}

#footer {
	height: 50px;
	position: absolute;
	left:0;
	bottom:0;
	width: 1000px;
	background-color: #999999;
	clear: both;
	top: 1850px;
	}

* html .footer {
bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* хак для ие6, у которого есть косяк со смещением на 1px */
}

/*——————tabl product—————-*/
table {
	width:225px;
	height:150px;
	border:solid 2px #FC0;
	margin-right:8px;
	margin-bottom:5px;
	float: left;
	border-collapse:collapse;
	padding: 0px;
	margin-top: 0px;
}

table a {
	text-decoration: none;
}

table a:hover {
	text-decoration: underline;
	color: red;
}

td, th {
	padding: 3px;
	color:red;
	border:none;
}
thead {
background: url(images/fon_th.jpg) repeat-x;
}
th {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;

}
th a {
	color: #333333;
}
th a:hover {
	color: #333333;
}
td { 
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	vertical-align:top;
}
td a {
	color:#333333;
}
td a:hover {
	color:#333333;
	}
.td1 {

	background-image: url(images/strelka.gif);
	background-repeat:no-repeat;
	background-position:right;
	padding-left:129px;
	padding-bottom:5px;
}

/*———-tabl product other————*/

.table1 {
	width: 100%;
	height: 150px;
	border: none;
	border-collapse:collapse;
	border-bottom: solid 2px #FC0;
	border-top: solid 2px #FC0;
	margin:0px;
}

.table2 {
	width: 100%;
	height: 150px;
	border: none;
	border-collapse:collapse;
	border-bottom: solid 2px #FC0;
	margin:0px;
}

.td2 {

	background-image: url(images/strelka.gif);
	background-repeat:no-repeat;
	background-position:right;
	padding-bottom:5px;

}

.td2 a {
	margin-left:385px;
	}
.td2 a:hover {
	color: #333333;
	}

psywalker · May 17, 2010

Тема уже избитая, 1000 раз поднималась на форуме. Пользуйся поиском.

mazhar · May 17, 2010

Тема уже избитая, 1000 раз поднималась на форуме. Пользуйся поиском.

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

psywalker · May 17, 2010

Не вопрос, разбирайся http://psywalker.ru/Forum/shadow/Untitled-1.html

mazhar · May 17, 2010

Не вопрос, разбирайся http://psywalker.ru/Forum/shadow/Untitled-1.html

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

Searcher · May 17, 2010

Этот код не вставлять надо, а взять за основу и уже в этой структуре строить свой сайт.

mazhar · May 17, 2010

Этот код не вставлять надо, а взять за основу и уже в этой структуре строить свой сайт.

Да ты что? Так трудно, если есть возможность, написать что куда впихнуть? Я и так этих примеров с прижатием футера пересмотрел куча, но к своему сайту прилепить НЕ МОГУ !!!!

Поэтому надеялся, что здесь разъяснят, а не ссылками...

May 17, 2010

Да ты что? Так трудно, если есть возможность, написать что куда впихнуть? Я и так этих примеров с прижатием футера пересмотрел куча, но к своему сайту прилепить НЕ МОГУ !!!!
Поэтому надеялся, что здесь разъяснят, а не ссылками...

Что тут непонятного?

Контейнеру по середине задаешь

min-height:100%

. Футеру задаешь ширину, к примеру

height:50px

и отрицательный отступ равный ширине футера:

margin-top:-50px;
margin-bottom:0px;

.

Можно это все провернуть и методом волкера.

position: absolute;
bottom: 0; 
left: 0;
height: 50px;

Кстате у него и у меня текс будет наезжать на футер. Чтобы это исправить создаешь пустой див на футером, и задаешь ему ширину

height:50px

mazhar · May 18, 2010

Что тут непонятного?
Контейнеру по середине задаешь
min-height:100%
. Футеру задаешь ширину, к примеру
height:50px
и отрицательный отступ равный ширине футера:
margin-top:-50px;
margin-bottom:0px;
.
Можно это все провернуть и методом волкера.
position: absolute;
bottom: 0; 
left: 0;
height: 50px;
Кстате у него и у меня текс будет наезжать на футер. Чтобы это исправить создаешь пустой див на футером, и задаешь ему ширину
height:50px

Да так вроде все понятно, спасибо. Но после вода этого кода, футер появляется под хедером!? Как и в мнгогих других вариантах предлагаемых на просторах инета. Может это из-за того что мои блоки позиционированны absolute?

И есче хотел спросить, у меня сайт шириной 1000 пкс и вроде бы не должно быть ни каких отступов от окна браузера, но увы, появился отступ с права примерно в пикселей 5 во всех браузерах!? Подскажите что может быть?

В моей верстке даже когда я создаю пустой див сразу над футером, он почему то становится под хедер!?

Помогите, плиз, разобраться!!!

Edited May 18, 2010 by mazhar

fali · June 3, 2010

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

Но есть вопрос по коду из ссылки выше.

	<!--[if IE 6]>
		  <style type="text/css">
			div.wrap {height: 100%;}
		</style>
	<![endif]-->

Вот этот код вписан в страницу вне общей таблицы стилей. А можно ли этот параметр записать внутри *.css файла? Если можно - как это правильно сделать? При простом добавлении "height: 100%;" в параметры контейнера wrap - футер начинает наезжать на текст.

зы: На всякий случай - http://stroyblok.com/index.html - страница, для которой настраиваю футер (для контроля результата - Главная и Контакты).

Edited June 3, 2010 by fali

psywalker · June 3, 2010

Это стили спец. для ИЕ6. В ЦСС вписать можно, например так * html div.wrap {height: 100%;} - Таким образом это правило будет видеть только ИЕ6

klierik · June 3, 2010

см. в аттаче

index.rar

fali · June 3, 2010

2psywalker:

То-есть, в моём случае нужно записать так?

.container {
	background: url(img/bgcontainer.gif) repeat-y;
	margin: 0 auto;
	width: 780px;
	min-height: 100%;		/* тест */
	position: relative;		/* тест */
}
* html div.container {height: 100%;}	/* тест */

"html div" обязательны? В остальной части моей таблицы стилей селекторы начинаются с точки... Как лучше сделать?

И как бы проверить, правильно ли отображается страница в ИЕ6? ^^ Я сегодня уже проверяла страницу с помощью http://browsershots.org/, и больше сейчас не получается.

2klierik:

Странно... При просмотре локально - подвал отображается верно. А после загрузки на хост - пропадает совсем. о.О http://stroyblok.com/test/

klierik · June 3, 2010

.footer {
background:url("img/bgfooter.gif") repeat-x scroll 0 0 #958463;
color:#FFEEDD;
font-size:1.1em;
height:40px;
line-height:40px;
margin:0 auto;
position:relative;
text-align:center;
width:760px;
}

psywalker · June 3, 2010

Тс, дело в том, что * html нужно писать обязательно для ИЕ6, а далее уже что хочешь, т.е. свой селектор и свойства любые к ниму, можешь обращаться через точку, как хочешь.

fali · June 3, 2010

klierik, psywalker, спасибо большое обоим!

Теперь надо проверить оба варианта в разных браузерах... И решить, какой из кодов лучше использовать в моём случае. ^^

psywalker · June 3, 2010

klierik, psywalker, спасибо большое обоим!
Теперь надо проверить оба варианта в разных браузерах... И решить, какой из кодов лучше использовать в моём случае. ^^

Давай, удачи тебе

magls · June 15, 2010

Для body в CSS пропиши

margine: 0 auto;

Sign In

Прижать футер

Question

Link to comment

Share on other sites

17 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

Join the conversation

Обсуждения

Important Information