PDA

View Full Version : My footer doesn't follow on slidedown.



anvo
25 Mar 2011, 07:41 AM
Hey, I have a problem on my home page. I have 4 jQuery.slideToggle boxes and when i click they go down as they should, but my footer which is at the bottom doesnt follow which means the boxes are flowing over it, which is annoying to look at!

Example: http://anvo.dk

Sourcecode:


<!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>
<link rel="stylesheet" type="text/css" href="files/style.css"/>
<script type="text/javascript" src="files/jquery.js"></script>
<script type="text/javascript" src="files/slider.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andreas Voss | Webdeveloper, Webdesigner</title>
</head>
<body>
<div class="center" id="header">
<div class="navigation">
<a href="index.php">home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="portfolio.php">portfolio</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="about.php">about</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="blog.php">blog</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="contact.php">contact</a>
</div>
</div>
<div class="center" id="bottom">
<div id="content">
<img src="images/designweb.jpg" width="383" height="35" class="designweb" alt="Design Websites" />
<p class="designwebcontent">
My vision is to design beautiful websites with very 'user friendly' interfaces. Even if your requirements are of a high standard and the systems are advanced I can make it look simple and straight forward to your visitors doesn't have to browse your website for several hours to figure out how they get where they want!
</p>
<div class="spacer2"></div>
<img src="images/designapps.jpg" width="383" height="35" class="designapp" alt="Design Web Apps" />
<p class="designappcontent">
If you have are busy and on the move all the time I can design a web application so you can update your website from your iPhone, iPad or any other handheld device. These applications have a very simple interface protected by a username and password of your choosing, so no one else than you will be able to change your websites contents.
</p>
<div class="spacer2"></div>
<img src="images/code.jpg" width="383" height="35" class="code" alt="Code Websites and -Apps" />
<p class="codecontent">
When I design and code a website I make sure that it lives up to HTML and CSS validation for most browser compatibility. For dynamic websites I use the following languages: HTML, CSS, PHP, mySQL and Javascript, with these languages I'm able to make a dynamic website with a lot of cool features.
</p>
<div class="spacer2"></div>
<img src="images/sell.jpg" width="383" height="35" class="sell" alt="Sell You a Website" />
<p class="sellcontent">
Coming soon!
</p>
</div>
<div class="" id="twitter">
<a href="http://twitter.com/andreasvoss" target="_blank" class="twittername">@andreasvoss</a><br/><span class="twittertext">The website have now been updated, and should be viewable in all browsers!</span><br/><a href="http://twitter.com/#!/82129034/status/51042406564495361" target="_blank" class="twitterlink">on twitter | 14 hours ago</a><br/><br/><a href="http://twitter.com/andreasvoss" target="_blank" class="twittername">@andreasvoss</a><br/><span class="twittertext">Tonight I'm uploading the optimized website, it should work in all browsers but if you find an error please contact me so i can correct it!</span><br/><a href="http://twitter.com/#!/82129034/status/50927297619968000" target="_blank" class="twitterlink">on twitter | yesterday</a><br/><br/><a href="http://twitter.com/andreasvoss" target="_blank" class="twittername">@andreasvoss</a><br/><span class="twittertext">Right now I'm optimizing my code to make your experience here even better! Remember to give me feedback, your thoughts are important!</span><br/><a href="http://twitter.com/#!/82129034/status/50549378657697793" target="_blank" class="twitterlink">on twitter | 2 days ago</a><br/><br/><a href="http://twitter.com/andreasvoss" target="_blank" class="twittername">@andreasvoss</a><br/><span class="twittertext">At the latest I will delete the lorem ipsum pictures from the portfolio Monday and upload another testpage instead, it will be beautiful!</span><br/><a href="http://twitter.com/#!/82129034/status/50320257134510080" target="_blank" class="twitterlink">on twitter | 2 days ago</a><br/><br/>
</div>
</div>
<div id="copy_footer">Copyright © 2011 | e-mail: andreas@anvo.dk</div>
</body>
</html>

Adam.Baldry
25 Mar 2011, 08:28 AM
Bit of a problem because if you move you footer div into the <div class="center" id="bottom"> div then it appears in the middle of the page over the top of the twitter feed. The two options that I can think of that are quick and easy would be to either make it so that open boxes close when another one opens. Or you could try using a table. Not best practice to use them for positioning but would be a quick resolution.