Page layout question

[gjh42]

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.

<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:

<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.

[r1formetoo]

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.

[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;}

Adjust numbers as desired.

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:

<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>

[r1formetoo]

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

[r1formetoo]

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;}

Adjust numbers as desired.

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:

<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

[gjh42]

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.

[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.

[r1formetoo]

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

[r1formetoo]

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

[gjh42]

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.