|
| |
|
|
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/
|
|
|
|
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
_____________________________
|
|
|
|
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/
|
|
|
|
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
_____________________________
|
|
|
|
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/
|
|
|
|
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/
|
|
|
|
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 >
_____________________________
|
|
|
|
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/
|
|
|
|
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....
_____________________________
|
|
|
|
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 >
_____________________________
|
|
|
|
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/
|
|
|
|
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/
|
|
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
|
|
|