|
CSS - Sticky Footer With Fixed Layout
First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short):
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! Similar TutorialsHi I was hoping someone could help me with a sticky footer layout. What I've got so far kind of works, but not quite perfectly. Basically, I want the top & bottom of the container div to always be 20px from the edge, and for the footer to stick to the bottom of the container. I've kind of got it working, but because of the padding on the body there's always a scrollbar present, plus with some browsers, the footer only seems to stick when resizing the window from the corner. Here's the code: Code:
<!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>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
padding:20px 0 20px 0;
background:#d9e7ea;
margin:0px auto;
font-size:11px;
font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
color:#000;
height:100%;
}
#wrap {
margin:0 auto;
position:relative;
width: 950px;
min-height:100%;
background-color:Red;
overflow:hidden;
}
#header {
margin:0 20px;
height:100px;
background-color:Green;
}
#content {
margin:0 20px;
padding-bottom:50px;
background-color:#ffffff;
background-color:Blue;
}
#footer {
color:#000;
position:absolute;
bottom:0px;
background-color:Yellow;
height:50px;
width:950px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
</div>
<div id="footer">
footer<br />
</div>
</div>
</body>
</html>
Thanks for any help. I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it. <!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>Untitled Document</title> <style type="text/css"> <!-- #headerDiv { position:absolute; left:0px; top:0px; width:100%; height:219px; z-index:1; background-image:url(images/header_bg.jpg) } #leftcontentDiv { position:absolute; left:0px; top:0px; width:50%; height:219px; z-index:2; } #headermenuDiv { position:absolute; width:263px; height:19px; z-index:2; margin-top:5px; margin-left: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; left: 26px; } #rightcontentDiv { position:absolute; right:0px; top:0px; width:50%; height:219px; z-index:2; } #logoDiv { position:absolute; left:0px; top:0px; width:511px; height:101px; z-index:2; background-image:url(images/ogo.jpg) } #searchDiv { position:absolute; left:90px; bottom:0px; width:330px; height:42px; z-index:2; background-image: url(images/search.jpg); } #logosearch_containerDiv { position:absolute; left:1%; top:25px; width:511px; height:146px; z-index:2; } #signupDiv { position:absolute; width:212px; height:19px; z-index:2; margin-top:5px; right:5px; font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; } #loginDiv { position:absolute; right:0px; top:24px; width:233px; height:119px; z-index:2; background-image:url(images/login.jpg) } #bodytopDiv { position:absolute; left:0px; top:219px; width:100%; height:401px; z-index:2; } #photoDiv { position:absolute; left:0px; top:0px; width:589px; height:349px; z-index:3; } #titlecontainerDiv { position:absolute; right:2px; top:0px; width:50%; height:349px; z-index:3; text-align: left; } body { text-align: center; } #bodytopbottomDiv { position:absolute; left:0px; top:348px; width:100%; height:51px; z-index:3; background-color: #0361C1; } #bodytopDiv #bodytopbottomDiv table { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 12px; } #newalbumsDiv { position:absolute; left:0px; top:620px; width:301px; height:301px; background-image: url(images/newalbums.jpg); } #topalbumsDiv { position:absolute; left:318px; top:620px; width:301px; height:301px; background-image: url(images/topalbums.jpg); } #videosDiv { position:absolute; left:636px; top:620px; width:386px; height:301px; background-image: url(images/videos.jpg); } #lowerbodycontainer { width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; left: 0px; top: 0px; } --> </style> </head> <body> <div id="headerDiv"> <div id="leftcontentDiv"> <div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div> <div id="logosearch_containerDiv"> <div id="logoDiv"></div> <div id="searchDiv"></div> </div> </div> <div id="rightcontentDiv"> <div id="signupDiv">New User? Signup | New Artist? Sign up</div> <div id="loginDiv"></div> </div> </div> <div id="bodytopDiv"> <div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div> <div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div> <div id="bodytopbottomDiv"> <table width="777" border="0" align="center" cellspacing="10"> <tr> <td width="145">text goes here</td> <td width="150">text goes here</td> <td width="126">text goes here</td> <td width="161">text goes here</td> <td width="125">text goes here</td> </tr> </table> </div> </div> <div id="lowerbodycontainer"> <div id="newalbumsDiv"></div> <div id="topalbumsDiv"></div> <div id="videosDiv"></div> </div> </body> </html> http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical Hi, Wondering if anyone can help with a sticky footer im trying to achieve. Im currently working on retentionbs.com, and noticed the footer doesnt stick to the bottom of the window. I've searched it and the solutions seem fairly complex. Does anyone have a quick fix? Any help would be massively appreciated! Thanks, Graeme Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks! URL CSS: Code: * { margin:0; padding:0; } html, body, #wrap { height: 100%; min-height:100%; /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.puremango.co.uk/2010/04/css-gradient/ */ /* fallback (Opera) */ background: #8cb6e9; /* Mozilla: */ background: -moz-linear-gradient(top, #8cb6e9, #e0effc); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0); } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 116px; height:100%; } /* must be same height as the footer */ #contentwrapper { margin: 0 auto; height:100%; min-height:100%; } #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%; } #footer { position: relative; margin-top: -116px; /* negative value of footer height */ height: 116px; background-image:url(layout/footer.png); width:100%; background-position:center; clear:both; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
HTML: Code: <body> <div id="wrap"> <div id="main" class="clearfix"> </div> <div id="contentwrapper"> <div id="content"> <p>Your website content here.</p> </div> </div> </div> </div> <div id="footer"></div> </body> Hello Guys, I'm hoping someone might be able to help me here. I have been developing a site for a friend who is starting his own company. I'm a self taught web designer and I'm relatively fresh when it comes to CSS, but I thought I'd give it a shot. I decided to use a sticky footer as I think it makes for a cool look. Everything is working wonderfully in Firefox, but when I test in other browsers I have issues. 1) Safari & IE7 Strange things are happening with the main content not fully displaying The footer isn't "pushed" down by the main site contents and covers up some of the content. Safari is even weirder because it works sometimes when I move around the size of the window itself, making it thinner (my screen is fairly wide). 2) IE 7 My right hand floated div (#contentright) appears in the wrong place. This doesn't happen in Firefox or Safari and I have no idea why. As far as I can tell it should be within the wrapper, to the right of the left content. This is on the sub-pages - there is no right side on the home page. If anyone can help out with these issues I would be grateful. Site is at: <removed at users request> CSS is at: <removed at users request> Code is more or less W3C valid as is CSS, bar a few minor issues which shouldn't be relative to the above. Many thanks, Jo Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table? http://csstest.dmsbdesign.com/templates/templates%201/ css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
background-color:#F7F7F7;
height:100%;
}
.quicklink{
padding-bottom:10px;
padding-top:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style-type:none;
width:220px;
text-align:left;
padding-left:5px;
}
#container{
background-color:#E1E1E1;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
}
#header{
background-color:#666666;
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#logo ul{
margin:0px;
position:relative;
left:-15px;
bottom:60px;
}
#logo li{
text-align:right;
list-style-image: none;
list-style-type: none;
}
#logo{
position:relative;
left:5px;
top:10px;
}
#logo img{
height:75px;
width:75px;
}
#logo h1{
position:absolute;
margin:0px;
left:75px;
top:15px;
}
#logo h2{
position:absolute;
margin:0px;
left:75px;
top:45px;
}
#nav{
background-color:#999999;
width:1000px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#nav ul{
margin-top:0px;
}
#nav li{
display:inline;
list-style-type:none;
padding-right:80px;
}
#pictureDiv{
margin-top:10px;
width:940px;
height:240px;
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
padding: 5px;
border:1px #000000 solid;
}
#contentDiv tr {
}
#pictureDiv h1{
position:relative;
margin:0px;
width:200px;
font-size:24px;
left:735px;
top:-150px;
color:#ff0000;
}
#pictureDiv img{
position:relative;
left:10px;
}
#contentDiv{
margin-top:10px;
width:900px;
height:325px;
margin-left:auto;
margin-right:auto;
}
#contentDiv table{
position:relative;
top:-510px;
left:550px;
width:375px;
}
#contentDiv tr{
}
#contentDiv td {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-bottom:10px;
padding-top:10px;
}
#contentDiv p{
width:75%;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#contentDiv h1{
margin:5px;
}
#footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
}
html here Code: <!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>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="../../images/Placeholder.png" />
<h1> My Webpage </h1>
<h2> My Slogan </h2>
<ul>
<li> Phone Number: 555-555-5555 </li>
<li> Address: 123 Main St </li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li>Nav 7</li>
</ul>
</div>
<div id="pictureDiv">
<img src="../../images/png/Placeholderstreched.png" />
<h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
<h1>Nam vitae lorem!</h1>
<p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul style="position:relative; right:20px;">
<li>Suspendisse sagittis leo leo. Lorem.</li>
<li>Suspendisse elit velit, scelerisque ut.</li>
<li>Nullam nec magna risus, adipiscing.</li>
<li>Etiam luctus ullamcorper libero ac.</li>
<li>Aenean pretium orci mollis orci.</li>
</ul>
<ul style="position:relative; top:-116px; left:250px;">
<li>In quis arcu justo, sed.</li>
<li>Nullam elementum varius.</li>
<li>Nulla egestas vehicula erat.</li>
<li>Nam congue rhoncus gravida.</li>
<li>Pellentesque habitant morbi tristique.</li>
</ul>
<table width="290" border="0" cellspacing="0">
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
</table>
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>
Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Please take a look at this page in IE 6.0: http://ist4pos.com/pos_solutions/gemini.html The sticky footer does one of three things. It either sticks properly, it cuts the page off at the fold, or it sticks to the bottom of the page but with several inches of white space underneath. If you refresh the page if will change from one to another. If you click around the site, other pages do this as well, so long as they are long enough to push the page past the fold. IE7 usually works but sometimes the footer hovers in the middle of the page. I can't understand why the same browser on the same computer can render the same page completely differently several times in a matter of seconds. Here is my CSS. All the relevant stuff is right at the top: Code: html, body, #outerDiv {height: 100%;}
body > #outerDiv {
min-height: 100%;
}
#main {padding-bottom: 35px;} /* must be same height as the footer */
#footer p {
font-family: Verdana, Geneva, sans-serif;
font-size: .75em;
color: #FFF;
text-align: center;
padding-top: 10px;
}
#footer {
position: relative;
margin-top: -35px; /* negative value of footer height */
height: 35px;
clear:both;
background-color: #CCC;
}
/* ===== global styles ===== */
h1, h2, h3, h4, h5, h6, p, {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-image: url(images/backGrad2.jpg);
background-repeat: repeat-x;
text-align:center;
}
#outerDiv #threeColumns #middleColumn ul li ul {
font-size: 16px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
margin: 0px 0px 10px;
padding: 0px;
list-style-type: square;
line-height: 1.6em;
text-align: left;
}
h1 {
font-family:Cambria, Verdana, Geneva, sans-serif;
font-size:1.4em;
color: #0067AC;
text-align: left;
line-height: normal;
font-weight: normal;
margin-bottom: 2px;
margin-top: 5px;
}
h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
color: #666;
text-align: left;
line-height: 1.5em;
font-style: normal;
text-transform: uppercase;
font-variant: normal;
margin-bottom: 10px;
font-weight: normal;
margin-top: 0px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
font-weight: normal;
margin-bottom: 7px;
font-style: italic;
}
h4 {
margin-bottom: 10px;
font-weight: normal;
}
/* ===== header ===== */
div#header {
height: 110px;
width: 900px;
position: relative;
background-repeat:no-repeat;
}
div#headerLinks {
float:right;
padding-top: 20px;
}
#header #headerLinks p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #666;
}
/* ====== image placeholders ===== */
div#navPlace {
width: 900px;
height: 35px;
background-color: #808285;
}
div#topDivider {
width: 900px;
height: 35px;
padding: 11px 0px 3px 0px;
}
div#centralPlace {
height: 135px;
width: 900px;
padding-top: 10px;
}
/* Assorted Page SubDivs */
div#leader1 {
float: left;
width: 220px;
}
div#leader2 {
float: left;
width: 220px;
padding-left: 10px;
}
div#sitemapOne {
float: left;
width: 210px;
}
/* ====== three columns ===== */
div#threeColumns {
margin-top:15px;
}
div#outerDiv {
width: 900px;
margin: 0 auto;
text-align:left;
height: auto !important;
height: 100%;
}
div#leftColumn {
position: relative;
width: 185px;
float:left;
}
div#middleColumn {
width: 480px;
float:left;
text-align: justify;
background-color: #FFF;
padding: 15px 15px;
}
div#rightColumn {
width: 191px;
position:relative;
float:right;
text-align: center;
background-color: #FFF;
padding: 0px;
margin-bottom: 40px;
}
/* ====== partner logo ===== */
div#partner {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 35px;
padding-left: 0;
}
#outerDiv #threeColumns #rightColumn #partner img {
}
/* ====== blog/contact button ===== */
div#blog {
padding: 0;
float: right;
width:176px;
margin: 15px 7px 15px 0px;
}
div#contact{
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
/* ====== social media links ===== */
div#social {
position: relative;
padding-top: 20px;
padding-right: 32px;
padding-bottom: 20px;
padding-left: 0px;
}
#social p {
vertical-align: bottom;
}
#social img {
float: right;
padding-left: 3px;
}
/* ====== float classes ===== */
.fltrt {
float: right;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
.fltleft {
float: left;
margin-top: 10px;
margin-right: 10px;
}
/* ====== Links ===== */
a.graphic:link {
color: #666;
text-decoration: none;
height: 20px;
width: 150px;
background-color: #EEE;
margin-bottom: 2px;
padding: 12px 10px 10px 5px;
display: block;
border-width: 1px 1px 1px 5px;
border-style: solid;
border-color: #0067AC;
}
a.graphic:visited {
color: #333;
text-decoration: underline;
}
a.graphic:hover {
color: #0067AC;
}
a.graphic:active {
color: #0067AC;
}
a.product:link {
color: #999;
text-decoration: none;
margin-bottom: 3px;
padding-bottom: 3px;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
margin-top: 3px;
padding-top: 3px;
}
a.product:visited {
color: #999;
text-decoration: none;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
a.product:hover {
color: #0067AC;
}
a.product:active {
color: #0067AC;
}
a.trad:link {
color: #0067AC;
text-decoration: underline;
text-align: left;
margin: 0px 0px 10px;
padding: 0px 0px 10px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:visited {
color: #999;
text-align: left;
margin: 0px;
padding: 0px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:hover {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:active {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.footer:link {
color:#FFF;
text-decoration: none;
}
a.footer:visited {
color:#FFF;
text-decoration: none;
}
a.footer:hover {
color:#FFF;
text-decoration: underline;
}
a.footer:active {
color:#FFF;
text-decoration: underline;
}
#outerDiv #threeColumns #rightColumn #partner img {
margin-top: 15px;
}
div#download {
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
#outerDiv #threeColumns #middleColumn ul li {
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
color: #666;
line-height: 1.6em;
padding-top: 0px;
padding-bottom: 4pt;
font-size: .7em;
}
.tablewhiteheads {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: .7em;
font-weight: bold;
padding-left: 5px;
}
#outerDiv #threeColumns #middleColumn table tr td p {
margin: 2px;
}
div#contactColumn {
width: 524px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
div#missionColumn {
width: 480px;
float:left;
text-align: center;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
#outerDiv #threeColumns #missionColumn p {
font: 16px Cambria, Georgia, "Times New Roman", Times, serif;
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn h1 {
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn p img {
margin-top: 5px;
margin-bottom: 5px;
}
div#siteMapColumn {
width: 660px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
I use an SSI for the footer text, but I've tried removing this and it doesn't seem to make a difference. Does anyone have any idea what's going on here? I just don't understand how it can behave so inconsistently in a singular environment. Thanks! Tim I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images! As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content: http://www.richarddoyle.net/tests/css_table/table.html This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow. My first attempt showed the colspan issue: http://www.richarddoyle.net/tests/css_table/cssversion1.html My second attempt I couldn't get the page to match at least the height of the browser: http://www.richarddoyle.net/tests/css_table/cssversion2.html Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work? Hello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling. All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css? The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed. The css and xhtml arevalid. Here is the link: http://www.lonniebruhn.com/sitelab/ Thanks for your help LB Okay I've gotten to a point in my design where I'm a bit stumped. I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access. After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation. Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer? The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css? Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes? I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css. Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/ |
|||||||