...

View Full Version : Always visible footer?



shki
07-24-2011, 02:18 AM
Hello everyone.

I'm trying to make a footer that would be always visible at the bottom of the page, with the content scrolling behind it.
The problem is that inside the footer I want to have logo floated to the left, and navigation floated to the right that wouldn't overlap when the window is resized.

With 'position: fixed' I lose the navigation when I resize the window, and min-width doesn't work for some reason.

'position: absolute' doesn't work either, the footer floats somewhere around the middle of the page when resized.

I don't even remember how many variations I've tried with max and min height and width, negative margins, padding etc.

The only solutions I found online were for the footer sticking to the bottom of the page, and not the window, and those using 'position: fixed'.

If anyone has any idea how to resolve this, it would be much appreciated.

tokyodesignpop
07-24-2011, 06:37 AM
The only way you can achieve a floating footer that works in most browsers is to use js....

I found something here http://www.dynamicdrive.com/dynamicindex17/stayontop.htm
might help you...
I used it to create the footer on my page tokyodesignpop.com

I still need to tweak it a bit, but it should be ok for what you need...

To keep the content on the inside from over lapping just create 2 divs one using float:left and the other using float:right. Not sure if it is the best way but it seems to work for me!

good luck:thumbsup:

Sammy12
07-24-2011, 08:04 AM
another solution is using iframes, however
position: fixed; with a z-index is definetly the best method

post your current script so that the problem can be detected. there should be no reason this doesn't work. if possible, upload to a server

shki
07-24-2011, 02:26 PM
Thanks for taking the time to reply.

tokyodesignpop, I've tried it, and it still jumbles up when I resize it, even when I float the divs left and right and put in a min-width.

sammy12, when I set the position to fixed, it doesn't scroll, and navigation dissapears, and when I set it to absolute, it floats in the middle of the resized window..

Here's the code. I hope this sheds some light.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<title>CQ</title>

<script type="text/javascript">

$(document).ready(function() {

//bubble text
$('img.bubble').fadeIn(3000, function() {
$('p.yes').fadeIn(700).delay(3000).fadeOut(100, function () {
$('p.ablimp').delay(1000).fadeIn(500).delay(3000).fadeOut(200, function () {
$('p.dontknow').delay(2500).fadeIn(900).delay(4000).fadeOut(1000, function() {
$('img.bubble').fadeOut(600)
});
});
});
});
});
</script>

<link rel="shortcut icon" href="favicon.ico" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META name="description" content="CQ Web Design & Development Studio">
<META name="keywords" content="">
</head>
<body>

<!------ PAGE ------>

<div id="page">
<div id="bubble">
<img src="images/bubble.png" alt="CQ web design" class="bubble">
<p class="yes">yes.</p>
<p class="ablimp">a blimp.</p>
<p class="dontknow">I don't <br>know...</p>
</div>
<img src="images/blimp.png" alt="CQ web design" class="blimp">
</div>


<!------ FOOTER ------>

<div id="footer">
<div id="logo">
<img src="images/stars.png" alt="CQ web design">
<h1>CQ</h1>
</div>

<div id="slogan">
<h2>some slogan<br>
or other</h2>
</div>

<div id="navigation">
<img src="images/navigation.png" alt="navigation">
</div>
</div>

</body>
</html>






/*------- reset & wrap -------*/
* {
vertical-align: baseline;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

html {
width: 100%;
min-width: 1000px;
background: url(images/html.jpg) repeat-x #fff;
}

body {
width: 100%;
min-width: 1000px;
}

/*------- PAGE -------*/

#page {
width: 100%;
min-width: 1000px;
z-index: 1;
}

#bubble {
text-align: center;
width: 7.5em;
height: 6.25em;
position: absolute;
margin: 5em 0em 0em 24em;
padding: 0.01em;
z-index: 99;
}

img.bubble {
position: relative;
z-index: 150;
display: none;
}

.blimp {
position: absolute;
margin: 9.7em 0em 0em 12.5em;
}

/*------- FOOTER -------*/

#footer {
width: 99.9%;
min-width: 1000px;
height: 11.5em;
background: url(images/footer2.png);
position: fixed;
bottom: 0px;
left: 0px;
z-index: 9999;
}

#logo {
width: 6.1em;
height: 9.4em;
text-align: center;
background: #8a8a8b;
position: relative;
float: left;
padding: 0.5em 0.01em 0.01em 0.01em;
margin: 0em 0.5em 0em 2.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
border: 0.12em solid #fff;
}

#slogan {
width: 35%;
min-width: 10em;
background: url(images/dot.png) repeat-x;
position: relative;
float: left;
margin-top: 6.45em;
padding-top: 0.45em;
}

#navigation {
width: 33em;
height: 7em;
position: relative;
float: right;
margin: 2.8em 10em 0em 0em;
}

/*------- TYPE -------*/


/*------- reset -------*/

* {
vertical-align: baseline;
font-weight: normal;
text-decoration: none;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

p.yes{
font: 1.05em 'Harabara';
letter-spacing: 0.05em;
color: grey;
display: none;
margin: -3.3em 0em 0em 0.2em ;
position: relative;
z-index: 200;
}

p.ablimp{
font: 1.1em 'Harabara';
letter-spacing: 0.05em;
color: grey;
display: none;
position: relative;
padding: 0.01em;
margin: -3.1em 0 0 0.25em;
z-index: 300;
}

p.dontknow{
font: 1em 'Harabara';
letter-spacing: 0.05em;
line-height: 0.8em;
color: grey;
display: none;
padding: 0.01em;
margin: -3.6em 0 0 0.2em;
position: relative;
z-index: 400;
}

/*------- FOOTER type -------*/

/*----- logo -----*/

h1 {
font: 3em 'Harabara';
color: #fff;
letter-spacing: 0.02em;
padding: 0.16em 0.01em 0.01em 0.01em;
}

h2 {
font: 1.05em 'TitilliumMaps26l-1wt';
color: #f4f4f4;
line-height: 1em;
display: block;
float: left;
}

Sammy12
07-24-2011, 07:44 PM
thanks for replying, late me take a look

try uploading it to a server if you can. here's what I'm getting

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-29.png

in short, when you set the footer in %, elements are going to collapse, inless using a table. if you use px, then they wont. you will have to use a fluid layout on your footer, if you want to stop the collapse. you set the footer to 99% width, therefore everything inside will be based on a % of the screen. if the user minimizes, his screen size goes from for example 1800 to 1700 to 1600, therefore 99% is less and less. therefore if you set any elements within the footer that are px, they are slowly becoming to crowded.

you set the navigation and logo to a width in px and the slogan to %. the width in px will be overcrowded. you either have to a) make the nav and logo with width % and/or use a liquid layout, or b) make the footer width a px measurement

for more info on this issue http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

vikram1vicky
07-25-2011, 11:55 AM
Hey dear,

I have created a sample page for you. let me know if it is useful for you:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Footer</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#footer {
position:fixed;
display:block;
bottom:0px;
height:200px;
width:100%;
background:#999;
padding:10px;
}
#footer .center{
width:800px;
margin:10px auto;
}
#footer #left1 {
float:left;
width:200px;
height:100px;
background:#5E82DF;
border:1px solid #1E86A8;
}
#right1 {
float:right;
width:500px;
overflow:auto;
color:#FFF;
}
#right1 ul {
list-style:none;
font:bold 12px Verdana, Geneva, sans-serif;
text-align:center;
overflow:auto;
height:1%
}
#right1 ul li a {
display:block;
width:80px;
height:50px;
color:#FFF;
text-decoration:none;
float:left;
}
</style>
</head>

<body>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
<div id="footer"><div class="center">
<div id="left1"></div>
<div id="right1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div></div>
</body>
</html>



:)

shki
07-25-2011, 07:12 PM
Sammy12, sorry about that, here's the link for that same thing.

http://www.knjigovodja-online.com/CQ-test/index.html

obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.

vikram1vicky
07-26-2011, 09:31 AM
Sammy12, sorry about that, here's the link for that same thing.

http://www.knjigovodja-online.com/CQ-test/index.html

obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.



Try this code. I given a fixed width and center aligned DIV in footer div, if will protect navigation and logo from overlapping and scrolling horizontally....

:)

shki
07-26-2011, 10:18 AM
If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

I can't figure out what I'm doing wrong.

vikram1vicky
07-26-2011, 10:28 AM
If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

I can't figure out what I'm doing wrong.


Give a center aligned n fixed width div.. Give width according to the width of navigation and logo.

:)

shki
07-26-2011, 11:40 AM
I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

Did you try this? Did it work for you?

vikram1vicky
07-26-2011, 01:53 PM
I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

Did you try this? Did it work for you?


Yes it is working fine. 1st wrote and tested it and then I pasted code here :)

Sammy12
07-26-2011, 10:20 PM
that's because your floating elements in a fluid layout. all the elements can't fit onto this footer when you decrease the size of your browser, therefore the nav is getting pushed off.

try setting the "some slogan or other" without any widths (no min-width or width). Then make the dotted line a separate div that is resizable (min and max width)

you need to make these types of "gutters" that are resizable in order to stall collapsing elements



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum