Am unable to go about the footer of my site http://www.financialeducationcentre.co.ke wen I Ctrl+minus the footer moves to the left while the content and the page remains at the centre. Kindly help below is the CSS code #footer { margin-top: 2px; width: 895px; background: #696969 url(images/footer.png); border-top: 2px solid #696969; padding-top: 0px; padding-bottom: 10px; margin-right: auto; margin-left: auto; } #footercontent { width: 895px; height: 20px; margin-right: auto; margin-left: auto; } #footercontent ul { float: left; margin-bottom: 10px; } #footercontent ul li { float: left; margin-right: 20px; padding-right: 10px; border-right: 1px dotted #ddd; line-height: 1.5em; } #footercontent ul li a { float: left; display: block; color: #FFF; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; line-height: 1.5em; } #footercontent ul li a:hover { color: #FF8000; line-height: 1.5em; } -- Regards Yegon Victor
Using firebug i get the following styling style.css (line 894) #footer { background:url("images/footer.png") repeat scroll 0 0 #696969; border-top:2px solid #696969; *margin:4px 0 0 10px;* padding-bottom:10px; padding-top:0; width:895px; } The red coloured section using the format trbl (top right bottom left) indicates that the margin for the footer is set to 10px, equally note that from the design its a separate component from the content area. When viewed from firefox its located on the extreme left side of the window. There are 2ways to have everything in their right position - have both container and footer inside the same div and as such it would be positioned 10px from the left of the parent container - ensure there are no conflicting css rules for the same element 'coz what you have provided and what firebug presents seems there might be other rules applying to the same element. Either way you can have the margin set to auto or hard coded to certain values [not recommended] my observation. On Thu, Feb 10, 2011 at 12:08 PM, victor yegon <viktayeg@gmail.com> wrote:
Am unable to go about the footer of my site http://www.financialeducationcentre.co.ke wen I Ctrl+minus the footer moves to the left while the content and the page remains at the centre. Kindly help below is the CSS code
#footer { margin-top: 2px; width: 895px; background: #696969 url(images/footer.png); border-top: 2px solid #696969; padding-top: 0px; padding-bottom: 10px; margin-right: auto; margin-left: auto;
}
#footercontent { width: 895px; height: 20px; margin-right: auto; margin-left: auto; }
#footercontent ul { float: left; margin-bottom: 10px; }
#footercontent ul li { float: left; margin-right: 20px; padding-right: 10px; border-right: 1px dotted #ddd; line-height: 1.5em; }
#footercontent ul li a { float: left; display: block; color: #FFF; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; line-height: 1.5em; }
#footercontent ul li a:hover { color: #FF8000; line-height: 1.5em; }
-- Regards Yegon Victor
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
Alternatively, for the footer set margin: 4px auto 0 auto; auto on the left and right should centre it. 2011/2/10 Nd'wex Common <flexycat@gmail.com>
Using firebug i get the following styling
style.css (line 894) #footer { background:url("images/footer.png") repeat scroll 0 0 #696969; border-top:2px solid #696969; *margin:4px 0 0 10px;* padding-bottom:10px; padding-top:0; width:895px; }
The red coloured section using the format trbl (top right bottom left) indicates that the margin for the footer is set to 10px, equally note that from the design its a separate component from the content area. When viewed from firefox its located on the extreme left side of the window.
There are 2ways to have everything in their right position
- have both container and footer inside the same div and as such it would be positioned 10px from the left of the parent container - ensure there are no conflicting css rules for the same element 'coz what you have provided and what firebug presents seems there might be other rules applying to the same element. Either way you can have the margin set to auto or hard coded to certain values [not recommended]
my observation.
On Thu, Feb 10, 2011 at 12:08 PM, victor yegon <viktayeg@gmail.com> wrote:
Am unable to go about the footer of my site http://www.financialeducationcentre.co.ke wen I Ctrl+minus the footer moves to the left while the content and the page remains at the centre. Kindly help below is the CSS code
#footer { margin-top: 2px; width: 895px; background: #696969 url(images/footer.png); border-top: 2px solid #696969; padding-top: 0px; padding-bottom: 10px; margin-right: auto; margin-left: auto;
}
#footercontent { width: 895px; height: 20px; margin-right: auto; margin-left: auto; }
#footercontent ul { float: left; margin-bottom: 10px; }
#footercontent ul li { float: left; margin-right: 20px; padding-right: 10px; border-right: 1px dotted #ddd; line-height: 1.5em; }
#footercontent ul li a { float: left; display: block; color: #FFF; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; line-height: 1.5em; }
#footercontent ul li a:hover { color: #FF8000; line-height: 1.5em; }
-- Regards Yegon Victor
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- Gichingiri Kuria _________________________________________ www.website.co.ke / www.sokoletu.co.ke
Thanx guys On Thu, Feb 10, 2011 at 2:48 PM, Gichingiri Kuria <gmail@gichingiri.com>wrote:
Alternatively, for the footer set margin: 4px auto 0 auto; auto on the left and right should centre it.
2011/2/10 Nd'wex Common <flexycat@gmail.com>
Using firebug i get the following styling
style.css (line 894) #footer { background:url("images/footer.png") repeat scroll 0 0 #696969; border-top:2px solid #696969; *margin:4px 0 0 10px;* padding-bottom:10px; padding-top:0; width:895px; }
The red coloured section using the format trbl (top right bottom left) indicates that the margin for the footer is set to 10px, equally note that from the design its a separate component from the content area. When viewed from firefox its located on the extreme left side of the window.
There are 2ways to have everything in their right position
- have both container and footer inside the same div and as such it would be positioned 10px from the left of the parent container - ensure there are no conflicting css rules for the same element 'coz what you have provided and what firebug presents seems there might be other rules applying to the same element. Either way you can have the margin set to auto or hard coded to certain values [not recommended]
my observation.
On Thu, Feb 10, 2011 at 12:08 PM, victor yegon <viktayeg@gmail.com>wrote:
Am unable to go about the footer of my site http://www.financialeducationcentre.co.ke wen I Ctrl+minus the footer moves to the left while the content and the page remains at the centre. Kindly help below is the CSS code
#footer { margin-top: 2px; width: 895px; background: #696969 url(images/footer.png); border-top: 2px solid #696969; padding-top: 0px; padding-bottom: 10px; margin-right: auto; margin-left: auto;
}
#footercontent { width: 895px; height: 20px; margin-right: auto; margin-left: auto; }
#footercontent ul { float: left; margin-bottom: 10px; }
#footercontent ul li { float: left; margin-right: 20px; padding-right: 10px; border-right: 1px dotted #ddd; line-height: 1.5em; }
#footercontent ul li a { float: left; display: block; color: #FFF; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: -1px; line-height: 1.5em; }
#footercontent ul li a:hover { color: #FF8000; line-height: 1.5em; }
-- Regards Yegon Victor
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- Gichingiri Kuria _________________________________________ www.website.co.ke / www.sokoletu.co.ke
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- Regards Yegon Victor
participants (3)
-
Gichingiri Kuria -
Nd'wex Common -
victor yegon