PDA

View Full Version : JavaScript and/or CSS solution



Sebah
Jul 14th, 2010, 05:21 PM
Hey!

Sorry for posting in this forum something that might be related to CSS as well.
So I have this page: http://forweb.ro/temp.

What I wanna do with it?
As you may noticed I have an accordion on that page and one peace of footer. The point of it is simple: I want always the footer to be situated at the bottom of the page, even if the content is expanding ( as it is now caused by that accordion ). The thing is that it looks good on my screen resolution ( 1280x1024 ), but on smaller screens the '#footer' sits above the '#content' div.
I'm aware that absolute positioning is keeping the div above everything and the CSS solution of this would be position relative and integrate the #footer into the #content div. But using 'position:relative' I can't use properly the 'bottom:0' property, which is very important in this case.
I had sorted out something interesting here - a jQuery solution ( but the problem using this is that it's not cross-browser and it's not updating depending of the height of the accordion elements ).
My idea is ( note - this is not included in the HTML example below ):

<script type="text/javascript">
$(document).ready(function() {
var x = $('#wrap').height();
var y = $('#content').height();
var z = $('#footer').height();
var a = x-(y+z);
$('#footer').css('margin-top',+ a +'px');
});
</script>
Here's my HTML:

* { margin: 0; padding: 0; border: 0;}
html { width: 100%; height: 100%;}
body { height: 100%; font: normal normal normal 12px/14px "arial"; }
#wrap { position: relative; height: 100%; display: block;}
#content { position: absolute; top: 50px; left: 0;}
ul#accordion { width: 60%; margin: 0px auto;}
#footer { width: 80%; margin: 0px auto; position: absolute; bottom: 0; left: 0; right: 0; background: black; color: white;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion({autoHeight: false});
});
</script>
</head>

<body>
<div id="wrap">
<div id="content">
<ul id="accordion">
<li>
<h3><a href="#">lorem 1</a></h3>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</li>
<li>
<h3><a href="#">lorem 2</a></h3>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</li>
<li>
<h3><a href="#">lorem 3</a></h3>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</li>
</ul>
</div>
<div id="footer">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>
</html>
What's the solution to this? I'm sure somebody else encountered this problem before... Any kind of solution is welcomed as long as it works!
Please let me know if I wasn't clear enough with my problem.

Thanks!

skywalker2208
Jul 14th, 2010, 05:38 PM
If you are saying you want the footer to be at the bottom of the browser at all times then take a look at this http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Sebah
Jul 14th, 2010, 06:21 PM
If you are saying you want the footer to be at the bottom of the browser at all times then take a look at this http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Thanks for that skywalker2208. But there's a problem with the sticky footer: if the screen resolution is 1024x768 and I activated the last element of the accordion, the footer will sit above the content, which is not what I want to...

skywalker2208
Jul 14th, 2010, 07:25 PM
Thanks for that skywalker2208. But there's a problem with the sticky footer: if the screen resolution is 1024x768 and I activated the last element of the accordion, the footer will sit above the content, which is not what I want to...

With the example I gave you it make sure the footer stays at the bottom of the page whether or not you have enough content to fill the page or not.