Template center column width

This is a question I don't see addressed in the FAQ or other posts. I wanted to increase the width of the center text area. I also turned off the right column. I saw the posts that talk about changing the fixed pixel to a percentage. I'm (so far) happy with my changes to 100%.

My question is this: My template uses a banner box in the center column. When I had a fixed size, i could create the banner to that width and all was well. With the percentage, the white background changes as I widen/shrink the browser, but I'm able to shrink down past the width of the banner. While it doesn't look too terrible, I would like to set a minimum size for the center area.

How can zen cart have a minimum size for the columns, but still have a percentage so things can grow as the browsers get wider? Is it possible to request this as an added feature in upcoming releases, and if so, how do I do that. Ideally, it would be a setting on the layout settings page under configuration. Maybe a minimum and maximum width would be nice, but max may be unnecessary.

Thanks,

24Paws
presently using: v1.3.9h

The width of the "centre column" is determined by the width of the main wrapper div, minus the width of the side column(s).

In your stylesheet, you will see the declaration for #mainWrapper, and within it, a value for width.

These days - because there are so many screen widths around - it is common to set the wrapper to about 960 pixels. This kinda covers all bases. It's about as wide as you can go without forcing a horizontal scroll bar on older, lower-resolution screens.

Now... if the MAIN WRAPPER is 960, the centre column will be 960 MINUS whatever values have been applied to the side columns. (These values are set in ADMIN >>> CONFIGURATION >>> LAYOUT SETTINGS).

ALSO... bear in mind that some other DIVS that are used in side columns and/or the centre column, may have additional MARGIN or PADDING values - shaving a further few pixels off the centre column.

Remember too, that a "vanilla" install of zencart has to be generic - it has to be a "one-size-fits-all" system, because it has no way of knowing how each person wishes to style his/her site.

Once you have installed this generic "boilerplate" system, you are perfectly free to style it any way you want, and if you feel that a percentage-based styling is more appropriate then absolutely fine - go install it. If you like radio-active pink mixed up with psychadelic lime green, that's perfectly OK. You are not going to get arrested for choosing your own styles.

The point is this... Zencart has to be generic... It is up to the end user to decide their own styling and design.

Schoolboy, thanks for the response. There was some helpful information in the post.

In changing to a percentage, one of the settings you mention was changed by me. I changed #mainWrapper, which I now have: width:100%;

Other fields I had set to 100% in my stylesheet.css file are:
#headerpic
#topmenubar
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper

I understand your calculations based on pixel entries, and don't get how it is calculated with the percentage value, but that isn't my point.

Yes, zen has to be generic. What I'm thinking is that it starts out with some generic column sizes (I think originally the center is 750px). CSS has the ability to resize things depending on the browser width settings of the user. My question is why can't this column size also have a minimum pixel rating to combine the best of both worlds. This way fixed aspects (such as my banner spanning the center column) added to the site will still look right during the resizes. Is there an easy way to do this in the CSS, or perhaps would the main zen code have to have a feature like this added?

I'm also pretty new to CSS and "don't get how to code it" so if there's a fairly simple way to do this and people have coding suggestions, I'm all ears!

24Paws

There are no short cuts... If you are a "novice" with CSS, then my suggestion is that you find some online tutorials and spend time learning how to construct CSS.

Other (more elaborate) designs are achieved through code alterations in template files (and sometimes in module files).

In all instances, you will need more than just a basic knowledge of CSS and PHP.

This forum is not the place to teach "general" PHP or CSS - mostly because there are other sites that do this, (why re-invent the wheel) and secondly, the forum deals with zencart issues.

While MOST of the users here (me included) have a reatively "scant" understanding of how zencart is configured, we tend to get proactive help when the question is very specific to a particular zencart issue... such as:

"How do I shift the left column up, so that the top lines up with the breadcrumbs line...?"

You can save yourself a lot of time by:

1. Studying the settings in the admin panel, and discovering what they do to layout.

2. Buying the user manual (advert at the top of this screen).

3. Using FIREFOX browser with add-ons such as CHRIS PEDERICK's WEBMASTER TOOLKIT and FIREBUG. These are fundamental tools to all web developers - even novices.