Hello, I had some footer issue on my page I cannot figure out how could I insert a footer for copyright section at the buttom of my page. Below are my code:
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-family: Arial, Helvetica, sans-serif;
background: #FFFAFA;
}
a:link {
color: #1C1C1C;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #1C1C1C;
text-decoration: none;
} /* visited link */
a:hover {color: #0099CC} /* mouse over link */
a:active {color: #0099CC} /* selected link */
.seperators {color: white}/* Navigation selector */
#nav {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#nav a:link {
color: #FFFFFF;
text-decoration: none;
} /* unvisited link */
#nav a:visited {
color: #FFFFFF;
text-decoration: none;
} /* visited link */
#nav a:hover {color: #0099CC} /* mouse over link */
#nav a:active {color: #0099CC} /* selected link */
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#left .searchengine {
width: 180px;
margin: 10px;
background: #DCDCDC;
padding-bottom: 4px;
padding-top: 4px;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left img {width: 180px; margin: 10px;}
#left .leftbox {width: 180px; margin: 10px;}
#left .leftbox .leftheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
/* middle column */
#center {
position: absolute;
top: 155px;
width: 543px;
margin-left: 230px;
margin-right: 230px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #C8C8C8 ;
}
#center .middlenav{
width: 543px;
height: 20px;
background: #A80000;
border-bottom: 1.5pt solid #D2B48C;
}
#center .middlecontent{
width: 543px;
}
#center .middlecontent .title{
position: relative;
font-size: 12px;
font-weight: bold;
text-align: left;
margin: 5px;
background: #D3D3D3;
color: #708090;
border-top: 1.5pt solid #A80000;
border-bottom: 1.5pt solid #A80000;
}
#center .middlecontent .content{
position: relative;
margin: 5px;
font-size: 10px;
text-align: justify;
text-indent: 5px;
}
/* right column */
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#right .rightbox {width: 180px; margin: 10px;}
#right .rightbox .rightheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
}
Here are the body of my html code:
8646Call me stupid but I don't understand your problem. Just put footer there where you need it. Does actual CSS disturb in it anyhow?Yes I done that and here's the result of it
8647Put your page up somewhere live. I don't have the time to reconstruct your site. Help us help you.I'm currently working on my local btw here's the zip file for it.8651Try adding this:
<div id="footer" style="position: float; text-align: center;">Copyright</div>
You can put the style stuff on the css page and remove the inline styling above:
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
position: float;
text-align: center;
}
Your index page (cleaned up) is attached. It's hard to get the correct layout as no images are included as well as the JavaScript files to which you have two links. As was said, it would be nice to actually see it online.
RonAs three major division divs are positioned absolute with respect to the page, they are out of the document flow and it is impossible to automatically position something below them.
Would recommend floating left column left, right column right, and let the centre column nestle naturally between the floats with side margins as wide as the floats. Would also recommend getting rid of the table layout above the divs......
It's hard to get the correct layout as no images are included as well as the JavaScript files to which you have two links.
Huh? - all the files are in the zip...
Cheers
GraemeI only unzipped the index.zip file which had only the index.html file in it. No images or JS files.
RonAll the folder and files are in the zip,...Sorry I missed the WEB-2007-0113-IE-MPWv2.0.zip file when I went through posts. Only looked at Attachment 8647/8647/8651. Did you try?:
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
position: float;
text-align: center;
}
I ask because it will be awhile before I get to this.
RonOkeyI'll check it out as soon as I arrive back homeAnd here's your suggestion look like
8688
Any help?!!Sorry for not getting back sooner. Attaching the HTML and CSS. Looked good in FF and IE 7.0. Hope Copyright was positioned where you wanted it, but you can play with the values on the CSS to adjust them anywhere on page.
RonAttaching the HTML and CSS.
Good grief ..... "fixing" a site which is fundamentally broken due to the excessive use of absolute positioning by using more absolute positioning is not really the way to go...Sorry, but site didn't appear broken to me once done. Instead of complaining about how I do it, provide the man with more positive help. At least I'm trying.
RonSorry, but site didn't appear broken to me once done.
Decrease the screen width and the right column overlaps the content, breaking the layout - increase the screen width and there is a massive gap between right column and content, again breaking the look - increase text size and you get text overlapping text, breaking the layout. While ever you are using absolute-positioning and fixed sizes for all elements, user interaction will most likely break the layout.
Attached zip file is my take on the site. In this, I used no absolute positioning, rather letting everything flow more naturally. By specifying the left cloumn before the right column and that before the centre content in the html, the outer columns can then be floated whilst the centre content will nestle fluidly between them. By looking for logical groupings, and styling elements directly where possible, a large reduction in unnecessary divs, id's, and classes has been achieved, considerably simplifying both the html and css. The site is also completely fluid with different screen resolutions and user text size preferences, and makes more sense semantically to screen readers and search engines. Oh, and the footer (which was the whole point of this thread) stays at the bottom no matter what content is present.
It will also be noticed that I used a more appropriate doctype and encoding, and that I also removed the no-right-click script - these scripts should never be used as they interfere with the user's browser interaction (such as cjhoosing where links open via the right click). I am also not fond of status bar scripts, but have left this one as it does not appear to interfere with display of link targets.
Cheers
GraemeWow, Thankz...You had a great respond, I posted to different forum and I get the one I wanted too...Yes, I'll be noting what you have said
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-family: Arial, Helvetica, sans-serif;
background: #FFFAFA;
}
a:link {
color: #1C1C1C;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #1C1C1C;
text-decoration: none;
} /* visited link */
a:hover {color: #0099CC} /* mouse over link */
a:active {color: #0099CC} /* selected link */
.seperators {color: white}/* Navigation selector */
#nav {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#nav a:link {
color: #FFFFFF;
text-decoration: none;
} /* unvisited link */
#nav a:visited {
color: #FFFFFF;
text-decoration: none;
} /* visited link */
#nav a:hover {color: #0099CC} /* mouse over link */
#nav a:active {color: #0099CC} /* selected link */
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#left .searchengine {
width: 180px;
margin: 10px;
background: #DCDCDC;
padding-bottom: 4px;
padding-top: 4px;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left img {width: 180px; margin: 10px;}
#left .leftbox {width: 180px; margin: 10px;}
#left .leftbox .leftheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
/* middle column */
#center {
position: absolute;
top: 155px;
width: 543px;
margin-left: 230px;
margin-right: 230px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #C8C8C8 ;
}
#center .middlenav{
width: 543px;
height: 20px;
background: #A80000;
border-bottom: 1.5pt solid #D2B48C;
}
#center .middlecontent{
width: 543px;
}
#center .middlecontent .title{
position: relative;
font-size: 12px;
font-weight: bold;
text-align: left;
margin: 5px;
background: #D3D3D3;
color: #708090;
border-top: 1.5pt solid #A80000;
border-bottom: 1.5pt solid #A80000;
}
#center .middlecontent .content{
position: relative;
margin: 5px;
font-size: 10px;
text-align: justify;
text-indent: 5px;
}
/* right column */
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#right .rightbox {width: 180px; margin: 10px;}
#right .rightbox .rightheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
}
Here are the body of my html code:
8646Call me stupid but I don't understand your problem. Just put footer there where you need it. Does actual CSS disturb in it anyhow?Yes I done that and here's the result of it
8647Put your page up somewhere live. I don't have the time to reconstruct your site. Help us help you.I'm currently working on my local btw here's the zip file for it.8651Try adding this:
<div id="footer" style="position: float; text-align: center;">Copyright</div>
You can put the style stuff on the css page and remove the inline styling above:
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
position: float;
text-align: center;
}
Your index page (cleaned up) is attached. It's hard to get the correct layout as no images are included as well as the JavaScript files to which you have two links. As was said, it would be nice to actually see it online.
RonAs three major division divs are positioned absolute with respect to the page, they are out of the document flow and it is impossible to automatically position something below them.
Would recommend floating left column left, right column right, and let the centre column nestle naturally between the floats with side margins as wide as the floats. Would also recommend getting rid of the table layout above the divs......
It's hard to get the correct layout as no images are included as well as the JavaScript files to which you have two links.
Huh? - all the files are in the zip...
Cheers
GraemeI only unzipped the index.zip file which had only the index.html file in it. No images or JS files.
RonAll the folder and files are in the zip,...Sorry I missed the WEB-2007-0113-IE-MPWv2.0.zip file when I went through posts. Only looked at Attachment 8647/8647/8651. Did you try?:
#footer {
clear: both;
width: 100%;
height: 20px;
color: red;
position: float;
text-align: center;
}
I ask because it will be awhile before I get to this.
RonOkeyI'll check it out as soon as I arrive back homeAnd here's your suggestion look like
8688
Any help?!!Sorry for not getting back sooner. Attaching the HTML and CSS. Looked good in FF and IE 7.0. Hope Copyright was positioned where you wanted it, but you can play with the values on the CSS to adjust them anywhere on page.
RonAttaching the HTML and CSS.
Good grief ..... "fixing" a site which is fundamentally broken due to the excessive use of absolute positioning by using more absolute positioning is not really the way to go...Sorry, but site didn't appear broken to me once done. Instead of complaining about how I do it, provide the man with more positive help. At least I'm trying.
RonSorry, but site didn't appear broken to me once done.
Decrease the screen width and the right column overlaps the content, breaking the layout - increase the screen width and there is a massive gap between right column and content, again breaking the look - increase text size and you get text overlapping text, breaking the layout. While ever you are using absolute-positioning and fixed sizes for all elements, user interaction will most likely break the layout.
Attached zip file is my take on the site. In this, I used no absolute positioning, rather letting everything flow more naturally. By specifying the left cloumn before the right column and that before the centre content in the html, the outer columns can then be floated whilst the centre content will nestle fluidly between them. By looking for logical groupings, and styling elements directly where possible, a large reduction in unnecessary divs, id's, and classes has been achieved, considerably simplifying both the html and css. The site is also completely fluid with different screen resolutions and user text size preferences, and makes more sense semantically to screen readers and search engines. Oh, and the footer (which was the whole point of this thread) stays at the bottom no matter what content is present.
It will also be noticed that I used a more appropriate doctype and encoding, and that I also removed the no-right-click script - these scripts should never be used as they interfere with the user's browser interaction (such as cjhoosing where links open via the right click). I am also not fond of status bar scripts, but have left this one as it does not appear to interfere with display of link targets.
Cheers
GraemeWow, Thankz...You had a great respond, I posted to different forum and I get the one I wanted too...Yes, I'll be noting what you have said