|
CSS - Footer Question
This page describes an effect I am trying to achieve, but doesn't work in either Safari or IE 5 on the Mac. The footer always appears at the bottom of the canvas and not at the bottom of the viewport as it is claimed to do in the first demo. How else can this type of footer be done so that it will work with these browsers (and have better browser compatibility in general?) Thanks!
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html Similar TutorialsI've never posted so many questions so quickly in a forum. This has been my first attempt at a CSS layout and I must say that CSS is the most counter-intuitive language that I've ever tried to use(even more so than perl).That said I'm not quite ready to give up yet. I've found a layout that I think I can use but I can't seem to get my footer to stay at the bottom in Mozilla. The layout works out perfectly with IE. The problem with Mozilla is that the footer only stays at the bottom of the right column(#middle). Both columns are dynamic and at any given time one or the other might be the larger column. The worst part is that my menu uses absolute postioning which means I can't even resort back to tables if needed. Thanks to anyone who can help with my problem. It's driving me nuts. I can't move on to other parts of the app untill I get this layout nailed. Here's the relevant CSS I'll also attach the HTML. Again, thanks for any help. CSS Code:
#container {
width:100%;
background:#3579a1;/*this colour will be left column colour */
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
}
#navbar{
margin-left: -122px;/*must be 1 pixel less than width */
float:left;
width:122px;/* this width is the same as the margin on #middle */
position:relative;
}
#navbar p {padding-left:5px;
}
#middle {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
}
* html #middle {height:1%}/* combat ie's 3 pixel jog */
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right
}
h1,h3,p {margin-top:0}
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. 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? Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks 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 . 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! Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. 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? Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later 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!!! hi Guys, Ive had a play and cant solve this problem. Ive got a gradient that is 200px tall that repeats across the top of my page set as the background. I also have a container with a width of 850px centered. I need to create another gradient that repeats across the bottom of the page (200px tall also). What ive done is taken the footer div out of the container and put it underneath in the html set the width to 100% height to 200px and repeated the background - this works but if there is no content in the container the footer sits half way up the page sooooo I add position: absolute with bottom: 0px which brings the footer to the bottom of the page even if no content is in the container SWEET but if I start streching the actual browser window up and down the footer will ride over any other element on page. I'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? Hi, For some reason the bottom of my content is getting chopped off on some pages. For instance, the Bookmark icon and neighboring links are getting cut off at the bottom of this page when viewing with Google Chrome: http://www.sustainablelivingcolorad...ble-living-101/ Any ideas? Thanks. Hey I am creating a website in php with a header and footer attached as in: <?php include("header.php"); ?> I have set the minimum height of the page to 600px however in IE it doesnt' work it displays half up the page In Firefox it is fine but in IE it doesn;t work any clues? cheers J The dreaded CSS footer. I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up. If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am. http://www.vaya.ws/vayadesign/ I need to have a footer fill the rest of the brower window below all the content. The footer needs to be the same with as the content(ie 760). The content area needs to be transparent, because there is an tiled background gradient image used. So the fill can only be in the footer.. I might just be over worked/tired but i can't seem to get anything to work.... PLEASE HELP! Ok, I have this page where the footer <div> isn't paying attention to where the menu <div>'s are. If you look -> Here, you will see how the site is meant to look, i.e. the footer is below everything else. But, if you look -> here, you will see that if the contents of the main <div> are shorter than the menu ones, the footer follows it up the page, and goes underneath the two menu divs. Both menu's are absolutely positioned, so I don't really know how to get the footer to notice they are there, and position itself accordingly... Any thoughts anyone? Cheers, Jon. |
|||||||