Jump to content

Footer makes space after button


milka1
 Share

Recommended Posts

I've got this little problem which i don't really understand.So the problem is on the footer i want to have 5 buttons, but they r droping Here's the page in the web: http://milka.net76.net/Here's the html:

<body>	<div class="wrap">				<div id="header">					<div class="soc_btns">				<a href="#" class="email" alt="contact me via e-mail">e-mail me</a>				<a href="https://www.facebook.com/milka1" class="fcb" alt="find me on facebook">facebook</a>				<a href="#" class="skype" alt="contact me via Skype">Skype me</a>			</div>								<div class="head_btns">				<a href="#" class="btn1">Services</a>				<a href="#" class="btn2">About Me</a>				<a href="#" class="btn3">Portfolio</a>				<a href="#" class="btn4">Contact</a>							</div>					</div> <!--END of header-->						<div id="content">			<div>						</div>		</div>				</div> <!--END of wrap-->		<div id="footer">			<div class="wrap">				<div class="contact">					<a class="email">my email:    giveup13@gmail.com</a>						</br>					<a class="phone">my phone:    00370 621 26655</a>					<a href="#" class="touch">get in touch</a>					<a href="#" class="lt">lt</a>					<a href="#" class="uk">uk</a>					<a href="#" class="ru">ru</a>					<a href="#" class="pt">pt</a>					<a class="copyright">Copyright © 2011 milka freelance design. All rights reserved.</a>					</div>			</div>		</div></body>

Here's the CSS

html, body {	height: 100%;	font-family: Verdana, sens-serif;	font-size: 12px;	background-image: url(images/header_bg.png), url(images/content_bg.png), url(images/footer_bg.png);	background-position: top center, top center, bottom center;	background-repeat: repeat-x, repeat-y, repeat-x;	color: #ffffff;	}.wrap {width: 880px; margin: 0 auto; min-height: 100%;}#header{ width:100%; height:249px; position:relative; background:url('images/header.jpg') 0 0 no-repeat;}	.head_btns{ width:100%; overflow:hidden;}	.head_btns a{page-break-after:always; float:left; display:inline; height:60px; margin-top:188px; overflow:hidden; text-align: center; line-height:62px; font-weight:bold;}	.head_btns a.btn1{ width:150px; margin-left:135px;}	.head_btns a.btn2{ width:150px; margin-left:1px;}	.head_btns a.btn3{ width:150px; margin-left:1px;}	.head_btns a.btn4{ width:150px; margin-left:1px;}	.head_btns a:hover, a:active {color: #5b6ec6;}		.soc_btns a{position: absolute; text-indent: -9999px; float:left; display:inline; overflow:hidden; text-align: center;}	.soc_btns a.email{width:73px; margin-left: 568px; margin-top:60px; height:63px;}	.soc_btns a.fcb{width:50px; margin-left: 643px; margin-top:38px;height:50px;}	.soc_btns a.skype{width:46px; margin-left: 643px; margin-top: 88px; height: 40px;}	#content{ width:880px; margin:0 auto; background: url(images/shadow.png) 0 0 no-repeat; overflow:auto; padding-bottom:93px;}#footer{position:relative; margin-top:-93px; width:100%; height:93px; background:url('images/footer.png') bottom no-repeat;}	.contact {overflow: hidden; width: 880px; margin: 0 auto;}	.contact a{page-break-after:auto; float:left; height:57px; margin-top:14px; overflow:hidden; text-align: center; font-family: Georgia, sens-serif;}	.contact a.email {margin-left: 100px; font-size: 12px; color: white; font-weight: bold;}	.contact a.phone {margin-left: -218px;font-size: 12px; color: white; font-weight: bold; line-height:20px;}	.contact a.copyright {margin-top: 14px;margin-left:-80px; font-family: Verdana, sens-serif;}	.contact a.touch{width:74px; margin-left: 138px; margin-top:-3px; height:44px; text-indent:-9999px;}	.contact a.lt{width:68px; margin-left: 12px; height:58px; margin-top:-10px; text-indent:-9999px;}	.contact a.uk{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}	.contact a.ru{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}	.contact a.pt{width:60px; margin-left: 2px; height:58px; margin-top:-10px; text-indent:-9999px;}

Link to comment
Share on other sites

Hi, The problem is caused by the last link, the one with the class "copyright" It's not actually the CSS for that class but the inherited CSS from ".contact a" where there is a height of 57px set. This is causing all the links within ".contact" to inherit this height. Solution:set a specific height for "copyright" e.g. height: auto;

.contact a.copyright {height: auto; margin-top: 14px;margin-left:-80px; font-family: Verdana, sens-serif;}

Link to comment
Share on other sites

On 2nd thought, a better solution when you have a container like your footer that must not overflow, just set overflow to hidden e.g.

#footer{overflow: hidden; position:relative; margin-top:-93px; width:100%; height:93px; background:url('images/footer.png') bottom no-repeat;}

This way you know that it won't be stretched by any elements beyond the 93px height you have set

Edited by ste
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...