Header Problem

**dscott1966** · 21 Nov 2006, 08:54 PM

Originally Posted by kobra

Nice description, but I or we have no idea what you are working with looks like, or what you have done nor precisely what it is that you want to acheive.

Have a url??

If you take a look at my site:

http://citynights.no-ip.info/bpconnect/

and take a look at it in different screen resolutions you will see that it is not functioning properly it works ok in 1024x768 because that is what my screen is set for but if you look at it in say 800x600 it does not resize itself to that resolution where you can see everything and if you go to a resolution higher than 1024x768 there is a white area on the right hand side.

So what i'm getting at is how do i make the header so it will fit in every screen resolution size. I read something that i would have to slice the images and insert the HTML code. But how and where would i do that. Or if someone can explain to me how to accomplish making it fit to other screen sizes.

Hope i explained this correctly. Because it is driving me crazy. Because my client is wrried about this.

**kobra** · 22 Nov 2006, 10:17 AM

What you have is a single image with the dimemsions of 1008x145px.

As you have defined this as a static size it can not auto resize - it is the size that it is.

You and your client will have to re-think these graphics to even have a chance at a fluid header. The total sum of the individual images can not be greater than the width of the lowest resolution that you want displayed correctly.

The basic concept for you is to create a black background color for the header area. This will be blank and not have any images. You then create or break up the images that you currently have into single images. One of these might be named logo.gif and you can place it with the default code for a logo. The others will have to be added to the code to display inline. They all should be as narrow as possible to allow fitting the lowest resolution.

By doing it this way, each image will display on a black background individually and this background will expand as the resolution increases

**dscott1966** · 22 Nov 2006, 04:38 PM

Ok i understand to a point on what your saying. but how would i place the other images in the header so there inline with each other and where would i code this at so the other images show.

I know im sounding stupid right now but im just trying to learn a little bit so i hope you will be patient with me.

Thank you for your help

**kobra** · 23 Nov 2006, 01:23 AM

Have a look at includes/templates/template_default/common/tpl_header.php and do not edit this file directly. Make a copy and place it in your template override directory.

**dscott1966** · 23 Nov 2006, 03:23 AM

The override directory would that be my common folder. by any chance.

**dscott1966** · 23 Nov 2006, 04:37 AM

I thank you sir Kobra You have came through again that was all i needed was a point in the right direction and i figured it out. Again i will say you are a valuable asset to zen cart family.

So i will go through the steps that helped me get through this head banging situation that i was going through for those who are new and will experience the same problem.

Follow Kobras instructions in this thread first of all.

THen i down loaded the new header mod from the download section which gave me a look at where i needed to past my code. It used a flash file code.

Then you need to create your image in photoshop and make it the size that you need

Then slice the image into into two sections one slice will be the whole image and the second one will be a small horizonal slice in the right corner so now you will end up with two slices.

Then do a save for web and make sure in the save type you have Html and images.

Open the Html file and you only need the part that starts with <body bg color all the way down to .

Then after that go to your tpl_header.php file and past the code between <div id="logoWrapper"> and the <div id="logo"> it should look like this:

<?php
?>

<div id="logoWrapper">
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="100%" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="includes/templates/classic/images/logocopy_01.jpg" width="100%" height="125" alt=""></td>
<td>
<img src="includes/templates/classic/images/logocopy_02.jpg" width="100%" height="125" alt=""></td>
</tr>
</table>

<div id="logo">

Then change the <img src> to where the images are on your site

after all that change your width to 100% in all three places

Then put your two images in the folder for your template images mine was includes/templates/classic/images

Then i went to my css file and took out the background image url in the #logowrapper . The reason i did that it showed up twice in the header.

That was what i did to get it to work and that was for IE. I dont know how it will look in firefox hope it will be ok. but i really needed it for IE.

But i give kobra all the praise for steering in the right direction.

Thank you Kobra.

**Three Sisters** · 28 Nov 2006, 06:46 PM

I used this tread to come up with something similar. I didn't want to use a table though, so I placed two images and aligned the one left and the other right and changed the #logowrapper background on the custom stylesheet. It worked great.

My only question for you Professional Zenners is this: Is is OK to just add html to the php pages? I don't know a thing in the world about php, but I want to learn and I want to do this right. There wouldn't be a more "proper" way of calling these images, would there?

But hey, dscott1966, thanks a bunch for your detailed post. It gave me the boost I needed to get a similar thing done!

Smiles,
Allison
Three Sisters Fabric

Thread: Header Problem

Thread Tools

Search Thread

Display

Hybrid View

Re: Header Problem

Re: Header Problem

Re: Header Problem

Re: Header Problem

Re: Header Problem

Re: Header Problem

Re: Header Problem

Similar Threads

Header problem in IE

header problem in IE

Header Problem

Header Problem

Posting Permissions