Forums / Templates, Stylesheets, Page Layout / Header & Footer to fit Browser Width

Header & Footer to fit Browser Width

Views: 1,433

Results 1 to 6 of 6
9 Aug 2011, 9:59 AM
#1
jagall avatar

jagall

Zen Follower

Join Date:
Mar 2011
Location:
Ireland
Posts:
286
Plugin Contributions:
0

Header & Footer to fit Browser Width

Hi I have searching relentlessly to find solution to this. Trying to have both header background image stretch to fit browser window and sticky footer for the bottom, thanks to earlier thread http://www.zen-cart.com/forum/showthread.php?p=1054486#post1054486 footerwrapper seems to be working but also using the Footer Menu contribution and this doesn't seem to sit inside this footerwrapper. Nor can I get header working either and template is slightly off. Just wondering for beginners like me is there a an easier way to do this getting tied up in knots??? thanks in advance for any help

9 Aug 2011, 10:50 AM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Header & Footer to fit Browser Width

We'll probably need to see the site to advise.

9 Aug 2011, 11:05 AM
#3
jagall avatar

jagall

Zen Follower

Join Date:
Mar 2011
Location:
Ireland
Posts:
286
Plugin Contributions:
0

Re: Header & Footer to fit Browser Width

stevesh:

We'll probably need to see the site to advise.

sorry, here is link .
Still WIP so but the recent changes I made as advised in the other thread seems to offset the template. thanks

9 Aug 2011, 11:40 AM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Header & Footer to fit Browser Width

I don't understand the question about the header. The left column is pushed out because of the red part here (in stylesheet.css):

#navColumnOne {
position:relative; /* ie needs this to show float /
float:left;
margin-left:-27%; /
note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_LEFT /
margin-right:1px; /
makes element 1px smaller than width otherwise won't push footer down */
}

9 Aug 2011, 4:04 PM
#5
jagall avatar

jagall

Zen Follower

Join Date:
Mar 2011
Location:
Ireland
Posts:
286
Plugin Contributions:
0

Re: Header & Footer to fit Browser Width

Thanks stevesh, I have changed this. but still need to figure out how to get footer menu within the footer and to make it stick to the bottom of browser. I want my menu to be at the top of template and the logo and text not to expand with browser. I have had some of this working at different stages but not all of it together. Using the following files
stylesheet.css
footermenu.css
footer.php
tpl.main.page

I'm just not sure where to place the coding.

9 Aug 2011, 8:34 PM
#6
jagall avatar

jagall

Zen Follower

Join Date:
Mar 2011
Location:
Ireland
Posts:
286
Plugin Contributions:
0

Re: Header & Footer to fit Browser Width

jagall:

Thanks stevesh, I have changed this. but still need to figure out how to get footer menu within the footer and to make it stick to the bottom of browser. I want my menu to be at the top of template and the logo and text not to expand with browser. I have had some of this working at different stages but not all of it together. Using the following files
stylesheet.css
footermenu.css
footer.php
tpl.main.page

I'm just not sure where to place the coding.

Hi have made some more progress on this got some info on this thread from kobra http://www.zen-cart.com/forum/showthread.php?p=980052
So Footer is stretched now, using background images stretched for header? not sure if best way.
The footer contents are stretched now too, just wonder what is the best way to keep them from in position under centre column and to stick to bottom of browser. Hopefully will hear back thanks.:lookaroun