Footer background problem [SOLVED]

[Dickie]

I know there must be a pretty simple way around my problem but I've hit a brick wall with this so I really need some help.

I would really like the footer background in my shop to run the whole width of the web page and not just the width of the center column. Without my footers content getting moved to the left of the page. If you would like to take a look at what I am working with then heres the link http://www.simplyhoodiesuk.co.uk

As I already use the page div for the top background image I wouldnt be able to use that for the footer.

If anyone has any ideas on this I will be grateful.

Dickie

[Pshopic]

Hi
The first thing, you have to exclude your footer div out of page div. Then you may give footer width 100%.
Also add this to your global.css, line 843:

#wrapperfoot {
   margin: 0 auto;
   width: 770px;
   text-align:left;
}

Result will be like in image.
hope it will help you

[Dickie]

Hi there,

Thank you so much for helping me with my issue, it works and looks perfect.

Cheers
Dickie

[ScubaLessonsInc]

Can you explain for the novice folk like me, just how to exclude it? what file gets edited, what line and what gets changed?

Sorry but I am not a programmer, just a designer and I want to do the same thing but with the header and footer of my page.

Thanks,

T

[HanPL]

Can you explain it step by step please. I'm beginner with programming and don't understand it.

[Carl Favre]

Hello HanPL,

 

Depending on the theme you are using the changes may be different.

 

Could you post your website url so we can check and tell you what to change ?

[HanPL]

http://presta.arte.vot.pl/

 

And all the presta files is from original presta theme. Image in footer must have width to all site.

[Carl Favre]

Well, in this case you also have to remove "footer" from the

<div id="page">

 

Currently, when you collapse all your div you have :

 

<div id="page">
<div id="header"></<div>
<div id="columns"></div>
<div id"=footer"></div>
</div>

 

Your footer is contained in the <div ="page"> and so the maximum width is limited by "page".

 

So to have your 100% width footer, you must do :

 

<div id="page">
<div id="header"></<div>
<div id="columns"></div>
 </div>

 <div id"=footer"></div>

 

Is it clear ?

[HanPL]

hmm... Can you tell me please in which file is this "page" div? In footer.tpl i have this:

*}
 {if !$content_only}
</div>
<!-- Right -->
<div id="right_column" class="column">
 {$HOOK_RIGHT_COLUMN}
</div>
  </div>
<!-- Footer -->
  <div id="footer">{$HOOK_FOOTER}</div>
 </div>
{/if}
</body>
</html>

 

there is no page Thank you for your patient

[Carl Favre]

Hi HanPL,

 

Take a look in header.tpl, you should find it here.

 

In footer.tpl you must have the </div> to close <div id="page">, so if you move it above <!-- Footer --> it should be good.

 

See below an example :

 

*}
 {if !$content_only}
    </div>
<!-- Right -->
    <div id="right_column" class="column">
	 {$HOOK_RIGHT_COLUMN}
    </div>
  </div>
 </div>
<!-- Footer -->
  <div id="footer">{$HOOK_FOOTER}</div>
{/if}
</body>
</html>

[HanPL]

I've done as you said but nothing change. I changed the footer css for width: 100% (i tried also 1920px). Can you check it out? Thank you all.

[Carl Favre]

Have you set "forced compilation" and "cache" to YES ?

 

Because there is no change on your page.

[HanPL]

IT'S ALIVE! Thank you all!

[Carl Favre]

Glad it works .

 

Could you add [solved] to your title ?

 

Thanks.

[HanPL]

but this is not my topic :/ Solved is in title original topic

[Carl Favre]

My bad ! I wrote too quickly and did not pay enough attention to the title and author .