close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Fixed Full Width Footer Problem

Thread began 10/25/2009 4:49 am by tim376588 | Last modified 10/26/2009 8:56 am by tim376588 | 1444 views | 5 replies |

tim376588

Fixed Full Width Footer Problem

Hi All,
Just wondering if anyone can point me in the right direction here – sorry I am a bit of a newbie. I am using CSS Sculptor to create a base page that I want to look similar to attached document. I have created the document as I basically want it (i.e. inserting classes etc. to get my layout as I want) but in doing so it appears to break the code for the fixed full width footer created by Sculptor – it looks okay in a high res monitor setup like I have but when I view it in say 1024 x 768 the blue bar at the bottom jumps about half way up the page. I have looked at this for ages and am scratching my head. Here is the URL <http://www.printnweb.com.au/main.html> if anyone wants to take a quick squizz and offer suggestions. Would appreciate the feedback.

Thanks,
Tim

Sign in to reply to this post

neilo

Hiya Tim,

Try changing the code at around line 120 of your main.html page from:

<div id="fixedFullWidthFooter">


to:

<div id="fixedFullWidthFooter" class="clearit">


This applies the class from your css file to the footer div to make it clear the other content.

Sign in to reply to this post

neilo

Once you've done that, you may also want to adjust the FullWidthFooter css in your screen.css. Having the top margin as -60px will cause you to lose a portion of your content area (most noticeable in IE).

Your current css for the div is:

#fixedFullWidthFooter {
position: relative;
margin: -60px 0 0 0;
}


You could sort it by changing it to:

#fixedFullWidthFooter {
position: relative;
margin: 0px;
}


or whatever margins you want.

Sign in to reply to this post

tim376588

#fixedFullWidthFooter working

Thanks Neilo for your reply. I applied the clearit class as you suggested and it works fine – thank you. I had tried clearing it before but I was applying it as a separate class which was giving mixed results.
Regarding the -60px to bring the div back up the page, is there a workaround that you know of that can avoid this? I have reduced the size of the #fixedFullWidthFooter to 30px leaving the -30px top margin but I was thinking of just allowing say, 40px of white space at the bottom of every page so that at least text wouldn't be covered up in IE (is this a bit too amateurish).

Thanks for your help.
Tim

Sign in to reply to this post

neilo

Cheers Tim,

It depends what you want the final effect to be (of course!). The template css sets the outerWrapper to have a minimum height of 100% - this is to force the footer div (which is outside of the outerwrapper) to the bottom of the screen - whatever resolution monitor is used to view it. It also has the unfortunate effect of forcing a vertical scroll bar - regardless of window size.This means that on a high-resolution screen that there is likely to be white space between the bottom of the content and the top of the footer (depending on how much content there is), and on a smaller resolution screen or on a non-maximised window there will be little or no white space.

Having a minus 30px top margin on the footer div does mean that there will be some text covered up when viewing the page on a small res screen or on a small window in IE, and because of the min-height property mentioned above, will go no real way to reducing the white space. My opinion is that that is not such a good idea. I would give the footer a top margin of 0px as it will make no great difference to the white space issue, but will be aesthetically slightly better (only my opinion) in that it will stop the footer running over the text. I would also reduce the min-height of the outerWrapper div to around 92% to allow for content + footer without forcing a vertical scrollbar even on a maximised window. That would be my recommendation, for what it's worth.

The white space issue could be solved by puting the footer div inside the outerWrapper div, but then it would not be full width of the screen and would look a bit odd in the context of the overall design. There are also modifications that could be made to the background image to create a pseudo footer - but only if the page content was not going to change.

Anyway, practically any design requirement can be realised with css, so if there's anything I or the people can help with, then post back here.

Sign in to reply to this post

tim376588

Happy with result

Gday Neilo,
Yes, I was having a bit muck around with the divs and margins and pretty well have what I want now – now just to write the content! Thanks again.

Regards,
Tim

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...