13 replies [Last post]
lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

I hope somebody can help me!!

I've searched everywhere for the answer, but I don't know how i can fit it into my layout!?!?!?!

I have 3 columns, a header and a footer.

I want my footer to be fixed the the bottom of the page (not the screen)

How can i do so?

Here is my HTML:

 

ADVERTS

ADVERTS

 

 

 

 

 

 

 

 

 

Welcome to Harmony Crystal Bears.

A small family run company, Harmony
Crystal Bears.....

 

 

 

 

 

|
|
|
|
|
|
|
|
|
and here is my CSS:

A:link
{ text-decoration: none; [underline, overline, underline overline, line-through, blink, none] color:#0000FF; }
A:visited
{ text-decoration: none; [underline, overline, underline overline, line-through, blink, none] color:#800080; }
A:active
{ text-decoration: none; [underline, overline, underline overline, line-through, blink, none] color:#FF0000; }
A:hover
{ text-decoration: underline; [underline, overline, underline overline, line-through, blink, none] color:#000000;

background-image: url(yourimage.gif);
background-color: #FFFFFF;

(Warning: the following cursor attribute is for those who use IE only!)

cursor: default; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
cursor: url('yourdomain.com/cursor.ani');}

h1 {
font-family: verdana; [your font name for headers (arial, verdana, etc.)]
color: #000000; [your font color (#000000)]
}

h1.margin {margin: 1cm 1cm 2cm 1cm}

p {
font-family: verdana; [your font name for paragraphs (arial, verdana, etc.)]
color: #000000; [your font color (#000000)]
}

body
{ background: #FFFFFF;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: no-repeat; [repeat, no-repeat, repeat-x, repeat-y]
background-position: top left; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: scroll; [scroll, fixed]

font-family: verdana; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: normal; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: medium; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

direction:rtl; [this reverses the entire site so the scrollbar is on the left]

(Warning: the following scrollbar attribute is for those who use IE only!)

/* scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000; */

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: verdana; [your font name]
color: #000000;
padding-left: 2cm; [2cm, 4cm etc.]
padding-right: 2cm; [2cm]
padding-top: 2cm; [2cm]
padding-bottom: 2cm; [2cm]
padding: 2cm; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }

input, textarea
{ background: #FBEC5D url(yourimage.gif);
font-family: verdana; [your font name]
color: #FBEC5D;
border-style: solid; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: 2px; [numerical value, 5, 6, 8...] }

#menu {
background: url('images/grad1.gif') no-repeat;
position:absolute;
left:0px;
font-family:verdana;
padding:0px;
width:150px;
height: auto;

}

#ads {
background: url('images/grad1.gif') no-repeat;
position: absolute;
right: 0px;
font-family: verdana; [your font name]
padding: 0px;
width: 150px
}

#content {
background: url('images/grad1content.gif') no-repeat;
margin-left: 200px;
padding: 0px;
margin-right: 0px;
font-family: verdana; [your font name]
margin-bottom: -330px;
min-height: 100%;

}

#footer {
position: relative;
left:1.5em;
height: 0px;
clear: both;

}

.mbl {background: url('images/bl1.gif') no-repeat 0 100%;}
.mbr {background: url('images/br1.gif') no-repeat 100% 100%;}
.mtl {background: url('images/tl1.gif') no-repeat 0 0;}
.mtr {background: url('images/tr1.gif') no-repeat 100% 0;}
.clear {font-size: 1px; height: 1px}

.abl {background: url('images/bl1.gif') no-repeat 0 100%;}
.abr {background: url('images/br1.gif') no-repeat 100% 100%;}
.atl {background: url('images/tl1.gif') no-repeat 0 0;}
.atr {background: url('images/tr1.gif') no-repeat 100% 0;}
.clear {font-size: 1px; height: 1px}

.cbl {background: url('yourimage.gif') no-repeat 0 100%;width: 38em}
.cbr {background: url('yourimage.gif') no-repeat 100% 100%;}
.ctl {background: url('images/tl1.gif') no-repeat 0 0;}
.ctr {background: url('images/tr1.gif') no-repeat 100% 0; padding:10px}
.clear {font-size: 1px; height: 1px}

.fbl {background: #fbfb24 url('images/bl1.gif') no-repeat 0 100%;width: 60em}
.fbr {background: url('images/br1.gif') no-repeat 100% 100%;}
.ftl {background: url('images/tl1.gif') no-repeat 0 0;}
.ftr {background: url('images/tr1.gif') no-repeat 100% 0;}
.clear {font-size: 1px; height: 1px}

.space { height: 0px; clear: both;}

.normal
{
height: auto
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

research sticky footer

research sticky footer

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

ive been looking at so many

ive been looking at so many things and ive had a look at that, but i cant seem to focus on anything because there is just too much to read in the short time i have! Sad

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

lukegw wrote:ive been

lukegw wrote:

ive been looking at so many things and ive had a look at that, but i cant seem to focus on anything because there is just too much to read in the short time i have! Sad

Well, not many people here are going to offer up an answer if you refuse to do any work for yourself.

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

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

yes of course i understand -

yes of course i understand - but as you can see this is my first topic ever on the site and i have honestly been working on this for hours.

Pretty much a newbie when it comes to css, so thats why im asking for some help!!

Cheers,

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

ive tried playing around

ive tried playing around with my code

and the first thing it does, is shortens all of my images and throws the footer far down the page so i have to scroll. Even then, it still isn't sitting at the very bottom :@

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

hi, ive honestly sat down

hi, ive honestly sat down and read every single word of that website, and tried to apply it, and ended up screwing everything up, so now my whole page drops to the bottom but the header stays at the top + the footer isnt working still

Does anybody know who i can properly include into the code ive provided?

Please help!

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

Show us what you've

Show us what you've done.
Provide us with a link or at minimum all of your code (all of it) that has all of the sticky footer code applied.

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

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

hello there, ive not had

hello there,

ive not had chance to get on the computer properly, but had a look back at my problem again,

and i actually sorted it! until i put plenty of writing in.

Now what happens, is that the footer is great for the main content but the left and right div's flow right over it.....

ive also managed to get this online so you can see for yourself

lukegw.x10hosting.com

cheers,

Luke

web_girl
Offline
newbie
Last seen: 12 years 25 weeks ago
Joined: 2009-04-24
Posts: 10
Points: 0

Hmmm...

Luke,
Your code is a mess!!!
1) the web does not use cm's as a unit of measure. use px for sizing objects, and ems for sizing text.
2) you can achieve margin-top, margin-right, margin-bottom, and margin-left with one declaration: margin. Same with padding.
3)You should do your positioning in CSS not in your html...

As for your footer...
http://tutshelf.com/the-art-of-css-positioning/
take a look at this for positioning in css.

lukegw
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2009-04-18
Posts: 7
Points: 0

ok, so what do you recommend

ok, so what do you recommend i do from here?

i tried that link but it says service unavailable

as you can see, i dont spend much time using css at all lol

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

web_girl wrote: 1) the web

web_girl wrote:

1) the web does not use cm's as a unit of measure. use px for sizing objects, and

You sure about this? I'd have to challenge that. Its uncommon practice, but will work.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 34 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

"cm" is an allowed

"cm" is an allowed measurement in CSS, but should probably never be used.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

css-helper
Offline
Enthusiast
UK
Last seen: 11 years 42 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Is this more useful help?

Others have said it and I endorse it: your code is a mess so let's not start with that. I've attached an example of one way you can achieve full width header, full width footer and three columns between. Save the testhtml.txt as test.html and save the testcss.txt as text.css. Load the test.html file. Is that the effect you wanted? If so, points to note about the example code and yours:

1. Yours was riddled with

's and you did not have the same number of closing

's. This will invariably mess up any attempt to get a page working as intended. To help control this, take pains to indent lines as in the example html given.
2. Some other HTML tags were not closed either. See comment above.
3. Strictly speaking it is not necessary to put a semi-colon at the end of every css declaration as in color: #f00; but if you do not and at some point change the order of your declarations so that the one without the semi-colon is no long the last in a declaration block, your css will mess up good and proper. It is good practice to ALWAYS put a semi-colon at the end of every declaration.
4. Decide on a style for how to write your css blocks of code. You can see my preferences in the example offered.
5. Try to keep all styling completely out of the HTML code and put it all into an external stylesheet.
6. Make sure you have a valid doctype right at the top of your page.

There's a lot more to do (e.g. cross browser compatibility) but heh, one step at a time! Hope the attachments help
Regards
css-helper

AttachmentSize
testcss.txt 888 bytes
testhtml.txt 883 bytes

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================