Footer переопределяет содержание моего сайта

Как гласит название, нижний колонтитул переопределяет содержание веб-сайта, и он не будет идти в нижней части страницы. Есть идеи? Вот скриншот: http://prntscr.com/4zoamr и вот мой CSS код:Footer переопределяет содержание моего сайта

/* MAIN STYLES */ 

body{ 
background: url("bg.jpg") fixed no-repeat center; 
margin: 0; 
padding: 0; 
color: #FFF; 
} 

a{ 
text-decoration: none; 
color: #FFF; 
} 

a:active{ 
text-decoration: none; 
color: #FFF; 
} 

a:hover{ 
text-decoration: none; 
color: #FFF; 
} 

a:visited{ 
text-decoration: none; 
color: #FFF; 
} 

/* HEADER */ 

#header{ 
background: #111; 
width: 100%; 
height: 190px; 
border-bottom: 10px solid #891614; 
} 

#header #logo{ 
font-family: Century Gothic; 
font-size: 30px; 
padding-top: 1px; 
padding-left: 50px; 
} 

#header #menu{ 
font-family: Century Gothic; 
text-transform: lowercase; 
font-size: 17px; 
padding-left: 10px; 
padding-top: 10px; 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
} 

#header #menu a{ 
padding-left: 5px; 
padding-right: 15px; 
} 

#header #menu a:hover{ 
color: #b0b0b0; 
} 

/* END HEADER */ 

/* CONTENT */ 

#content{ 
width: 1100px; 
padding: 30px; 
margin: 0 auto; 
} 

/* ARTICLE */ 

#content #article{ 
float: left; 
width: 700px; 
} 

#content #article h1{ 
background: #891614; 
border: 1px solid #111; 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
padding-top: 15px; 
padding-bottom: 10px; 
padding-left: 10px; 
border: 1px solid #000; 
height: 25px; 
font-family: Century Gothic; 
font-size: 23px; 
font-weight: 100; 
} 

#content #article p{ 
background: rgba(0, 0, 0, 0.7); 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
border: 1px solid #000; 
padding-top: 15px; 
padding-bottom: 10px; 
padding-left: 10px; 
border: 1px solid #000; 
height: 25px; 
font-family: Century Gothic; 
font-size: 17px; 
} 

/* END ARTICLE */ 

/* SIDEBAR */ 

#content #sidebar{ 
float: right; 
width: 350px; 
} 

#content #sidebar h1{ 
background: #891614; 
border: 1px solid #111; 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
padding-top: 15px; 
padding-bottom: 10px; 
padding-left: 10px; 
border: 1px solid #000; 
height: 25px; 
font-family: Century Gothic; 
font-size: 23px; 
font-weight: 100; 
} 

#content #sidebar p{ 
background: rgba(0, 0, 0, 0.7); 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
border: 1px solid #000; 
padding-top: 15px; 
padding-bottom: 10px; 
padding-left: 10px; 
border: 1px solid #000; 
height: 25px; 
font-family: Century Gothic; 
font-size: 17px; 
} 

/* END SIDEBAR */ 

#content #footer{ 
width: 1088px; 
position: absolute; 
background: #891614; 
border: 1px solid #111; 
line-height: 18px; 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961); 
padding-top: 15px; 
padding-bottom: 10px; 
padding-left: 10px; 
border: 1px solid #000; 
height: 25px; 
font-family: Century Gothic; 
font-size: 17px; 
} 

#content #footer #copyright{ 
float: left; 
} 

#content #footer #links{ 
float: right; 
padding-bottom: 10px; 
padding-right: 10px; 
} 


/* END CONTENT */

Итак, как я могу получить колонтитула в нижней части страницы? Я попытался использовать свойство «bottom», но он по-прежнему переопределяет контент, я также попробовал «margin-top», но он не работал так, как я хотел.

EDIT: HTML код здесь:

<html> 
<head> 
<title>Pwned Gaming - Website</title> 

<link href="styles.css" type="text/css" rel="stylesheet" /> 

</head> 
<body> 

<!-- HEADER --> 

<div id="header"> 

<!-- LOGO --> 

<div id="logo"> 

<h1>pwned-gaming.com</h1> 

</div> 

<!-- END LOGO --> 

<!-- MENU --> 

<div id="menu"> 

<a href="index.html">Home</a> 
<a href="#">Forum</a> 
<a href="news.html">News</a> 
<a href="team.html">Squad</a> 
<a href="pwned_tv.html">Pwned TV</a> 
<a href="media.html">Media</a> 
<a href="contact.php">Contact</a> 

</div> 

<!-- END MENU --> 

</div> 

<!-- END HEADER --> 



<!-- CONTENT --> 

<div id="content"> 

<!-- ARTICLE --> 

<div id="article"> 

<h1>Welcome on pwned-gaming.com</h1> 

<p> &bull; Welcome on our brand new website.</p> 

<h1>Welcome on pwned-gaming.com</h1> 

<p> &bull; Welcome on our brand new website.</p> 

<h1>Welcome on pwned-gaming.com</h1> 

<p> &bull; Welcome on our brand new website.</p> 

</div> 

<!-- END ARTICLE --> 

<!-- SIDEBAR --> 

<div id="sidebar"> 

<h1>Welcome, user.</h1> 

<p> &bull; Welcome on our brand new website.</p> 

</div> 

<!-- END SIDEBAR --> 

<!-- FOOTER --> 

<div id="footer"> 

<div id="copyright"> 

&copy; Pwned Gaming - 2011 - 2014. 

</div> 

<div id="links"> 

<a href="http://facebook.com"><img src="fb.png" /></a> 
<a href="http://twitter.com"><img src="tw.png" /></a> 
<a href="http://youtube.com"><img src="yt.png" /></a> 

</div> 

</div> 

<!-- END FOOTER --> 

</div> 

<!-- END CONTENT --> 

</body> 
</html>

источник

2014-10-25 wallensteiN

после вашего основного marup пожалуйста! –

Хотите что-то вроде этого? http://jsfiddle.net/ianhazzard/5e4qzptu/embedded/result/ –

вы пытались клиринговыми обе стороны сноски?

добавить это колонтитул стиль

clear:both;

и удалить абсолютное свойство положения и нижние и т.д. также из футере

источник

2014-10-25 19:20:37

ничего не происходит – wallensteiN

вы можете разместить свой html? –

сделано. отредактировал мой пост – wallensteiN

Footer переопределяет содержание моего сайта

ответ

Смежные вопросы