|
CSS - Automatically Position Footer
Hi All,
First time here on the CSS part of Dev Shed. I attempted laying out my page entirely with css for the first time and I have got a question. I have got dymanica content loading into the content DIV of my page. The amount of content varies from one senario to another. So how do I automatically reposition my footer DIV so that it is always at the bottom on my page no matter how much downwards my content DIV adjusts. Thanks guys. Similar TutorialsHi can someone please help me position the footer so that it is always at the bottom of the page. Any help at all would be appreciated. http://www40.brinkster.com/jessjav/en/biography_e.asp Firefox renders the page correctly, but IE likes to place the footer in random positions throughout the page. Not sure what's happening here. Look here. Once the page is cached, and the link is selected again, the footer displays correctly. This is very strange. If you clear your cash or refresh the page, it screws the footer up again. The happens on several pages. These are CSS sections for clearfooter and footer. Code:
#clearfooter {
clear: both;
height: 1em;
overflow: hidden;
}
#footer p {
position: absolute;
bottom: 1px; /* Fix for Mozilla spacing from bottom */
left: 150px;
height: 1em;
width: 534px;
color: #ffffff;
text-align: center;
padding: 3px;
margin: auto;
font-weight: bold;
font-size: .6em;
}
I appreciate any help on this... Thanks, Darin I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css. The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page. I have uploaded the code to here When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer. When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer. I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage? Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage). Again does anyone have any idea how I would be able to get it to do this. ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
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 Hello, so basically I've got these side bar graphic things I want to put on the edges of my main content table to make it look nice. The problem is I can't seem to figure out how to make them resize their height automatically depending on the length of the main content table, which is slightly different on every page. Since URLs are blocked I guess I have no choice but to just include the code here, ugh. Code:
...
<div id="page-container">
<div id="headerer">
</div>
<div id="header">
</div>
<div id="navpanel">
<img src="images/interface/gorglogowidth.jpg" width="270" height="269" border="0" /><br />
<div id="tvbg">
<div id="main-nav">
<dt id="news"><a href="index.php">news</a></dt>
<dt id="episodes"><a href="episodes.html">episodes</a></dt>
<dt id="universialinfo"><a href="universialinfo.html">universialinfo</a></dt>
<dt id="music"><a href="music.html">music</a></dt>
<dt id="contact"><a href="contact.html">contact</a></dt>
</div></div></div>
<div id="sidebar-b">
<img src="images/interface/panelright.jpg" width="17" border="0" />
<img src="images/interface/bottomrightcorner.jpg" />
</div>
<div id="sidebar-a">
<img src="images/interface/panelleft.jpg" />
<img src="images/interface/bottomleftcorner.jpg" width="28"/>
</div>
<div id="content">
<span class="titletext">Episode 1: The Greatest Planet in Existence</span><br />
<a href="episodes/episode1high.html" target="_blank">High Quality (595MB)</a>
<br />
<a href="episodes/episode1low.html" target="_blank">Low Quality (85MB)</a>
<br /><br />
<span class="titletext">Episode 2: Savory Dark Truffle</span><br />
<a href="episodes/episode2high.html" target="_blank">High Quality (597MB)</a>
<br />
<a href="episodes/episode2medium.html" target="_blank">Medium Quality (264MB)</a>
<br />
<br />
<span class="titletext">Episode 3: Spoon the Pretty Bad</span><br />
<a href="episodes/episode3medium.html" target="_blank">Medium Quality (146MB)</a>
<br />
<a href="episodes/episode3flashhigh.html" target="_blank">High Quality FLASH FORMAT(Recomended)</a>
</div>
<div id="panelbottom">
<img src="images/interface/bottommiddle.jpg" width="300" height="28" /> </div>
Anyway, the two images, "panel left", and "panel right" (contained in the DIVs "sidebar-a" and "sidebar-b", respectively) go wayyy down, as their native resolution is very large and I was initially hoping to simply be able to scale them down to to match the height of the main content page The CSS file is as follows: Code:
...
#page-container {
width: 800px;
margin: auto;
text-align: left;
}
/* Main Navigation */
#tvbg {
background:url(../images/interface/navtvlonger.jpg)
}
#main-nav {
padding-top: 50px;
margin-left: 32px;
height: 356px;
width: 150px;
}
#header {
height: 188px;
background: #696969
url(../images/interface/episodesheader.jpg);
width: 530px;
float: right;
}
#sidebar-a {
float: left;
width: 28px;
}
#sidebar-b {
float: right;
margin-left: 155px;
width: 17px;
}
#navpanel {
float: left;
}
#content {
margin-right: 17px;
margin-left: 268px;
line-height: 18px;
background: #696969;
}
#content .padding {
padding: 25px;
}
Thanks! I have page that automatically changes the images in a container via css. Does anyone know if its possible for each image to have a different hyperlink? Would have done this in Flash but, IT Security is not on board with that yet. Any suggestions? Hi all For accessibility reasons I use "em" in my CSS instead of "px", "pt" etc., so the users of all general browsers can scale my websites. But during implementing the page I use "px" because it's easier and I don't have to calculate the relative "em" values all the time. As soon as I finish the implementation process, I go over all the "px" values and calculate the to "em" values. Now my question: is there maybe a Firefox plugin that helps me doing this? Sometimes it's annoying to find out the font-size of the parent element so I can calculate the correct "em" value... A tool like the "Layout" view of the Firebug plugin which would display everything in "em" instead of "px" would be great... anyone knows such a thingie? :-) Thanks a lot for help, Josh Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would): Code:
<HTML>
<HEAD>
<STYLE>
.frame {
margin-left : 5%;
width : 90%;
font-size : 1em;
text-align : center;
}
.header {
width : 800;
border : 0.05em dashed black;
text-align : center;
}
.header1, .header2, .header3 {
float : left;
margin : 1px;
vertical-align : center;
font-size : 0.8em;
position : relative;
border : 0.05em red solid;
}
.header1 {
text-align : right;
width : 750;
}
.header2 {
text-align : center;
width : 40;
}
.clear {
clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Solution included in post below --- thanks. Hi, I am rewriting a series of webpage in CSS. the pages have a two column layout with a top area which has a banner effect. What I would like to do is to have the top and the left div's contain the same info on all pages. So instead of manually putting the contents of these div's in each page I would like to just create the contents in one file say top.html and left.html and load them in each page by using some sort of link. This would make any changes to the contents easy, edit one file instead of many. I am CSS newbie so I would be greatful for any pointers. Thanks, R Haynes Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . |
|||||||