Eliminating wrap-arounds

Thanks so much for guidance.
I won't be able to respond immediately to this post since I have to do lots of testing to get the look that I need.
Will now restore the test site to defaults and test in a local site.
Will be back to this thread if ran into trouble.
Take care.

I achieved the look I need...but only in IE:(
http://www.haiswigs.com/index.php?main_page=product_info&products_id=2&zenid=3413e374ca34caa2da3db117ef213fdb
This is how I did it.
First, I deconstructed the mod already published in the downloads section, comparing it to the original file.
I found that it is a dated version of tpl_product_info_display.php, and hacked a lot to include tables.
More importantly, it places the additional images file right after product info.
So, then I checked your suggestion and found that it is based on a newer version of the file and includes a div that wraps it all up.
So I got the latest version of the file (1.3.7.1) and started hacking away on these basis: I should use the latest version of the file, I should use CSS and not tables, I should not use deprecated tags and it should be XHTML-compliant.
So, after testing, saw that I needed to include a <br class="clearBoth /> statement in the middle of the two files.
I also modified the Admin setting for Images to show additional images per row = 1.
Lastly, I created an id in the stylesheet by which the div should float left.
It works fine in IE, but Firefox shows an ugly kludge that I cannot fix.
I attempted:

1. floating additional images to left, it works but the text stays in the middle.
2. wrapping the product info description in a table, looks great in IE but even worse than without table in FF.
3. hacking the tpl_columnar_display.php as you suggested, but worse still, because of the br statement in the middle of the two files, and disruptive of the whole page.
   The only thing that I can think of, for now, is to turn text off, so I will be able to float additional images left, without the text showing in the middle and pushing the product info description to the right.
   So, how did you turn text off?

Testing on your site, I find that this works nicely to line up the additional images below your main image:```
#productAdditionalImages .additionalImages img {
float: left;
margin-left: 20px;
}

I eliminated the "larger image" text long ago by simply redefining it in /includes/languages/my_template/english.php:


  define('TEXT_CLICK_TO_ENLARGE', 'larger image');


  define('TEXT_CLICK_TO_ENLARGE', '');

When null, it is not displayed at all.

Thanks a lot for quick reply.
Yes, this style declaration will float additional images to left, and I can tweak the pixel amount.
I turned off text display, it really isn't the ideal solution for me, but we are trying to get it to work cross-browser.
Not yet there.
Something is still pushing the product info to the right, I don't think turning off text totally eliminated the problem.
Plus, the fact that it is not enclosed in a table causes it to wrap-around the images.

You never applied the styling in my example above, and that is an integral part of getting the layout to function.
The image wrapper needs a width, and the text parts all need margin-left:

#additionalImageWrapper {
    float : left; 
    width:200px;
    } 
h1#productName, h2#productPrices, #freeShippingIcon, #productDescription { 
    margin-left:210px;
    } 
h3#attribsOptionsText { 
    margin-left:210px;
    } 
.wrapperAttribsOptions { 
    margin-left:210px;
    }
```Adjust as you wish.

Hey Glenn,
Thanks again for the willingness to help.
I hate to give you a hard time but I have now uploaded all the style modifications you sent and still can't get the product info to the left.
I turned on text for you to see it more clearly, but it is the same with it turned off.
There is still something in the layout that is distorting the page.
Now, this only happens in Firefox, IE reacts to all this much more gracefully, so we have to target the way that browser renders this mod, IMHO.

Adding

#productAttributes { clear: both;}

will keep the "Please Choose" always below the add to cart box.

Other than that, I don't see anything really wrong with the page. What do you see as problems?

You can shrink the image wrapper width and the margin, if you wish to give more room for the text.
The slight differences in the left edge of text elements are due to some default style margins or padding applied to generic elements like <p>, <label> and the like. You can eliminate those by specifying things like
#productGeneral p {margin-left: none; padding-left: none;}
to avoid messing up other pages.

Use the Firefox Web Developer extension and especially its Information > Display Element Information tool to find out exactly what tags apply to each element.

And finally, it is almost always best to design for proper operation in Firefox, and then correct for any anomalies in IE. FF follows official web standards much more closely than IE, so you won't be tailoring your fundamental design to quirks.

Here is the key for controlling the additional images with their subtext:

#productAdditionalImages .additionalImages a { 
    float: left; 
    margin-left: 20px;
    }

Glenn,
I am using a laptop with a slow connection at present so unable to do much testing.
I will test in depth when I get back home, and post results here.
However there are a couple questions that you might field now:

1. "Firefox Web Developer extension and especially its Information > Display Element Information tool", is this what you used to find out what my style tags were?
2. I assume that this is the same thing as Firebug. I uninstalled this from my laptop because when tweaking the site online it was producing errors, e.g. unable to use Zen Cart's HTML editors. But I might use it on one of my local sites, where I do all the development. In fact, what you see online is like a showcase that I use to ask questions.
3. How do you look up what key does what? For example:
   " #productAdditionalImages .additionalImages a {
   float: left;
   margin-left: 20px;
   }
   is the key for controlling the additional images with their subtext "
   Did you find that out by using Firebug or is there something else?
   I need to learn more...
   Thanks.

Finally got the look I needed with the last set of instructions.
Now it is really cross-browser, except for minor differences which are unavoidable.
So this part of the ordeal is over, thank you SOOOO much.
Didn't have the time to upload yet but will do so later on.
Now, please answer the above question about Firebug and the rest.
Where did you learn so much about style?
This is very important so I will be less dependent on others answering questions.
Take your time and have a nice weekend.

ckosloff

I have now read this thread, and see what it is that you are trying to achieve. I would say one or two things about your web site, if I may. I still think that your images are too small, and in my browser it (seaMonkey) the mod 'works' just fine, but the text, particularly on the attribute images, is too small and indistinct.

There, is of course, a real danger that putting all the images stacked verically will cause the user to have to do what I just HATE - scroll down the page to see more! It's just so tiresome and, since you are trying to SELL, I would try to make the user's experience as simple as is feasible within the limitations of the zencart/web form so I would strive to display as much as possible (i.e. everything) visible at one go. How many times have you visited web sites where the pages just go on and on, and involve scrolling down and down? (I know most 'blogs' are like this, and other than the fact that most blogs are full of self-indulgent claptrap, this is the reason I have no time for blogs.)

As for CSS styles, I would suggest that you follow up on your collaborator's suggestion that you give the CSS styles unique 'names' and, of course don't include them in the code (cos the CSS styles will load every tiime with every new product 'page') - the CSS styles should be included in your template CSS file. Mastery of CSS will allow you to manipulate the format and appearance of much of your store. (I know my site is not a shining example, but take a look at the changes I have made to a zen cart site, mostly via CSS)

A good book on CSS is: CSS THE MISING MANUAL David Sawyer McFarland POGUE PRESS/O'REILLY 2006 ISBN-10: 0-596-52687-3 or ISBN-13: 978-0-596-52687-0 advert removed

I don't know about firebug etc. so can't comment on that.

The Web Developer and Firebug are two different programs. I have only used Firebug a couple of times, so am not really familiar with it yet. Some parts of Web Developer are like the back of my hand, but other parts I haven't explored yet.

The Display Element Info tool is generally the first thing I use, and that will show lots of different things - the tags on the selected element, its ancestors and children, position and dimensions, any inline styling, font info...

CSS > View CSS lets you look comfortably at all stylesheets applied to the current page, and Edit CSS lets you try different things and see the results instantly.

View Source is obvious, and there is an Edit HTML tool similar to the CSS one.

I learned a lot about CSS from w3schools.com and a few other online resources, and a couple of books I bought on the subject... and a lot of experimentation.
For instance, there is a huge difference in meaning between h2#productPrices {} and
h2 #productPrices {}, but none of my sources emphasized that. (The first means an h2 heading with an id of productPrices, and the second means an h2 heading that has an element inside it with id productPrices.) They are not interchangeable.

Guys,
Overwhelmed by the feedback, thank you very much.
Again, don't worry too much about how the "site" looks.
I am uploading lots of stuff right now.
Regarding scrolling there is not much I can do about it, since I have lots of attributes, I'm trying to impact the customer at first glance as much as possible.
One q. for Glenn: I have already installed Firebug in my Firefox, is Web Developer a free extension that I can download from the Mozilla add-on site?
Haven't seen it so far.
For you to know: I am planning on writing a mod with detailed instructions on how to tweak additional images, since this is a recurrent theme in this area of the fora, and also because the mods that are available are very defective.
Unless you want to write it, of course.
I will give you full credit and mention this thread.
Hey Mike, point taken, no problem, I will buy the CSS book via your site.

OK, so I installed Web Developer and got to play around with it a little.
Great tool, and, contrary to Firebug, not intrusive, because you turn off the toolbar at will from the View menu.
What was confusing is that the names of the utility and that of the download area in the Mozilla site are similar.
So now I have a new toy to play around.
Thanks.

I had considered packaging a mod for the additional images, but decided it was so simple a change to the code (move a block and add a <div> and </div>) that it wasn't worth the bother. If you include the tweaks for styling and other information, it could be quite useful, and if you are willing to write it up, be my guest. I have plenty of other things to do. The more people helping with contributions, the better.

Actually I am very lazy.
That is why I tried first the published mods in the download area.
But they are very lackadaisical and obsolete, and will mess up your site more than help.
So I had to start thinking, testing, and learning.
I know it is very simple once you understand it, getting there is the tough part.
So I'll give it a shot and submit to the gods of Zen Cart.
Better to have a mod based on latest versions of file than those old kludges out there.

ckosloff:

Actually I am very lazy.
That is why I tried first the published mods in the download area.
But they are very lackadaisical and obsolete, and will mess up your site more than help.
So I had to start thinking, testing, and learning.
I know it is very simple once you understand it, getting there is the tough part.
So I'll give it a shot and submit to the gods of Zen Cart.
Better to have a mod based on latest versions of file than those old kludges out there.
ckosloff

I am not sure that I would subscribe to the view about you being v. lazy. You are certainly thorough!!

Way to go about your idea to post info about the mod, but don't forget that there are a lot of New Zenners out there who don't know the terminology - I would suggest that you keep things as simple as possible.

Good luck with the submission, and if you need a proof-reader or somebody to look over your work prior to submission, please don't hesitate to send me a PM.

Will do.
I already drafted the text and it is as simple as possible.
Anyway will take my time to check everything and rewrite as needed.
I will certainly send the mod to you and Glenn for input before submission.

Guys,
I have already drafted the text and built the folder structure for this mod.
But, very embarrassed to admit it, I am having trouble packaging the mod in a zip file.
I am using Winzip Pro 11, I can of course package the files but I don't see the folder structure.
Any suggestions welcome.
As soon as I overcome this hurdle will submit to you guys by attaching the mod here.
Only after your input will I submit to the Olympus of Zen Cart.

I use 7zip (and have a six-year-old trial copy of Winzip:) so can't comment on how to use Winzip Pro 11... sorry...