milka1 Posted August 17, 2011 Share Posted August 17, 2011 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 More sharing options...
ste Posted August 18, 2011 Share Posted August 18, 2011 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 More sharing options...
ste Posted August 18, 2011 Share Posted August 18, 2011 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.