Footer problem.

by sonyman November 26th 2014, 12:44 am

I'm not sure how to do this, but the width of the footer is the same as the page itself, and I can't get it to be independent on how long the width is as it is always the same as the top. I want the width of the footer to fit the entire width of the page regardless of monitor size. Thanks.

Site: http://fjotest.forumotion.com/

Example: http://prntscr.com/5a60mv

Footer image: https://2img.net/h/i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original

Page width :

Code:: #wrap { width: 83%; height: 100%; margin: 0px auto; background-color: transparent; border: 1px solid transparent; padding: 5px; }

page-footer:

Code:: #page-footer { background-image: url('http://i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original'); background-position: center; height:150px; width: auto; }

by _Twisted_Mods_ November 26th 2014, 6:49 am

try using !important on the end

example

Code:: #page-footer { ï¿½ï¿½background-image: url('http://i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original')!important; ï¿½ï¿½background-position: center!important; ï¿½ï¿½height:150px!important; ï¿½ï¿½width: auto!important; }

by Mati November 26th 2014, 8:33 am

If that doesn't work Please try this.

Code:: #page-footer { background-image: url("http://i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original"); background-position: center center; height: 150px; width: auto; margin-top: -53px; }

by sonyman November 26th 2014, 2:55 pm

_Twisted_Mods_ wrote:try using !important on the end

example

Code:
#page-footer { ï¿½ï¿½background-image: url('http://i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original')!important; ï¿½ï¿½background-position: center!important; ï¿½ï¿½height:150px!important; ï¿½ï¿½width: auto!important; }

Mati™ wrote:If that doesn't work Please try this.

Code:
#page-footer { background-image: url("http://i534.photobucket.com/albums/ee346/luckyduduhead1/footer.png~original"); background-position: center center; height: 150px; width: auto; margin-top: -53px; }

None of those css codes fixed it, when I tried it, it just moved the footer image a little bit but still was the same width of the page body, and didn't change. Even when using !important

by _Twisted_Mods_ November 26th 2014, 5:25 pm

you do realize that hiding the footer links is against TOS .. so i cant help you anymore till you put them back

by **SLGray** November 26th 2014, 6:29 pm

You need to remove whatever you are using to hide the footer links. You are breaking the Terms of Service. You can only use credits to remove the footer links. Even using credits does not remove all the footer links which have to remain.

by sonyman November 26th 2014, 7:56 pm

SLGray wrote:You need to remove whatever you are using to hide the footer links. You are breaking the Terms of Service. You can only use credits to remove the footer links. Even using credits does not remove all the footer links which have to remain.

I indented the links to the side of the page temporarily so I can actually see how I am going to place the bar, then after i'm done i'm going to place the links on top of the bar where I like it. But that's the reason I came here for help anyways.

My priority is placing my footer bar where I like it first, i'll put them back when i'm done placing my image. That forum drives no traffic and is only visited by bots and is used primarily for my knowledge of CSS coding.

Sorry for that.

by **SLGray** November 26th 2014, 8:12 pm

I believe you will have to modify the footer template.

by sonyman November 26th 2014, 10:02 pm

SLGray wrote:I believe you will have to modify the footer template.

Hmm, it seems when I go to Templates>General, all I see is overall_footer_begin and overall_footer_end, which both seem to only have anything to do with the footer links and not the actual size/width of the footer box. Unless i'm missing something. scratch

by _Twisted_Mods_ November 27th 2014, 1:23 am

Code:: #page-body {width: 83%; margin-right: auto; margin-left: auto;} #wrap {width: 100%;}

by sonyman November 27th 2014, 3:50 am

_Twisted_Mods_ wrote:
Code:
#page-body {width: 83%; margin-right: auto; margin-left: auto;} #wrap {width: 100%;}

Thanks so much, this helped. Just one issue. The code seems to increase the width of the entire page just a bit to the point where a scroll bar is needed to go left and right and I couldn't fix it using my own knowledge. Other than that, thanks Twisted. Smile

The footerlinks also have been restored

by _Twisted_Mods_ November 27th 2014, 3:53 am

#wrap {width: 98%;}

by sonyman November 27th 2014, 4:08 am

_Twisted_Mods_ wrote:#wrap {width: 98%;}

Thanks,

Twisted mods solved my problem.

by _Twisted_Mods_ November 27th 2014, 4:12 am

on ur portal some of the widgets overlay each other ..you can adjust to site in portal management

by sonyman November 27th 2014, 4:27 am

_Twisted_Mods_ wrote:on ur portal some of the widgets overlay each other ..you can adjust to site in portal management

Are you sure? On my screen everything is perfectly fine. That's odd. That's going to be an issue though if other people see it. Is it the code you gave me?