Static body for resizing (How to keep the body from sliding and moving when resizing)

Well, I don't know if I searched for the right phrase or not but here is the issue. I would like to *** a tag somewhere in the css that creates a static body.

When the page is resized (usually when it is minimized to a certain point) the body moves over my background. The header remains and so does te background...but the body slides.

http://www.historicalpreservation.org/store/

Many thanks.

Can you describe this action in a bit more detail?

I looked at your link but can't grasp what it is that you are referencing

Press the 'restore down' button on your browser and then resize the browser so it is smaller on the screen. The store body (the section below the header and in between the black bars slides. Can this be changed so it does not move at all?

Let me know is that helps.

Thanks again kobra.

I'm wondering if this is a margin issue. I have the margin on auto because I want it centered.

Should there be another margin tag inserted or edited in the css to keep it a certain distance from the border when resizing?

Or is there another command other than "auto" than I can use to center my store body. (center didn't work)

If I am see what it is that youare concerned with I am guessing that you are designing and using IE to do this with.

In FireFox there is a border alignment issue even at full screen. It appears that you have worked around the single main table that is designed to contain all elements in the page or mainWrapper and added/changed with tables of your own and these are not contained in the mainWrapper and so do not move as a unit.

In addition, check your page validation at http://validator.w3.org/ as there are many errors ober and above just a margin issue. Then convert to the classic template and check as this should report as valid.

IE is quirky enough and not used by most designers but only to verify that the IE quirks are addressed.

The table you have at the top of the page is outside the mainWrapper so its not affected by the margins applied to the mainWrapper. The bigger problem is that when you created the table you cut and pasted all of the code including the head, html, body tags so basically the structure of your page looks like this:```

Where did you put the code for the top table? I would have put that table into the headerWrapper or wrap the page in an extra div so you can position it as one large block.

I placed the top table (this is the main table header that is consistent throughout my site) in the tpl_main_page.php file located in the common sub-folder in the templates area.

I pasted the following code <?php include ("http://www.historicalpreservation.org/store/index_header.html"); ?> which directs a pages to theat table (header).

1. Where should I place my header tabe in order for it to remain in line with the store body?

Likewise, I guess i could create the header table in a php instead of html file. Will that solve the redundant head tag?

1. Where should I place my header tabe in order for it to remain in line with the store body?
   I would move it to the tpl_header.php file and order it there as required.
   The default file has basically 2 major items "branding" and "navigation" and nav is the first or at the top.

You will want to reoder the complete bof to eof of this and place branding before the nav entries.

Not seeing your exact code this might be all that is required as this sits within the default wrappers as I would retain the div and change the contents between them

BTW: nice layout design

hmmm...I have a feeling that this custom table header goes into tpl_header.php.

....but where?

hmmm...I have a feeling that this custom table header goes into tpl_header.php.

....but where?
Try looking at the current code between bof branding and eof branding. Ithink that this is where you can alter/add your code

I place my custom header in the tpl_header.php file after the <div id="headerWrapper"> and it appears as follows:

This seems to have done the trick, however, it appears my headerwrapper margin needs to be adjusted.

This must be a stylesheet issue.

Yet, the initial problem still remains.....The page body slides over the background bars when resized down.

Closer but no bananna...

You need to strip some of your html code out as this is not defining a page and requires not head tags, a point that barco pointed out. viewing your source this is want is contained currently in the header wrapper and of course the corresponding closing tags:

<!--bof-header logo and navigation display-->

<div id="headerWrapper">
<html>
<head>
<title>index</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor=#8A876F leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<table id="Table_01" width=1026 height=185 border=0 cellpadding=0 cellspacing=0 align="center">
```but earlier in ths view Zen Cart already has this:

Now, I can see that this was for a previous site and there are some spacer tables that are not required also both left and right your full table ends up being 1026 px wide and you have the main wrapper defined as 950px an initial mis-match, then for other reason from the original there are spacer tables on the left and right and tables for the left, right and top brown border and these are handled now by some other border definition and also are not needed in your header.

There remain many many non-valid coding errors in this also.

I see. Let me reorder, as you mentioned, and we'll see if that works.

Hopefully that will fix everything. Of course, I can hope all day but I still might be sitting here at the end of it:)

Any ideas why my custom header table is running a bit to the right. Seems like a margin problem somewhere.

btw: thank you. but Im more of an artist than a php coder I guess:)

You don't need to use an include here. You can stick html in an php file...it just needs to be place between a php closing tag (?>) and a php opening tag (<?php)
I would consider taking all of the table html and sticking it in the tpl_header.php like this:```

notice I only use the code from <table> to </table>

on the mainwrapper width:

-My custom header is 1026px in length.
-My main store body is 950px
This was done so the store would fit snug within the black bar background.

Should I recreate the header so it is 950px now that I am placing it within tpl_header.php?

I cn always adapt the background to fit with the design.

Didn't even cross my mind to do that one. I'll try it as well and see what happens.

Inserting the html for my custom table header directly into the tpl_header worked great. Now I'm going to readjust/design the custom header to 950px.

barco57:

You don't need to use an include here. You can stick html in an php file...it just needs to be place between a php closing tag (?>) and a php opening tag (<?php)
I would consider taking all of the table html and sticking it in the tpl_header.php like this:```

Looks like everything is working out as far as the layout. I'll have some tweaking and cleaning up to do now. Any idea if it is possible to put the background into the design without going through the css?

This is a great tutorial for placing custom headers. Many thanks to you both.