16 replies [Last post]
MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

This is my first go at doing a CSS Layout site and I have read alot about how to build one. I ended up following this tutorial for GoLive CS2.

Site so far: http://www.singleframe.co.uk/euroscreed/

The content area needs the be expandable so I will set the height to 100%.

What I need to know is how would I get the footer to always sit at the bottom of the content??

Here is my CSS and HTML:

body { 
background:#cccccc url(../images/ft_bkg_gradient.png) repeat-x fixed left bottom; 
margin:0; 
color:#484848; 
font: 12px/1.2em Arial, Helvetica, sans-serif; 
font-stretch:normal; 
text-align: center; 
padding:0; 
}
html, body {
height:auto !important;
min-height:100%;
}
#man {
background:url(../images/man.png) no-repeat right bottom;
right:0;
bottom:0;
display:block;
height:355px;
position:fixed;
width:164px;
z-index:5;
}
#wrapper { text-align: left; position: relative; width: 720px; height: auto; margin-right: auto; margin-left: auto; }
p { }
td { }
a:link{
color: #EEB212;
text-decoration: none;
}
a:hover {
color: #EEB212;
text-decoration: underline;
}
.quote_text{ font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #043b77; text-align: right; vertical-align: middle; }
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: Bold;
color: #484848;
}
.heading_blue {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: Bold;
color: #043B77; 
}
.heading_yellow {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: Bold;
color: #EEB212;
}
.content{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #484848; text-align: left; padding: 20px; }
.footer{
color: #484848; 
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
#header { 
background-image: url(../images/header.png); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center top; 
height: 124px; 
width: 716px; 
top: 30px; 
position: absolute; left: 0; 
z-index: 10; 
visibility: visible; 
}
#navigation { 
height: 46px; 
width: 716px; 
top: 154px; 
position: absolute; 
left: 0; 
z-index: 10; 
visibility: visible; 
}
#content { 
background-image: url(../images/content_bkg.png); 
background-repeat: repeat-y; 
background-attachment: scroll; 
background-position: center top; 
text-align: left; 
height: 100px; 
width: 716px; 
top: 200px; 
z-index: 10; 
position: absolute; 
left: 0; 
visibility: visible; 
}
#footer { 
background-image: url(../images/footer.png); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center bottom; 
height: 81px; 
width: 716px; 
z-index: 10; 
position: absolute; 
top: 300px; 
left: 0; 
visibility: visible; 
display: block; 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>
<html xmlns="http://www.w3.org/1999/xhtml"><br>
<head><br>
<meta http-equiv="content-type" content="text/html;charset=utf-8" 
/><br>
<meta name="generator" content="Adobe GoLive" /><br>
<title>European Screeding Limited</title><br>
<link href="css/basic.css" rel="stylesheet" type="text/css" 
media="all" /><br>
<csscriptdict import="import"><br>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script><br>
</csscriptdict><br>
<csactiondict><br>
<script type="text/javascript"><!--<br>
var preloadFlag = false;<br>
function preloadImages() {<br>
if (document.images) {<br>
pre_home_over = newImage('images/home-over.jpg');<br>
pre_about_over = newImage('images/about-over.jpg');<br>
pre_screeding_over = newImage('images/screeding-over.jpg');<br>
pre_resin_over = newImage('images/resin-over.jpg');<br>
pre_clients_over = newImage('images/clients-over.jpg');<br>
pre_contact_over = newImage('images/contact-over.jpg');<br>
preloadFlag = true;<br>
}<br>
}<br>
// --></script><br>
</csactiondict><br>
</head><br>
<body onload="preloadImages();"><br>
<div id="man"></div><br>
<div id="wrapper"><br>
<div id="header"></div><br>
<div id="navigation"><br>
<img src="images/nav_left.png" alt="" height="46" 
width="17" border="0" /><a onmouseover="changeImages('home','images/home-over.jpg');return 
true" onmouseout="changeImages('home','images/home.jpg');return true" 
href="index.html"><img id="home" src="images/home.jpg" 
alt="Home" height="46" width="80" border="0" 
/></a><a onmouseover="changeImages('about','images/about-over.jpg');return 
true" onmouseout="changeImages('about','images/about.jpg');return true" 
href="about.html"><img id="about" src="images/about.jpg" 
alt="About Us" height="46" width="99" border="0" 
/></a><a onmouseover="changeImages('screeding','images/screeding-over.jpg');return 
true" onmouseout="changeImages('screeding','images/screeding.jpg');return 
true" href="screeding.html"><img id="screeding" 
src="images/screeding.jpg" alt="Floor Screeding" height="46" 
width="153" border="0" /></a><a onmouseover="changeImages('resin','images/resin-over.jpg');return 
true" onmouseout="changeImages('resin','images/resin.jpg');return true" 
href="resin.html"><img id="resin" src="images/resin.jpg" 
alt="Epoxy Resin" height="46" width="127" border="0" 
/></a><a onmouseover="changeImages('clients','images/clients-over.jpg');return 
true" onmouseout="changeImages('clients','images/clients.jpg');return 
true" href="clients.html"><img id="clients" src="images/clients.jpg" 
alt="Our Clients" height="46" width="116" border="0" 
/></a><a onmouseover="changeImages('contact','images/contact-over.jpg');return 
true" onmouseout="changeImages('contact','images/contact.jpg');return 
true" href="contact.html"><img id="contact" src="images/contact.jpg" 
alt="Conatct" height="46" width="107" border="0" 
/></a><img src="images/nav_right.png" alt="" height="46" 
width="17" border="0" /></div><br>
<div id="content"></div><br>
<div id="footer"></div><br>
</div><br>
</body><br>
</html>

Any help would be appreciated.

christallization
christallization's picture
Offline
Enthusiast
Las Vegas
Last seen: 13 years 48 weeks ago
Las Vegas
Joined: 2007-03-13
Posts: 69
Points: 0

Your Solution is any

Your footer DIV is already below the content DIV not within it, so as the content DIV grows it will push the footer DIV down so no worries there. Except you have an empty content DIV with no min-height set as you have it now at height: 100% then the footer div will look like it's in the content area because you have no content in center DIV and you set the height to 100%.

It all should all work as is, as long as you have content in the center DIV because you have the right codes. The only other issue is if you intend on not having content in the center div then you will have to set a min-height for it so that at least it displays a blank space without shrinking to allow the footer DIV to creep up.

WHAT HAPPENS IN VEGAS, STAYS IN VEGAS.. NERDS RULE!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well I wouldn't follow any

Well I wouldn't follow any tutorials that have anything to do with adobe and web development/design, essentially just garbage, talking about non existant stuff such as layers, sorry! learn to code without proprietary apps such as 'GoLive'.

I'm not sure what you mean by the footer at the bottom , isn't it already? you will need to explain.

Word of warning I'm slightly worried by your graphics focus, be careful and avoid graphics that have no text alternative especially where links are concerned, at the moment if I disable graphics your page is just blank.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 43 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

We have this wonderful

We have this wonderful section on this very forum called "How To"
In said section you will find some wonderful tutorials.
I bet you five bucks there is one named "Footers" in there.

Here's the link to prove it - http://www.csscreator.com/node/4104

You owe me $5, but you can just donate it to charity. Hmm, maybe March of Dimes.

Thanks!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

Firstly;

Firstly; christallization

Thanks for your quick response but the problem arises when I add text to the content area. The content area will expand but the footer graphic stays put. I will add some text so you can see what I mean. I thought it was due to the footer gfx having an absolute position, if i change this then the footer gfx just disappears.

Secondly; Hugo

Cheers for the pointer but following that tutorial got the basis of the site to where it is now, currently the pro's outweigh the cons. When I have more time I will learn this properly.

"I'm not sure what you mean by the footer at the bottom , isn't it already? you will need to explain."

The footer graphic stays put instead of growing with the content area. So when text is added the footer appears the main body of content text etc.

Thirdly; Deuce

I have followed the "How to" on footers and this just makes the footer image disappear.

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

This is what happens when

This is what happens when text is added:

Test Site

Like I said the footer stays put but the content extends...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ah, I see. Try this code as

Ah, I see.

Try this code as a sample to play with:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
html, body { height: 100%; min-width:900px}
body{background: lightblue;}
#fullheightcontainer {
position: relative; /*** Let's be nice to IE ***/
width: 100%; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
height: 100%;
margin-bottom: -355px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
padding-bottom: 287px; /*** Avoid the footer ***/
}
#footer {
z-index: 1;
position: relative;
background: url(images/ft_bkg_gradient.png) repeat-x left 68px;
text-align: center;
height: 355px;
overflow: hidden;
}
#footer div{
background: url(images/man.png) n0-repeat-x right top;
}

#fullheightcontainer{ height: auto; min-height: 100%;}

Content here

CT

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

Cheers i'll have a play in

Cheers i'll have a play in the morning, its too late now.

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

Cleva i have uploaded your

Cleva i have uploaded your code, I think you may have misunderstood me.

ClevaTreva Code

I appreciate that the content expands but the footer used is my background. I have created an image that will hopefully explain my problem better.

When text is added to the content area the footer does not move as seen in the attached image.

Hope this makes sense.

AttachmentSize
layout.jpg 275.25 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Yes, I did understand.

Hi

Yes, I did understand. There is an error in the code I gave you, use this instead:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
html, body { height: 100%; min-width:900px}
#fullheightcontainer {
position: relative; /*** Let's be nice to IE ***/
width: 100%; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
height: 100%;
margin-bottom: -355px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
}
#footer {
z-index: 1;
position: relative;
background: url(images/ft_bkg_gradient.png) repeat-x left 68px;
text-align: center;
height: 355px;
overflow: hidden;
width:100%;
}
#footer div{
position:relative;
background: url(images/man.png) no-repeat right top;
height: 355px;
overflow: hidden;
}

#fullheightcontainer{ height: auto; min-height: 100%;}

Content here

You wanted the grey flooring and bloke in the page background, but at the bottom of the page. You would use the image postion of bottom to do this, or you would if all versions of IE supported it.

And if the page expands past the end of the viewport, will it not stick in place at the bottom of the initial viewport, not necessarily move to the end of the content?

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

That isn't what I was

That isn't what I was asking, forget the lower background and the man.

Site with background images removed

If you look at the edited attached file, the problem area is the red box (the footer). This needs to be positioned at the base of the black (content) area, currently when text is added the footer floats above the content area and does not move.

CSS for content and footer:

#content { 
background-image: url(../images/content_bkg.png); 
background-repeat: repeat-y; 
background-attachment: scroll; 
background-position: center top; 
text-align: left; 
min-height: 100%; 
width: 716px; 
top: 200px; 
z-index: 10; 
position: relative; 
left: 0; 
height: 100%; v
isibility: visible; 
margin-bottom: -81px; 
display: table; 
}

#footer { 
background-image: url(../images/footer.png); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center bottom; 
height: 81px; 
width: 716px; 
z-index: 10; 
position: relative; 
left: 0; 
overflow: hidden; 
visibility: visible; 
display: block; 
}

All the dvi's sit inside a container which postions them in the center of the page.

Does this make anymore sense?

AttachmentSize
layout2.jpg 65.86 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK I see what you want (at

OK

I see what you want (at last, I AM DENSE sometimes).

The problem lies with your use of positioning and tops and lefts.

Let me try and understand. You want the content centered horizontally, with a top margin. BUT, the content needs to expand the main content box down as required and push the floor man down with it (in other words the content footer sits 350 ish px from the bottom of the page).

You have a header, nav bar, content and footer. Yes?

MeestorMac
Offline
Enthusiast
UK
Last seen: 13 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

"Let me try and understand.

"Let me try and understand. You want the content centered horizontally, with a top margin. BUT, the content needs to expand the main content box down as required"

Upto there you are spot on!

Now forgetting the floor man altogether, I need the footer to sit at the bottom of the content.

Here are the main images/sections involved:

Header

Navigaton

Content

Footer

"Let me try and understand. You want the content centered horizontally, with a top margin. BUT, the content needs to expand the main content box down as required and push the footer image down with it"

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok I'll go play and come

Ok

I'll go play and come back in a tick or two.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK The css is still on the

OK

The css is still on the page. The images I played with on my server were not in an images directory, so you'll need to fix the paths.

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
html, body { height: 100%; min-width:900px}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#CCC; /*** Background colour of page ***/
min-width:716px; /*** Content Width ***/
text-align:center;
}
p {}
#fullheightcontainer {
position: relative; /*** Let's be nice to IE ***/
width: 716px; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
height: 100%;
margin: 0 auto -355px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
text-align:left;
font-size:75%;
background: url(content_bkg.png) repeat-y center top;
}
#page-top {
position:relative;
height:30px;
background: #CCC;
overflow:hidden;
}
#header {
background: #CCC url(header.png) no-repeat center top;
height: 124px;
overflow: hidden;
}
#navigation {
height: 46px;
position: relative;
overflow: hidden;
margin:0 17px;
}
#content {
position: relative;
padding-bottom:368px;
}
#content p {
line-height:1.4em;
color:#484848;
margin: 20px;
}
#footer {
overflow: hidden;
background: #CCC url(footer.png) no-repeat center top;
height: 81px;
position: relative;
}
#footleft p {
margin: 20px 15px 15px;
font-size: 55%;
}
#footleft {
margin-left: 195px;
}
#page-bottom {
z-index: 1;
position: relative;
background: url(ft_bkg_gradient.png) repeat-x left 68px;
text-align: center;
height: 355px;
overflow: hidden;
width: 100%;
margin-top:-68px;
}
#page-bottom div{
position:relative;
background: url(man.png) no-repeat right top;
height: 355px;
overflow: hidden;
}

#fullheightcontainer{ height: auto; min-height: 100%;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

I'm away for a few days, so hopefully you can play with it.

PS I Haven't fixed the awful bits of coding for the menu and the footer.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 18 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Just to be a bit contrary:

Just to be a bit contrary: Smile

I have a different from CT take on the use of background vs foreground images. I am also generally opposed to graphics bound designs, eg., the bg image on footer will break the design should the user change the font size.

It is also my opinion that the content and its html markup should not be gerrymandered to accommodate the chosen layout. There are some exceptions to the rule. The addition of div and span elements are often needed to provide hooks for the css. You might also have to move one section or another to deal with floats, but it should not affect the markup.

This is my take on your page:





European Screeding Limited

/**/





European Screeding, Limited



  • Home


  • About Us


  • Floor Screeding


  • Epoxy Resin

  • Our Clients


  • Contact



  • Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur.



    Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.
    Et harum quidem rerum facilis est et expedita
    distinctio.



    Nam libero tempore, cum soluta nobis est eligendi optio
    cumque nihil impedit quo minus id quod maxime placeat
    facere possimus, omnis voluptas assumenda est, omnis
    dolor repellendus. Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque
    laudantium, totam rem aperiam, eaque ipsa quae ab illo
    inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.



    Nemo enim ipsam voluptatem quia voluptas sit aspernatur
    aut odit aut fugit, sed quia consequuntur magni dolores
    eos qui ratione voluptatem sequi nesciunt.


    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    MeestorMac
    Offline
    Enthusiast
    UK
    Last seen: 13 years 3 weeks ago
    UK
    Timezone: GMT+1
    Joined: 2007-04-16
    Posts: 54
    Points: 0

    Gary, thanks for the input

    Gary, thanks for the input and I do appreciate the work you have put in. My client likes the graphical design and as it's his site, then I must work to complete the project as he requested.

    I will have a play with Treva's code and try and understand how the CSS layouts work, then hopefully I can move forward with my sites.