Footer не хочет прилегать к низу....

Sotnikov · February 14, 2008

День добрый.

Возникла проблема при верстке. У подвала выставил все необходимые параметры, для того, чтобы он позиционировал всегда снизу, даже если контента нет

#footer {

position: relative;

clear: both;

height: 100px;

background: url('../images/footer.jpg') repeat-x scroll;

}

и в body прописывал, вс?, что нужно... что только не делал... но он не прислоняется книзу...

NEED HELP ASSAP

Vlad · February 14, 2008

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

Sotnikov · February 14, 2008

страница

<!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>
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="idea, design" content="">
<meta http-equiv="content-type" content="text/html; charset=charset=windows-1251">
<link href="css/style.css" type=text/css rel=stylesheet>
<link href="css/pop-up.css" type=text/css rel=stylesheet>
</head>

<body>

<div id="main">
<div id="top_inner">
<div id="header_inner">

<a href="/">
<img src="images/logo.jpg" id="logo" border="0">
</a>

	<table width="69%" height="142px" align="center" >
	<tr class="top-menu">
	<td width="11%" align="center">
	<a href="">О компании</a>
	</td>


	<td align="center">
	<img src="images/top-menu-block2.gif" border="0">
	</td>

	<td width="11%" align="center">
	<a href="">Издания</a>
	</td>

	<td align="center">
	<img src="images/top-menu-block2.gif" border="0">

	</td>

	<td width="11%" align="center">
	<a href="">Интернет</a>
	</td>

	<td align="center">
	<img src="images/top-menu-block2.gif" border="0">
	</td>

	<td width="11%" align="center">

	<a href="">Услуги</a>
	</td>

	<td align="center">
	<img src="images/top-menu-block2.gif" border="0">
	</td>

	<td width="11%" align="center">
	<a href="">Контакты</a>
	</td>


	</tr>
	</table>


</div>
</div>

</div>   


<div id="content">


<div id="put">
<div id="put1"></div>
<div id="put2"></div>
<div id="put3"><a href="index.html" class="link">Главная страница</a> / <a href="about_company.html" class="link">О компании</a> / Наши партнеры</div>

<div id="put4"><input name="text" class="inp" alt="Найти"> <input class="inp" type=submit value="Найти"></div>

</div>



<div id="lm">

<div id="lm1">
  <h3><a href="">История</a></h3>
  <h3><a href="">События</a></h3>

  <h3><a href="">Вакансии</a></h3>
  <h3><a href="">Офисы</a></h3>
  <h3><a href="">Региональные редакции</a></h3>
  <h3><a href="">Наши партнеры</a></h3>
  <h3><a href="">Контакты</a></h3>
</div>

<div id="lm2"></div>

<div id="lm3">
<h1>Контакты</h1>





</div>

</div>


</div>
<!--content end-->


	<div id="footer">
		<div id="copyright">


			 </p>
		</div>			
	</div>


</BODY>
</html>

CSS

body  {
background: White url('../images/top-bg.jpg') repeat-x scroll left top;
font-size: 12px;
font-family: Arial;
border: 0pt none; 
margin: 0pt auto; 
padding: 0pt; 
text-align: left;
}


#main { margin: 0pt auto; 
background: transparent none repeat; 
width: 100%;
height: 149px;
text-align: left; }

#header_inner {
padding: 0 0pt 0 0;
margin: 0 auto;
width: 100%;
text-align: left;	
}

#logo {
float: left;
margin: 0px 0 0 31px
}

.top-menu { color: WHITE;
			  font-size: 12px;
			  text-decoration: none;
			  font-family: Arial;
			   font-weight: bold; }

.top-menu a{ color: WHITE;
			  font-size: 12px;
			  text-decoration: underline;
			  font-family: Arial;
			   font-weight: bold; }

.top-menu a:hover{ color: white;
			  font-size: 12px;
			  text-decoration: none;
			  font-family: Arial;
			   font-weight: bold;}			  


#pop-up-block { margin: 0 auto; 
height: 31px;
width: 100%;
background: White; 
}

span {
text-align: left;
}

#pop1 {
	height: 31px;
	width: 15%;
	float: left;
	margin: 0 auto;
	background: White; 

}

#pop2 {
	height: 31px;
	width: 55%;
	margin: 0 auto;
	float: left;
	padding-top: 7px;
	text-align: center;
	background: White;
	background: url('../images/search-bg.jpg') repeat-x scroll;
}

#pop3 {
	height: 31px;
	width: 29%;
	margin: 0 auto;
	float: left;
	padding-top: 5px;
	padding-right: 5px;
	text-align: right;
	background: White;
}


h1 {
 font-size: 18px;
 margin: 0px auto;
font-family: Arial;
font-weight: bold;
}

.search-menu-first {
color: #003fa7;
font-size: 11px;
text-decoration: none;
border-bottom: 1px dashed;
margin-right: 20px;
font-family: Arial;
font-weight: normal;

} 

.search-menu-last {
color: #003fa7;
font-size: 11px;
text-decoration: none;
border-bottom: 1px dashed;
margin-right: 0px;
font-family: Arial;
font-weight: normal;

} 

select, textarea, .inp {border: 1px solid #B6B6B6; background-color: #F8F8F8; color: #4F4F4F;
font: 13px Arial, Verdana, sans-serif;}
select:focus, textarea:focus, .inp:focus {background: white;}
.inp.yes {border-color: #363; background-color: #CFC; color: #363;}
.inp.no {border-color: #633; background-color: #FCC; color: #633;}
option {background-color: #FDF9ED;}

#content { min-height: 100%; width: 95%; margin: 0 auto; padding-top: 30px; border: 0px solid #585858; }

.title {
font-size: 20px; font-family: Arial; color: black;
text-decoration: none;
}

.title a {
font-size: 20px; font-family: Arial; color: #003FA7;
text-decoration: underline;
}

.small-title { 
display: block;
font-size: 12px; font-family: Arial; color: black;
text-decoration: none; padding-bottom: 3px; margin-bottom: 3px;
font-weight: bold;
}

.silver {
color: silver;
}

.cont {
font-size: 13px; font-family: Arial; color: black;
}
.small-link {
font-size: 12px; font-weight: bold; font-family: Arial; color: #003FA7;
text-decoration: underline;
}

#projects { 
padding-top: 0px;
padding-left: 10px;
padding-bottom: 0px;
padding-right: 0px;
clear: both; 
text-align: left; 
}

.news-title {
font-size: 12px; font-weight: bold; font-family: Arial; color: black; padding: 6px;
background: #F4F4F4; display: block; border-left: 3px silver solid;
}

#news-more {
text-align: right;
}

.link {
font-size: 12px; font-weight: normal; font-family: Arial; color: #003FA7;
}
.link-books {
font-size: 11px; font-weight: normal; font-family: Arial; color: #003FA7;
}

#news-block { 
padding-top: 0px;
padding-left: 30px;
padding-bottom: 0px;
padding-right: 0px;
clear: both; 
text-align: left; 
}



.table {
background: #eef2f4;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
}
.table2 {
border-bottom: 1px solid #eef2f4;
padding-bottom: 7px;
padding-top: 7px;
padding-left: 10px;
}

#footer {
position: relative;
clear: both;
height: 100px;
background: url('../images/footer.jpg') repeat-x scroll;
}

#copyright {
padding-left: 30px;
padding-top: 25px;
text-align: left;
}

#copyright p {
font-family: arial;
font-size: 14px;
color: white;

}
 #copyright a  {
font-family: arial;
font-size: 14px;
color: white;
text-decoration: underline;

}


p { border: 0pt none; 
margin: 7pt 0pt 15px; 
padding: 0pt; 
font-family: Arial; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
font-size: 12px; 
font-size-adjust: none; 
font-stretch: normal; 
text-align: left; 
line-height: 16px; 
color: black; }

p a { border: 0pt none; 
margin: 0pt; 
padding: 1px; 
color: #8B4513; 
text-decoration: underline;  
font-size: 12px; }

p a:hover {}


h3, h3 a { 
text-decoration: none;
text-align: right; 
font-size: 12px; 
font-weight: normal; 
font-family: Arial; 
color: #003FA7;
margin: 0pt auto;
padding-bottom: 4px; 
padding-top: 4px;
padding-right: 2px;
display: block;
}

h3 a:hover { border-left: 5px #003FA7 solid; display: block; color: #003FA7; text-decoration: none; background: #eeecec; }


h4, h4 a { 
text-decoration: none;
text-align: right; 
font-size: 12px; 
font-weight: bold; 
font-family: Arial; 
color: black;
margin: 0pt auto;
padding-bottom: 5px; 
padding-top: 15px;
padding-right: 2px;
display: block;
}



.block { border-left: 5px red solid; display: block; color: #003FA7; text-decoration: none; background: #eeecec; }


#texts { 
text-align: right;
padding-right: 0px;
padding-bottom: 10px;
padding-top: 10px;
 }


 #put {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White;
padding-bottom: 10px;
 }
 #put1 {
 height: 31px;
	width: 17%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #put2 {
 height: 31px;
	width: 6%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #put3 {
 text-align: left;
 float: left;
 width: 48%;
 } 

  #put4 {
  margin: 0pt auto;
 text-align: right;
 float: left;
 width: 29%;

 } 



 #put-sec {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White;
padding-bottom: 0px;
border-bottom: 1px #eef2f4 solid;
 }
#put-sec1 {
 text-align: left;
 height: 31px;
	width: 47%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #put-sec2 {
 height: 31px;
	width: 6%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }

  #put-sec3 {
 text-align: right;
 float: right;
 width: 46%;
  height: 31px;
 } 



  #sec-cont {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px #eef2f4 solid;
 }

  #sec-cont-sec {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White;
padding-bottom: 10px;
padding-top: 10px;
 } 

#sec-cont1 {
 text-align: left;
 height: 100%;
	width: 47%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #sec-cont2 {
	width: 6%;
	float: left;
	margin: 0pt auto;
	background: white; 
 }

  #sec-cont3 {
  padding-top: 30px;
 text-align: left;
 float: right;
 width: 47%;
 } 



  #sec-continue {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White;
padding-bottom: 10px;
padding-top: 10px;

 }
#sec-continue1 {
 text-align: left;
 height: 100%;
	width: 47%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #sec-continue2 {
	width: 6%;
	float: left;
	margin: 0pt auto;
	background: white; 
 }

  #sec-continue3 {
 text-align: left;
 float: right;
 width: 47%;
 } 





  #lm {
 float: left;
margin: 0pt auto; 
width: 100%;
background: White; 
 }
 #lm1 {
 text-align: right;
padding-bottom: 30px;
	width: 17%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }
  #lm2 {
 height: 31px;
	width: 6%;
	float: left;
	margin: 0pt auto;
	background: White; 
 }

  #lm3 {
padding-bottom: 30px;
 text-align: left;
 float: left;
 width: 77%;
 } 


/* books1 */

#maincol {
	width:366px;
	float:left;
}

.post {
	margin: 5px 0;
	background: url(../images/box_middle.gif) center top repeat-y;
}

.post h2 {
	background: url(../images/box_top.gif) center top no-repeat;	
	margin: 0;
	padding: 15px 15px 5px 20px;
}

.entry {
	padding: 0 10px;

}

.post h2, 
.post h2 a, 
.post h3 a {
	font: bold 18px "Trebuchet MS",Arial, Helvetica, sans-serif;
}

.entry {
	background: url(../images/box_bottom.gif) center bottom no-repeat;	
	padding-bottom: 15px;
}

/* books2 */

.post2 {
	margin: 5px 0;
	background: url(../images/box_middle2.gif) center top repeat-y;
}
.post2 h2 {
	background: url(../images/box_top2.gif) center top no-repeat;	
	margin: 0;
	padding: 15px 15px 5px 20px;
}
.entry2 {
	padding: 0 10px;	
}
.post2 h2, 
.post2 h2 a, 
.post2 h3 a {
	font: bold 18px "Trebuchet MS",Arial, Helvetica, sans-serif;
}
.entry2 {
	background: url(../images/box_bottom2.gif) center bottom no-repeat;	
	padding-bottom: 15px;
}

/* books3 */

.post3 {
	margin: 5px 0;

}
.post3 h2 {

	margin: 0;
	padding: 15px 15px 5px 20px;
}
.entry3 {
	padding: 0 10px;	
}
.post3 h2, 
.post3 h2 a, 
.post3 h3 a {
	font: bold 18px "Trebuchet MS",Arial, Helvetica, sans-serif;
}
.entry3 {
padding-bottom: 15px;
}

/* right block with news  */
#right-col {
text-align: left;
float: right;
width: 26%;
padding-bottom: 10px;
}

/* left block with information  */
#left-col {
text-align: left;
float: left;
width: 72%;
padding-bottom: 10px;
}

#left-col-in {
text-align:  left;
float: left;
width: 60%;
padding: 2px;
}

#left-col-in2 {
text-align: center;
float: left;
width: 39%;
padding-top: 20px;
}

#left-bottom {
text-align: left;
float: left;
width: 72%;
padding-bottom: 10px;
}

#left-bottom1 {
text-align: left;
float: left;
width: 65%;
}

#left-bottom2 {
text-align: left;
float: left;
width: 30%;
}

.img-right {
float: right;
margin-left: 15px;
border: 1px #c9c9c9 solid;
}
.img-left {
float: left;
margin-right: 15px;
border: 1px #c9c9c9 solid;
}


/* ————————————————————————————————————————————————--  */
ul.punkt {
	margin: 12px 0 14px 0;
	padding-left: 30px;
	list-style: url(../images/pix.gif) outside;
}
ul.punkt li {
	margin: 5px 0 0 0;
}
ul.punkt li a {
	color: #003FA7!important;
}

/* ————————————————————————————————————————————————--  */
ul.map {
	margin: 12px 0 14px 0;
	padding-left: 40px;
	list-style: url(../images/pix-map.gif) outside
}
ul.map li {
	margin: 3px 0 0 0;
	font-weight: bold;
}
ul.map li a {
	color: #003FA7!important;
}

/* ————————————————————————————————————————————————--  */
ul.news {
	margin: 12px 0 14px 0;
	padding-left: 15px;
	list-style: url(../images/pix.gif) outside;
}
ul.news li {
	margin: 5px 0 0 0;
}
ul.news li a {
	color: #003FA7!important;
}

Дядя Саша · February 14, 2008

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

Вот могу только продемонстрировать как это делается:

<!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=charset=utf-8" />
  <style type="text/css">
	* {
	  margin: 0;
	  padding: 0;
	}

	html {
	  height: 100%;
	}

	body {
	  position: relative;
	  height: auto !important;
	  height: 100%;
	  min-height: 100%;
	  background: #e0e0e0;
	}

	#container {
	  position: relative;
	  padding-bottom: 100px;
	}

	#header {
	  position: relative;
	  height: 100px;
	  background: #606060;
	}

	#content {
	  position: relative;
	  padding: 3px;
	}

	#footer {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 100px;
	  background: #606060;
	}
  </style>
</head>

<body>
  <div id="container">
	<div id="header">

	</div>
	<div id="content">

	</div>
  </div>
  <div id="footer">

  </div>
</body>

</html>

Еще добавлю что clear: both не заставит слой расположиться внизу страницы, он только отменяет обтекание элемента слева и справа.

WingedFox · February 14, 2008

Посмотрите шаблон http://debugger.ru/demo/other/pagetemplate/

Sign In

Footer не хочет прилегать к низу....

Question

Sotnikov

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Sotnikov

Link to comment

Share on other sites

Дядя Саша

Link to comment

Share on other sites

WingedFox

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information