Page layout question

gjh42:

Nope, the header ez-page links are black. You have all the right code in your stylesheet, but then you have this after it:```
a:hover,#navEZPagesTop a
{ color:#000; } /This bit of code makes the header ez pages links hover to the color code specified/

> a:hover controls all general link hover colors, but #navEZPagesTop a resets the basic ez-pages links to black. You need
> #navEZPagesTop a:hover {}
> to do what you are trying to do. The basic a:hover, does not need to be repeated here.

Hmm.  Now that one I would have never guessed.  There's very little difference between the two codes.  Okay, moving on.  Tell me what you think of my next idea.  I'm thinking that perhaps I should move the entire categories block upward and slightly to the right so that it connects onto the bottom of the logo.  I feel this would make the entire thing flow a bit more nicely kind of like at the page link below as I originally made this page.  What do you think and how much trouble would this be to do and where should I start?  I sure appreciate your help guys!

Ian
<http://mowerpartsupply.com/test6.html>

Easily done. Find in your stylesheet#headerWrapper { background-image:url(../images/head_bg_2.gif); background-repeat:no-repeat; background-position:center 29px; /* adjust as required */ height:191px; }Change the height, and add some new rules:```
#headerWrapper
{ background-image:url(../images/head_bg_2.gif);
background-repeat:no-repeat;
background-position:center 29px; /* adjust as required */
height:179px; }

#categories {margin-top: 0;}

#navColumnOneWrapper {padding-left: 17px;}

It's best to find any existing #categories and #navColumnOneWrapper rules and add the new properties there instead of creating whole new rules, so as to keep things in one coherent place.

gjh42:

Easily done. Find in your stylesheet#headerWrapper { background-image:url(../images/head_bg_2.gif); background-repeat:no-repeat; background-position:center 29px; /* adjust as required */ height:191px; }Change the height, and add some new rules:```
#headerWrapper
{ background-image:url(../images/head_bg_2.gif);
background-repeat:no-repeat;
background-position:center 29px; /* adjust as required */
height:179px; }

#categories {margin-top: 0;}

#navColumnOneWrapper {padding-left: 17px;}

> It's best to find any existing #categories and #navColumnOneWrapper rules and add the new properties there instead of creating whole new rules, so as to keep things in one coherent place.

Good news.  I got an idea and tried it and it worked!  The page is really coming together now.

Ok Glenn, I don't know how I managed but I made a change to get the categories box under the logo but when I widened the side boxes through my control panel that somehow reversed my changes. Now my side boxes are no longer directly underneath the logo as they were moments ago. Even after I changed the sidebox width back to the default 150 it still didn't revert back to looking like it did. What did I do?

Ian

Glenn, I have another good one for ya. I sure am glad you're taking your time to help me with this cause I'd be up a creek if I was by myself trying to edit this site. So, I don't know about you but I feel like the home page verbage is too jumbled up. It seems like all the words are too close together and that they need a bit more separation to be able to read them easily. So, I looked at the css tutorial below but I haven't quite figured out how to use that bit of code to my advantage. I tried putting it straight into dream weaver in the main_page.php file but that didn't work as I'm sure you already know. So, if I want to do this where should I look. I've been all through the stylesheet and found TONS of margins code but it seems like a needle in a haystack wondering which controls what I need to use.

Ian

Not sure what margin code you are talking about, but I do see that the main_page text is a bit cramped. I think a large part of that is that the intro text for your entire site is smaller than some of the other text on the page. It should be welcoming, easy to see and comfortable to read. For a start, add this to the end of your stylesheet:

#indexHomeBody #contentMainWrapper td p {font-size: 1.2em; text-align: left !important;}

I don't think the justify on a relatively narrow column is that easy to read - it makes word spacing vary tremendously from line to line.

It looks like the define_main_page.php code is messed up - the actual content is displaying outside of the #indexDefaultMainContent div and not subject to its styling, even though the HTML source looks correct in that area. The Dreamweaver styling may be responsible; it has resulted in style code embedded in the HTML instead of in the stylesheet (making it harder to modify), a table layout that does not serve a real purpose, and a lack of useful class tags and a superfluous "style13" class tag. Because of the hardcoded layout and styling, it is more difficult for me to try remote adjustments. Just for interest, can you post the entire content of define_main_page.php, in ```
[php] and [/php]

Ok Glenn, here is the code you asked for. I made the changes you suggested and its working in IE. I'm still waiting for FF to realize the changes.

<td bgcolor="#FFFFFF" height="19" align="left" valign="top" width="282"> <p align="justify"><span class="style13">W</span>elcome to Mower Parts Supply. We wholesale parts and accessories for Echo, Redmax, Stihl, Robin, Husqvarna, Shindaiwa, Toro, Exmark, Bunton, Snapper, MTD, Craftsman, Cub Cadet, Murray, Briggs and Stratton, Tecumseh, Kohler, Kawasaki, Honda, and many more. We stock a full line of belts, blades, air filters, lubricants, trimmer lines, rebuild kits, and OEM replacement parts. We are adding products to this web page frequently so if you need a part or accessory not found on our site please call our knowledgeable/friendly staff for assistance. We ship all orders via FedEx Ground at 5 p.m. central standard time; all orders received by 4 p.m. are likely to ship same day. </td> <td bgcolor="#FFFFFF" height="19" align="left" valign="top" width="294"><img src="http://www.mowerpartsupply.com/images/mower_blower_trimmer.gif" alt="pictures_of_lawn_equipment" width="280" height="300" /><br /> </td>

Ah yes, as for the margins. Surely there is a margin in my stylesheet that controls how close my text is to the categories box and how close it is to the bottom of the grass. Notice how right now there is a large block of white space between the text/photo and the grass/categories. I think it would be smart to move all that slightly up and to the left. What do you think? The template is finally getting very close to being finished. My next big task will be to take all the little logos at the bottom of the page http://mowerpartsupply.com/ and have them in the same place on my zencart page, though I haven't yet decided if they should be on every page or just the home page. I feel those logos give the site credit since they are all credible companies that MPS will do business with. What do you think?

Ian

The "margin" you are having trouble with is a table cell that encloses what should be the whole center column. The define page content is to the right of that on the page.

The problem with the code you posted is that it is not a complete table, but two table cells; since Zen Cart through v1.3.8 still has to use one layout table to make the three-column layout foolproof, these orphan cells drop into place in the table and take up space in a way they shouldn't. The immediate fix is to wrap the define page code in <table><tr> and </tr></table> tags.
The real fix is to get rid of the table and style code in define_main_page.php, replacing the <td> tags with <div id="welcomeText"> and <div id="partsImage"> tags. Then you can apply the exact styling you want in the stylesheet to #welcomeText and #partsImage, and they will be inside #indexDefaultMainContent as they should be.
You can get rid of some top spacing by adding to your stylesheet
h1#indexDefaultHeading {display: none;}

Ok, so what did I do wrong? I wasn't really sure how changing the code in that way was still going to set it up so that the text and picture would be in the right place. I gather I need to place a #welcomeText and #partsImage into my stylesheet but I can't find any #indexDefaultMainContent to list them under. Is #indexDefaultMainContent I'll need to add?

Ian

P.S. I'll talk to Jacob, the owner of this business, and let him know you get cost on anything you ever need like chainsaws, weed eaters, and so on.

When you switch from table to div code, you need to make sure you switch over all of the tags. You still have a mixture with </td> tags, which confuse the code and make it think the entire center section is ending before it should.```html

<div id="indexDefaultMainContent" class="content"><div id="welcomeText"> <p align="justify"><span class="style13">W</span>elcome to Mower Parts Supply. We wholesale parts and accessories for Echo, Redmax, Stihl, Robin, Husqvarna, Shindaiwa, Toro, Exmark, Bunton, Snapper, MTD, Craftsman, Cub Cadet, Murray, Briggs and Stratton, Tecumseh, Kohler, Kawasaki, Honda, and many more. We stock a full line of belts, blades, air filters, lubricants, trimmer lines, rebuild kits, and OEM replacement parts. We are adding products to this web page frequently so if you need a part or accessory not found on our site please call our knowledgeable/friendly staff for assistance. We ship all orders via FedEx Ground at 5 p.m. central standard time; all orders received by 4 p.m. are likely to ship same day. </td> <div id="partsImage"><img src="http://www.mowerpartsupply.com/images/mower_blower_trimmer.gif" alt="pictures_of_lawn_equipment" width="280" height="300" /><br /> </td> </div> ```It should look more like this:```html <div id="indexDefaultMainContent" class="content"><div id="welcomeText"> <p><span class="style13">W</span>elcome to Mower Parts Supply. We wholesale parts and accessories for Echo, Redmax, Stihl, Robin, Husqvarna, Shindaiwa, Toro, Exmark, Bunton, Snapper, MTD, Craftsman, Cub Cadet, Murray, Briggs and Stratton, Tecumseh, Kohler, Kawasaki, Honda, and many more. We stock a full line of belts, blades, air filters, lubricants, trimmer lines, rebuild kits, and OEM replacement parts. We are adding products to this web page frequently so if you need a part or accessory not found on our site please call our knowledgeable/friendly staff for assistance. We ship all orders via FedEx Ground at 5 p.m. central standard time; all orders received by 4 p.m. are likely to ship same day. </p></div> <div id="partsImage"><img src="http://www.mowerpartsupply.com/images/mower_blower_trimmer.gif" alt="pictures_of_lawn_equipment" width="280" height="300" /></div> </div> ```With #welcomeText and #partsImage being presumably unique identifiers in your whole site, you may not need to use #indexDefaultMainContent for anything. It is there if you want to manipulate the whole center section in some way.

If you want to make the opening "W" bigger like your original design, you could do

#welcomeText .style13 {font-size: 1.2em;}

and it would become 1.2 times the size of the paragraph text.

Well, I added the h1#indexDefaultHeading {display: none;} you spoke of to the bottom of my page but everything is still set far away from the bottom of the grass. Also, I assume I need to add something to my main page code so that it knows to break the text and photo up into two columns right? Right now the photo just displays underneath the text and of course that's now really what we want.

There are still other margins and paddings in operation. Give the text a width and float them:```
h1#indexDefaultHeading {display: none;}

#welcomeText {width: 260px; float: left; font-size: 1.2em;}

#welcomeText p {margin: 0; padding: 0;}

#productImage {float: left;}

You can delete this from your stylesheet as it does nothing any more:
#indexHomeBody #contentMainWrapper td p { font-size: 1.2em; text-align: left !important;}


It looks like you have duplicated the #indexDefaultMainContent div in define_main_page.php. 
You do not want to do this, as it is already set up by the external code.
define_main_page.php:```html
<div id="welcomeText">
      <p><span class="style13">W</span>elcome to Mower Parts Supply. We wholesale parts and accessories  for Echo, Redmax, Stihl, Robin, Husqvarna, Shindaiwa, Toro, Exmark,  Bunton, Snapper, MTD, Craftsman, Cub Cadet, Murray, Briggs and  Stratton, Tecumseh, Kohler, Kawasaki, Honda, and many more. We stock a full line of belts, blades, air filters, lubricants, trimmer lines, rebuild kits, and OEM replacement parts. We are adding products to this web page frequently so if you need a part or accessory not found on our site please call our knowledgeable/friendly staff for assistance. We ship all orders via FedEx Ground at 5 p.m. central standard time; all orders received by 4 p.m. are likely to ship same day. </p></div>
      <div id="partsImage"><img src="http://www.mowerpartsupply.com/images/mower_blower_trimmer.gif" alt="pictures_of_lawn_equipment" width="280" height="300" /></div>

Glenn, I fear I might be making a mistake with some of my other changes. Have a look at my add to cart button. I re-did it so the colors match my site a little better but I'm wondering if I've made a mistake by which folder it's in. The same can be said for the text I just added to my cart that says "Thank you for your business. For your convenience we accept all major credit cards. If you have any problems using our cart please feel free to call us at 662-895-3442." I've added that bit of text that appears when you add something to the cart. Is it in the wrong location too? Someone mentioned a while back that by locating these changes in the English folder, if I remember correctly, that I was setting myself up for failure because future updates would then erase my good work?

Ian

gjh42:

There are still other margins and paddings in operation. Give the text a width and float them:```
h1#indexDefaultHeading {display: none;}

#welcomeText {width: 260px; float: left; font-size: 1.2em;}

#welcomeText p {margin: 0; padding: 0;}

#productImage {float: left;}

> 
> You can delete this from your stylesheet as it does nothing any more:
> #indexHomeBody #contentMainWrapper td p { font-size: 1.2em; text-align: left !important;}
> 
> 
> It looks like you have duplicated the #indexDefaultMainContent div in define_main_page.php. 
> You do not want to do this, as it is already set up by the external code.
> define_main_page.php:```html
<div id="welcomeText">
      <p><span class="style13">W</span>elcome to Mower Parts Supply. We wholesale parts and accessories  for Echo, Redmax, Stihl, Robin, Husqvarna, Shindaiwa, Toro, Exmark,  Bunton, Snapper, MTD, Craftsman, Cub Cadet, Murray, Briggs and  Stratton, Tecumseh, Kohler, Kawasaki, Honda, and many more. We stock a full line of belts, blades, air filters, lubricants, trimmer lines, rebuild kits, and OEM replacement parts. We are adding products to this web page frequently so if you need a part or accessory not found on our site please call our knowledgeable/friendly staff for assistance. We ship all orders via FedEx Ground at 5 p.m. central standard time; all orders received by 4 p.m. are likely to ship same day. </p></div>
      <div id="partsImage"><img src="http://www.mowerpartsupply.com/images/mower_blower_trimmer.gif" alt="pictures_of_lawn_equipment" width="280" height="300" /></div>

I also tried making these changers earlier but it just messed up the page so I put it back to how it was. As of right now FF seems to be displaying the page the way I'd like to with my categories right underneath the logo and also with the rotating gif image to the right of my text. However, IE is not honoring either of these. Is it doing the same for you?

Ian

Any template or language files you change should be put in a /your_template/ folder; then they will be safe from upgrades. Wherever you see a /classic/ folder, you can make a /your_template/ folder, and save the files from say /includes/languages/english.php as /includes/languages/english/your_template/english.php.

I was getting page not found for a while, but ok now. Yes, I do see the page messed up in IE6. I believe this is primarily because of IE wanting to use a larger font size by default. If you can get IE to use the right font size, I think all the problems will disappear except for the gap under the logo. This is a common IE bug; the fix for it is to change a
<br class="clearBoth" />
to

<div class="clearBoth"></div> in the header code. Try it with the last break in tpl_header.php and see what happens.

Okay, so my add to cart button was located in
includes/template/template_default/buttons/english/
and I created a new folder at
includes/template/template_default/buttons/english/mower
with all the same cart images as before. Is that right? I didn't see a classic folder at all?........

Ian

gjh42:

I was getting page not found for a while, but ok now. Yes, I do see the page messed up in IE6. I believe this is primarily because of IE wanting to use a larger font size by default. If you can get IE to use the right font size, I think all the problems will disappear except for the gap under the logo. This is a common IE bug; the fix for it is to change a
<br class="clearBoth" />
to

<div class="clearBoth"></div> in the header code. Try it with the last break in tpl_header.php and see what happens.

Well, I tried the clearboth idea and that pretty much just lowered the logo a couple pixels so it no longer lined up with the header image. I'm all ears.....

Ian

OK, the main template folder works a bit differently from the general rule above. When you make an
/includes/templates/mower/ folder, you have the bas for all template files in that area. So you would copy images from /includes/templates/template_default/buttons/english/ to /includes/templates/mower/buttons/english/ and edit them there.

I don't have more ideas for fixing IE display...
I doubt this is the best way to do it, but you might use IE conditional comments to adjust font sizes - google for info.