navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Footer Positioning problem

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Footer Positioning problem
Page: [1]
 
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
Footer Positioning problem - 7/19/2004 16:19:50   
No it's not the same as Peters Problem, but i am having problems with footer positioning. Here's the stylesheet:

html, body { 
 margin: 0; 
 padding: 0; 
 text-align: center;
 background: #FFFFFF; 
 overflow-x: hidden;
}
#pagewidth { 
 width: 100%; 
 text-align: left; 
 min-width: 500px;
 margin-left: auto; 
 margin-right: auto; 
} 
#header { 
 height: 100px; 
 width: 100%; 
 background: #A5D38C; 
}
#miniheader { 
 height: 20px; 
 width: 100%; 
 background: #666666; 
}
#headershadow { 
 height: 20px; 
 width: 100%; 
 background: url(../images/drop.gif) repeat-x; 
}  
#leftcol {
 position: absolute;
 width: 180px; 
 top: 145px; 
 left: 5px;
}
#outer { 
 border:solid white 0px; 
 border-left-width: 180px;
 border-left-color: #FFFFFF;   	/* left column colour */ 
 border-left-style: solid; 
 border-right-width: 180px; 
 border-right-color: #FFFFFF;  	/* right column colour */ 
 border-right-style: solid; 
 background: #FFFFFF; 			/* center column colour */ 
 width: auto; 
 } 
#rightcol {
 position: absolute;
 width: 180px; 
 top: 145px; 
 right: 5px;
} 
#footer {
 position: relative;
 top: 10px;
 height: 50px; 
 width: 100%; 
 background: #A5D38C; 
 border-top: 1px solid #000000;
} 
#btt {
 position: relative;
 top: 10px;
 height: 20px; 
 width: 100%; 
 background: #FFFFFF;
} 
#inner {
 margin: 0;
 width: 100%;
}
#maincol { 
 position: absolute;
 top: 145px;
 left: 180px; 
 right: 185px;
 margin: 0 -8px 0 -2px; 
}
#outer>#inner {
 border-bottom: 1px solid #FFFFFF;
}
.clr {
 clear: both;
}
.content {
 padding: 5px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
} 
#header .content {
 padding-bottom: 0;
}
#headerimage {
 padding-bottom: 5px;
 padding-top: 10px;
}
.footertext {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 15px;
 font-size: 11px;
 font-weight: bold;
 color: #FFFFFF;
 text-align: center;
}
.btt {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding: 5px;
 font-size: 11px;
 font-weight: bold;
 color: #999999;
 text-align: center;
}
.btt a {
 color: #999999;
 text-decoration: underline;
}
.btt a:hover {
 color: #A5D38C;
}

/* ###################### OVERALL SETTINGS ###################### */
td, tr, p, div {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #333333;
}
ul {
 margin: 0px 0px 0px 0px;
}
hr {
 background: #CCCCCC;
 height: 1px;
 width: 100%;
}
/* ############## PATHWAY AND BOTTOM BUTTON BAR ############## */
.pathway {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #CCCCCC;
}
a.pathway:link, a.pathway:visited {
 color: #8CA0B4;
 font-weight: normal;
}
a.pathway:hover {
 color: #F0F0F0;
 font-weight: normal;
}

/* ################### MAIN AND SUB MENU SYSTEM ################### */
a.mainlevel:link, a.mainlevel:visited {
 color: #808080;
 font-weight: normal;
}

a.mainlevel:hover {
 color: #A5D30C;
}

table.moduletable th {
 font-size        : 11px;
  font-weight      : bold;
  color            : #000000;
  text-align       : center;
  background-color : #F0F0F0;
  width            : 100%;
}

table.moduletable { 
margin: 0px 0px 0px 0px; 
width: 95%; 
border-left: solid 0px #000000; 
border-right: solid 0px #000000; 
border-top: solid 0px #000000; 
border-bottom: solid 0px #000000; 
} 

.poll {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #666666;
  line-height      : 14px;
}

/* ###################### SECTION LISTING SETTINGS ###################### */
.sectiontableheader {
  background-color : #CCCCCC;
  color            : #779707;
  font-weight      : bold;
}

.sectiontableentry1 {
  background-color : #F0F0F0;
}

.sectiontableentry2 {
  background-color : #E0E0E0;
}

/* ###################### SMALL FONT SETTINGS ###################### */
.small {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #3366C0;
  text-decoration  : none;
  font-weight      : medium;
}

.smalldark {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : normal;
}

/* ###################### CONTENT PAGE SETTINGS ###################### */
.contentpane {
  background       : #FFFFFF;
}

.contentpaneopen {
  background       : #FFFFFF;
}

.contentheading, .componentheading {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : bold;
  color            : #A5D30C;
  text-align       : left;
}

.createdate {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #999999;
  text-align       : left;
}

/* ###################### FORMULAR SETTINGS ###################### */
.button {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-style       : normal;
  font-size        : 10px;
  font-weight      : bold;
  background-color : #F0F0F0;
  color            : #000000;
  border           : 1px solid #CCCCCC;
}

.inputbox {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #000000;
  background-color : #F0F0F0;
  border           : 1px solid #CCCCCC;
}

/* ###################### LINKS ###################### */
a:link, a:visited {
  font-size        : 11px;
  color            : #808080;
  text-decoration  : none;
  font-family      : Verdana, Arial, Helvetica, sans-serif;
}

a:hover {
  color            : #A5D30C;
  text-decoration  : none;
}

a.category:link, a.category:visited {
  color            : #333333;
  font-weight      : bold;
}

a.category:hover {
  color            : #A5D30C;
}

#search{
   position: absolute;
   left: 75%;
   top: 75px;
}

#date{
  position: absolute;
  top: 105px;
  width: 100%;
  text-align: right;
  color: #FFFFFF;
}

Here's the page: http://giomanach.wm-talk.com

Images etc are just temporaries. I'm converting layout from Tables to DIV layers. Any ideas on the problem?

Dan

_____________________________



c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 16:37:16   
in your styles for footer put clear: both;
this should take care of your problem.

< Message edited by c1sissy -- 7/19/2004 17:05:51 >


_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 16:50:12   
Is that with relative or absolute positioning? Doesn't seem to work:

#footer {
position: relative;
top: 0px;
height: 50px;
width: 100%;
background: #A5D38C;
border-top: 1px solid #000000;
clear: both;
}
#btt {
position: relative;
top: 10px;
height: 20px;
width: 100%;
background: #FFFFFF;
clear: both;
}

Dan

_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 17:03:01   
remove relative and see what happens. I'm just curious, I'm not sure if this will work or not.

also remove this <?xml version="1.0"?>

And if you have not done so, validate. both xhtml and css

then see what happens

also, remove this as it doesn't seem to make any sense to have a cleared div at the bottom of your page, this could be throwing off the clear both part of the footer div.

< Message edited by c1sissy -- 7/19/2004 17:09:19 >


_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 17:09:09   
Tried removing the positioning attribute before I cam back...it just chnaged the auto z-index. It dropped both DIV layers to the bottom.

Will get back to you in the morning, I need sleep

_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 17:10:35   
I added a few things before your post came up, we posted same time, check my post before yours.

Also, z index is for stacking things, I'm not sure you need the z index unless you are doing so.

Read a few tutorials on z index so that you have a better understanding of it.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 17:16:37   
What I meant by auto z-index is when I have position: relative; in there, you can see the footer on top, when you remove it, it drops down to background level, not down the page

Anyhoo....sleepy time

Dan

PS - must drop you a social call sometime soon:)

_____________________________




(in reply to c1sissy)
Donkey

 

Posts: 3869
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
RE: Footer Positioning problem - 7/19/2004 21:57:26   
Hey Dan,
You do appear to have the same problem that I had, but I was applying the footer in the wrong place so same effect, different cause.:)

I'm assuming that everything except the footer is in a container div (pagewidth?) I used that solution and it should work, try adding height:100%; to the container div.

Your footer div is in the right position in your layout and it is relatively positioned which is also what I did (for IE - fixed for FF etc) I also had float: left; in the footer div and no top value.

The only other thing which could be a problem is the position of your closing </divs> I haven't counted them in your html but as I understand it the footer div should be outside of the container div
I notice that you have 3 lose </div>'s below the footer div, try moving one of those above it, that may do the trick.

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 3:28:30   
Peter

The Footer is within the main content DIV, therefore the extra closing tags are necessary. Don't blame me for the XHTML...that's Marks doing. I'm just doing the CSS.:)

You see we're working on a project between us, more will be shown as the time comes, for now, let's get the CSS sorted.

I'll have a play with the DIVs coding later. May just do the trick

Cheers

Dan

_____________________________




(in reply to Donkey)
Donkey

 

Posts: 3869
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 3:36:39   
quote:

The Footer is within the main content DIV,
It might be worth dropping it below the main content div, that works for me.

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 6:49:45   
That didn't work either, but I now think me knows what the problem is. The top three divs have no positioning, they are just, "there", and the footer(s) are clinging to the bottom of them:)

Time to assign id's again

_____________________________




(in reply to Donkey)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 7:34:09   
I have to say that I think that donky is on the nose a bit also.

Have your footer div as a seperate div. Put your content divs into a container, and have your header as a div.

Float things, but don't give positions. Just float left and right and see what happens. If you have a center content div, just leave that as it is. I'm sure that you could go position relative, and add your pixel placement, but most likely you are going to need to use negative positioning if you do this.

And read about removing the prolog. That is the most important thing right now.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 7:34:48   
This is strange.

It refuses to move to the bottom of the DIVs. I have given all DIV layers positions etc, but still no luck. It now sits at the top of the page.

I've even put the two footer layers in their own DIV, without positioning at the mo, that's my next task

Dan

<edit>
Double Post!

Have removed Prologue and still same problem. All but the footer has absolute positions, does float have the attribute of bottom?No it doesn't bozo

Dan
</edit>

< Message edited by Giomanach -- 7/20/2004 7:41:52 >


_____________________________




(in reply to Giomanach)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 7:50:35   
Dont use absolute.

And dan, please, read some tutorials. I'm serious about it. Look up absolute tutorials and float tutorials and relative tutorials.

I think seriously that you don't understand positioning yet. You need a deep understanding of it.

Use float and the try float with relative, remove the prolog and keep it off the page, don't add it again.

do the divs like I suggested above.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 7:55:14   
Can I just make it clear. I didn't do the XHTML, I didn't put the prologue in, the culprit for that is markhawker.

I now have all of the content DIVs floated, no positioning, footer is at the bottom of the page, but it's not in the correct layout....

_____________________________




(in reply to c1sissy)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 8:07:59   
Sorted, Didn't want to,. but I have used negative figures for relative positioning

It works in IE6, but not the rest, I'll tweak it later for that, when i have the browsers in front of me, and not using browsercom.com


Dan

< Message edited by Giomanach -- 7/20/2004 8:19:43 >


_____________________________




(in reply to Giomanach)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 8:56:30   
quote:

ORIGINAL: Giomanach

Sorted, Didn't want to,. but I have used negative figures for relative positioning

It works in IE6, but not the rest, I'll tweak it later for that, when i have the browsers in front of me, and not using browsercom.com


Dan


Dan, negative positioning is recomended for this. Trust me, I have read about it :)

do the IE conditional statement. Now that you have it working in IE, copy and past the sheet you have now and work on tweaking it. Link the one style sheet with the IE conditional statment, and the one for the other browsers the normal way. I did post the IE conditional statment in here somewhere but if you can't find it let me know and I'll post it, or donkey will post it as he uses it all the time for his pages.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 9:02:01   
I'm sure I can find it Deb, may need a kick tho:)

Can you give Mark a kick on the XHTML/prologue thingy, as you know, I tend to hand code in HTML, not XHTML. He's the prologue kiddy, not me:)

I would ask M to, be he's AWL

Cheers

Dan

<edit>
Found it:
http://www.frontpagewebmaster.com/m-194046/tm.htm

I remember it 'cos we *argued* over it using JS or not lol

</edit>

_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 9:23:19   
Dan, I use xhtml and I don't use the prolog. It causes problems for some reason. Do a search on the prolog. Even gorilla stated that its not needed a while back when I questioned him on it. I forget what it does, but I know you should not use it all the time and only in certain cases. In this case, I don't think you need it.

As far as I know using the conditional statment is no different then using the voice thingie as a hack. You don't need javascript enabled as far as I know to have this work.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6091
Joined: 11/19/2003
From: England
Status: offline

 
RE: Footer Positioning problem - 7/20/2004 9:28:14   
quote:

I forget what it does,

Forces IE into quirks mode:)

I really should get back on track with learning XHTML properly, I read all of the w3schools tuts a while back and never took it any further lol.

At least I learned something today - always listen to your Mom, she's always right:)

_____________________________




(in reply to c1sissy)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Footer Positioning problem
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts