Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Automatically scale header to fit browser?


Trout69

Recommended Posts

HI All,

 

I'm trying to figure out how to automatically scale the header to fit the customers browser, so the site is not pushed off center. I installed the fixed width with CSS contribution, but my store was still off centre due to my installation of wolfen featured sets...just couldnt seem to squash it enough i think.

 

Is there any way to just condense the header...similar to the way the breadcrumb moves when the browser window is re-sized?

 

I don't mind if the images are resized when this happens as long as they scaled down in ration to the original size. Any help would be great.

 

Best Regards

 

Donna

Link to comment
Share on other sites

You need to resize the image yourself to the lowest size and then add background filler so the logo still looks good at higher resolutions.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

All of My Addons

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

You need to resize the image yourself to the lowest size and then add background filler so the logo still looks good at higher resolutions.

 

Jack

 

Hi Jack, thanks for your response...can you possibly elaborate a bit...

 

what do you mean by background filler? The smallest size of the images, is that the smallest i want them to display for all browsers?

 

Apologies for my ignorance.

 

Best Regards

 

Donna

Link to comment
Share on other sites

Let's say you make your image 770x150. When someone looks at your site, it will appear fine if they are using 800x600 screen resolution. But if they are using a higher resoltution, your logo will only cover part of the screen and there will be blank spots to the sides of it (assuming a centered logo). To fix that, you add code to fill in the background so that it blends in with the logo. On a 800x600 screen, nothing happens. But on larger screens, the background is filled in giving a better appearance. Of course, it depends on your logo. You may not be able to blend it with a color.

 

The above assumes your shop expands to fill the whole page, no matter the resoltuion. If you install the center shop contribution, it will make your shop look the same for all resolutions.

 

By the way, there's no need to apologize. We have all been there, myself included. If the above doesn't clear it up, just keep asking.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

All of My Addons

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

Thanks jack,

 

If you don't mind could you have a quick look at the header of my store and just let me know how it looks to you? (Its an adult store tho so its ok if you do not wish to). I have asked people to review it in teh review forum, but no-one seems to want to take me up on teh offer so i'm trying to figure out the issues by my self...lol.

 

Best Regards

 

Donna

Link to comment
Share on other sites

The logo is too wide causing the page to have to be scrolled quite a bit on an 800/600 screen. I think I would reduce the size of some of the images to each side of the text in the logo and stagger them so that it appears some are farther away than others. That way you can reduce the width of the header, hopefully enough to make it fit.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

All of My Addons

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

The logo is too wide causing the page to have to be scrolled quite a bit on an 800/600 screen. I think I would reduce the size of some of the images to each side of the text in the logo and stagger them so that it appears some are farther away than others. That way you can reduce the width of the header, hopefully enough to make it fit.

 

Jack

Thanks Jack...I'll look into staggeringing...at present i have reduced the aount of white space from around the images and scaled down the logo slightly...i'm having a problem now with centering the header, the main logo apears to be to the left slightly rather than in the middle. Heres my code, any sugesstions on how i can fix it?

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="header">
<script language=JavaScript 
src="hearts.js" type="text/javascript"></SCRIPT>
<td valign="middle"><td align="left"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerleft1.gif', 'LadyLoving.com') . '</a>'; ?>
<td valign="middle"><td align="left"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerleft2.gif', 'LadyLoving.com') . '</a>'; ?>
<td valign="middle"><td align="left"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerleft3.gif', 'LadyLoving.com') . '</a>'; ?>
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'ladyloving.gif', 'LadyLoving.com') .'</a>'; ?></td>
<td valign="middle"><td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerright1.gif', 'LadyLoving.com') . '</a>'; ?>
<td valign="middle"><td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerright2.gif', 'LadyLoving.com') . '</a>'; ?>
<td valign="middle"><td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'headerright3.gif', 'LadyLoving.com') . '</a>'; ?>
</td>
</tr>
</table>

 

Regards

 

Donna

Link to comment
Share on other sites

The code has many mistakes in it. Wherever you see

<td valign="middle"><td align=

change it to

<td valign="middle" align=

and then you need to close those with a </td>. That may not fix your problem but it needs to be changed before you can work on it since it will throw off the display.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

All of My Addons

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

Thanks Jack, i noticed a deliberate mistake and figured out why the logo wasn't centering while i was making teh corrections. Thanks for your help...

 

Best Regards

 

Donna :o)

Link to comment
Share on other sites

Just as an idea!

 

if you made your banner into 3 sections, you could set the table widths to a percentage and then set the banners as background images so the wider the resolution, more of the banner is shown.

 

If you did that for the left and right cell but displayed the middle one as you usually would, you can get that centered but have the left and right ones kind of dynamic.

 

It would be trial and error until you had them displaying correctly but would work, I just tried it. You could go up to 1900 wide, to cater for the show offs. :D

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...