XCalvin Posted July 9, 2010 Share Posted July 9, 2010 i have been working on a website on dreamweaver with a sticky footer it looks fine in DW but in my browser it looks like this: Link to comment Share on other sites More sharing options...
0 Cupcakes Posted July 9, 2010 Share Posted July 9, 2010 A screenshot doesn't help at all when it's the actual code that's the issue. You'll need to post up your code. Now is this a footer that you just want to "stick" to the bottom before content is long enough to force the browser to scroll? Or is the sticky footer going to stay on top of the content as you scroll down the browser? Link to comment Share on other sites More sharing options...
0 Chadsxe Posted July 9, 2010 Share Posted July 9, 2010 Word of advice. Test in Firefox first then fix for everything else. Firefox has the highest standards checks. Link to comment Share on other sites More sharing options...
0 XCalvin Posted July 9, 2010 Author Share Posted July 9, 2010 index.zip here is the code and yes it will always stay at the bottom of the screen Link to comment Share on other sites More sharing options...
0 Cupcakes Posted July 9, 2010 Share Posted July 9, 2010 Just to reiterate you want a footer basically like this: Webdesignledger.com? BTW, you still didn't include your code. style.css is necessary. Best way to do this is just copy/paste into the code tag on the forum for each. No need to attach anything :p. Edit: Whoops forgot the rest of my post! Rather than reinvent the wheel for you, you can check out this post that shows how you can achieve a fixed footer (and header!) layout. :) All code is available there and here is the demo you can check out :). Link to comment Share on other sites More sharing options...
0 XCalvin Posted July 10, 2010 Author Share Posted July 10, 2010 @charset "utf-8"; /* CSS Document */ * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; /* the bottom margin is the negative value of the footer's height */ width: auto; margin-top: 0; margin-right: auto; margin-bottom: -50px; margin-left: auto; background-color: #FFF; background-image: url(../repeat_bg.jpg); } table { font-family: "Lucida Grande"; font-size: 14px; color: #FFF; } .dot { font-family: "Arial Narrow"; font-size: 10px; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ font-family: "Lucida Grande"; background-color: #FFF; font-size: 12px; } nav { font-family: "Lucida Grande"; text-transform: uppercase; color: #FFF; } footer { font-family: "Lucida Grande"; font-size: 12px; color: #FFF; } .footer p { color: #CCC; font-size: 10px; font-weight: bold; text-transform: uppercase; text-align: left; } .footertext { color: #333; } .wrapper #content table tr th { color: #FFF; } secondfooter { font-size: 10px; } .footer p { color: #CCC; } .nav3 { color: #333; } .navsmall { color: #666; } this is css <!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> <link href="css/style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- a:link { text-decoration: none; color: #999; } a:visited { text-decoration: none; color: #999; } a:hover { text-decoration: underline; color: #CCC; } a:active { text-decoration: none; color: #CCC; } --> </style></head> <body> <div class="wrapper"> <div id="content"> <p><img src="TEST.PNG" width="580" height="156" /></p> <table width="525" height="406" border="0"> <tr> <th width="519" align="left" valign="top" class="footertext" scope="row"> Contact Us <span class="dot">●</span> Facebook <span class="dot">●</span> Blog <span class="dot">●</span> Videos <span class="dot">●</span> Forums</th> </tr> <tr> <th scope="row"> </th> </tr> <tr> <th scope="row"> </th> </tr> <tr> <th scope="row"> </th> </tr> <tr> <th scope="row"> </th> </tr> <tr> <th scope="row"> </th> </tr> </table> <div class="push"></div> <!-- end push --> </div><!-- end content --> </div> <!-- end wrapper --> <div class="footer"> <p> </p> <p class="footertext"> <span class="push"> <span class="nav3"> Contact Us | Facebook | Blog | Videos | Forums</span></span> </p> <p class="footertext"> <span class="navsmall"> www.spartanshadowfilms.tK</span> ;<a href="http://www.youtube.com/user/SpartanShadowFilms">www.youtube.com/user/SpartanShadowFilms</a></p> </div> <!-- end footer --> </body> </html> html Link to comment Share on other sites More sharing options...
0 Cupcakes Posted July 10, 2010 Share Posted July 10, 2010 XCalvin, the forum has bbcode enabled, so to make it cleaner (and easier) you should use the code bbcode. It's the icon with the <> brackets. You use [ code] code here and [/ code] (remove spaces). Also, can you please reread my post? I asked you to confirm if the effect you wanted was the stickied footer in the URL example. If that is the case, I gave you a link that contains the demo and source code to achieve that effect. By the way, you have a linked stylesheet yet you've also got inline css. Remove the inline css* and include that in your style.css file. The correct way is to include it in the style.css file (as you've done with the rest of it.) * This should be removed and included in style.css: a:link, a:visited { text-decoration: none; color: #999; } a:hover { text-decoration: underline; color: #CCC; } a:active { color: #CCC; } I've also edited it. You do not need to repeat text-decoration: none for :visited and :active. It will inherit from :link. Link to comment Share on other sites More sharing options...
0 Asparagus Posted July 10, 2010 Share Posted July 10, 2010 The code you posted looks fine to me (Google Chrome 5.0.375.99), the footer sticks to the bottom, no white streaks... Link to comment Share on other sites More sharing options...
0 XCalvin Posted July 10, 2010 Author Share Posted July 10, 2010 the website appears fine in normal window but full screen it has the white streaks and i wanted the footer like this http://webdesignledger.com/ Link to comment Share on other sites More sharing options...
0 Asparagus Posted July 10, 2010 Share Posted July 10, 2010 Have a look at this: http://limpid.nl/lab/css/fixed/footer, or just use the link that Cupcakes posted earlier, they both achieve the same result. Link to comment Share on other sites More sharing options...
Question
XCalvin
i have been working on a website on dreamweaver with a sticky footer it looks fine in DW but in my browser it looks like this:
Link to comment
Share on other sites
9 answers to this question
Recommended Posts