|
CSS - The Floating Footer. Does It Exist?
I seem to recall seeing this trick, but now when I am looking around for examples I can't find any.
What I want is a footer div (with the standard footer links, and email address) which will always be docked on the bottom of the viewing area of a browser. So if I scroll up and down the webpage / or resize the browser window, the footer will always appear, visible at the bottom of the window. Any ideas, examples? Ed Similar TutorialsI'm Having problems getting my footer to stay below the content of my page. here's the link to my page. http://www.netgamegurus.com/ main page html Code:
<body>
<div class="container">
<div class="header">
<?php include_once("pages/header.php"); ?>
</div>
<div class="main_body">
<?php include_once("pages/index_body.php"); ?>
</div>
</div>
<div class="clearfooter">
</div>
<div class="footer">
<?php include_once("pages/footer.php"); ?>
</div>
</body>
</html>
main page CSS Code:
body {
background-color: #FFFFFF;
text-align:center;
}
body,html {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
width: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.container {
position:relative;
padding:0px;
margin:0px;
margin-bottom: -150px;
width:100%;
height:100%;
background-color:#666;
}
.header {
}
main_body {
}
.clearfooter {
clear:both;
height:150px;
}
.footer {
position:relative;
height:150px;
margin: -150px auto 0 auto;
}
index_body html Code:
<body>
<div class="left_col">
<?php include_once("left_col_index.php"); ?>
</div>
<div class="right_col">
<?php include_once("right_col_index.php"); ?>
</div>
</body>
</html>
index_body CSS Code:
.left_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:0px;
width:150px;
height:100%;
background-color:#00F;
}
.right_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:150px;
width:857px;
height:105%;
background-color:#0C3
}
I've looked up a ton of info on this on google, but nothing seems to help. Anybody got an idea on this? I am trying to get a footer to position properly on all pages of a site. Because of some absolute positioning I have done using CSS, I resorted to pushing the footer to be formatted that way also. Even though the absolute position is at 670 it is off the bottom of a 1024 x 768 standard webpage for some reason. What I would like to do is get the footer just to display after the last element on the page but I understand that isnt possible since I am using CSS to absolutely position things. The code is something like this: Code:
<title>Program Title Stuff</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="#ffffff">
<img src="images/top-banner.jpg">
<div id="menubar">
<script src="bubblemenu.js"></script>
</div>
<p id="separator">
<img src="images/pagesep.jpg">
</p>
<p id="title">Section Title Goes Here</p>
<div id="contentblock">
{ some content goes here such as tables or text }
</div>
<?php
include("footer.inc");
?>
</body>
</html>
The footer.inc has just your typical links with a separator. The CSS to go with all this is basically font, color, and size. Most elements are absolutely positioned...here is the representative CSS: Code:
body {
margin: 0;
padding: 0;
border: none;
}
a:link {color:#6C9999; text-decoration:none};
a:visited {color:#990099; text-decoration:none}
a:hover {color:#CC3333; text-decoration:none}
#menubar {
position: absolute;
left: 25px;
top: 95px;
border: none;
text-decoration: none;
}
#separator {
position: absolute;
left: 250px;
top: 65px;
}
#title {
font-family: PenultimateLight, Tahoma, "Times New Roman", "MS Sans Serif";
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #3A657B;
position: absolute;
left: 275px;
top: 75px;
}
#contentblock {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
position: absolute;
left: 275px;
top: 110px;
height: 500px;
width: 650px;
}
#footer3 {
position: absolute;
top: 550px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 285px;
}
#footer4 {
position: absolute;
top: 565px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 370px;
font-style: normal;
}
I'd like to get away from absolutely placing the footer, as the content on each page varies in length. But I cant just center the footer, because other elements are blocked absolute and the footer ends up at the top of the page! Any suggestions? Thanks, Kkathman Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Hi... i need to make a table to wrap my content, but i would like to keep the top and side borders so that the table will only expand downwards if there is to much to hold in the windows.... but regular tables will loose the top border, and thats not to my liking ;( is there a way to fix a div tag or something ? thanks... F/ I have been having a heck of a time with css and ie. My current problems relate to ie for Mac. 1. If I have a div I can't give a % for vertical-align, the table cell that the div is contained in is effected by expanding vertically way beyond acceptable. I removed the % and used a text value and have to deal with the non-alignment. 2. If I have a div float right and text that is align right, the div is shoved way to the right off the screen. I have to scroll to see the div, and the div is the only thing over there. I removed the text align right and the div is in the right spot. * The un-workedaround conundrum ************** 3. I have a TD with padding like this 6px 6px 6px 100px and an img float right, or in the html align="right". The img has a margin or padding on the right of what looks like 100px instead of the 6px. The text in the TD is right and the padding on the left of the img is right. It works fine on all other browsers except ie 5 on Mac. If anyone has an answer, or a workaround, for for this that would be awesome! ****************************** I'm looking for a solution to add rounded corners to several DIVs on my site but all of the solutions I have come across use a ridiculous amount of extra markup. Rounded corners are presentation and should obviously not require any code changes within the XHTML document but does a pure CSS solution exist? What do you guys use? This could be a tough one... I have trawled the search engines for a solution, but I don't think I'll find one. What I want to know is is it possible to create a dropdown navigation menu without using Javascript? I've seen an example of how it can be done with CSS, but the author said that it will not validate. Thanks in advance Andy On a CSS tutorial page, I saw an element for an "include-source" command that you can put into your style sheet. It's something like: include-source: url("test.html"); My understanding from that site was that you can put this into your style sheet. Therefore, you can have another page's contents (in my case, only text) display. In other words, whatever I had in the test.html file would display in the <div> tag on the index page where I had called it. It's not working, so what am I missing? I'm using PHP; would that be easier? What I'm trying to do is have a standard layout for all of my pages using css. Instead of having to go into each page and edit it, I'd rather have it in files that I can get into and not search through all of the PHP, HTML, CSS code. Any ideas or suggestions? Thanks. Tim hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far: CSS: Code: * {
margin: 0;
padding: 0;
}
#container {
float: left;
width: 960px;
border: 1px solid #000000;
}
.left {
float: left;
width: 650px;
}
.right {
float: left;
width: 250px;
}
HTML: Code: <div id="container"> <div class="left"> left content goes here </div> <div class="right"> right content goes here </div> </div> Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated Please view the attached image. I want it as; left arrow - gallery - right content all on same line. css Code:
#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }
#content #gallery a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery a:active { border: none; outline: none; }
html Code:
<div id="gallery">
<a href="#" class="galleryprev"> </a>
<div class="list">
<ul>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
</ul>
</div>
<a href="#" class="gallerynext"> </a>
</div>
Hi All I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine. When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be. Is there a work-a-round and/or hack for this? Cheers! Russ Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png |
|||||||