New to CSS, need help with layout design

Hello everyone,

I am building my first Zen Cart store. I really like the software, and am very excited for the upcoming 2.0

But for the time being, my site needs to get off the ground, because my business has already "launched" and I really want to get the full featured site out there, instead of my current placeholder site

See the page here

http://www.candlesforcure.com
(please note, i am NOT attempting to recreate this layout in zen cart-- only the color schemes)

Here is my question.

How do I go about adding in additional new "sections" to the existing zen template.

(please reference my current work-version of the zen site)
http://www.candlesforcure.com/store

For example: If i wanted to add an autoresponder opt in form above the breadcrumb bar, but underneath the "Home" "login" etc links.

How do you accomplish this?

My limited understanding of CSS is this. You define a <div> somewhere. So perhaps this one could be called "OptIn" or something. Then in the stylesheet you set the display options for the OptIn div...

Sofar so good?

Here is where I come into big problems... I am having a very difficult time establishing where in the vast number of files to actually insert the <div> codes, that would contain the actual autoresponder information, and so on and so forth.

There are many other "sections" i would like to add to the site as well, this was just one example.

I understand that this is a very detailed explanation I am requesting, so you truly have my thanks in advance for any assistance...

I feel that I am right on the borderline of understanding this stuff, I just need a few more things clarified.

-Tyler
CandlesForCure.com Owner

From your description it sounds as though you want to place your HTML in your templates common/tpl_header.php file. If it hasn't got one, you would make a copy from the template_default/common folder.

Thanks for the reply.

So the actual code for the opt in box itself (the html, script, php, whatever) would go in the header file?

Then the styling for the opt in box <div> would go in the stylesheet.css?

So it would actually be the stylesheet that would, for example, determine where the opt in box displayed within the header? Not where I place it in the header file itself?

I guess this is my main confusion.

I cannot seem to wrap my mind around what element is controlled where.

My opt in box's CODE is in the header, yet its properties are all in the CSS.

for an example of a CSS designed zen cart I really like,
see:

http://www.alpinevalleycoffee.com

This is the sort of opt in box i am referring to.

As well as other aspects of this design, such as the custom graphics on the sideboxes...

If you notice on my store, only the background image is customized, the sides and top/bottom are not... this is simply because I am baffled at how this was implemented on the alpine valley site.

Any more suggestions or directions to head in?

I suspect that that site actually adds the opt-in code to the top (and bottom) of the common/tpl_main_page.php rather than the tpl_header.php file.

Emulating that site is a laudable objective, but it's clearly benefited from some significant PHP customisation and advanced CSS.

I'd recommend spending some time over at the W3 Schools site getting a firm foundation in the basics of PHP and CSS bvefore going for such a sophisticated build.

Thanks for the link.. I will certainly go check out that site.

For me I simply insist that my site not be a "typical" ecommerce looking website... If that means hours of me pouring over coding, then so be it.

Thanks for the tip on the main page rather than header... I got the header to work!!!! but I can see now how having it o the main page would be more fluid

Thanks so much

I will certainly be posting new topics for other issues I run into and look forward to your expertise :)

Added you on twitter by the way

One of the joys of Zen Cart is that the look can be completely customized, so keep asking the questions. Try to make them as specific as possible (you did a good job of that, i.e. avoided the more general "how do I make my site look like this" type of question) and spend time getting a firm foundation and understanding of web page layout using HTML and CSS, as that will make it easier for us to help you.

On your specific question about which determines the position. There's not a clear answer as the are different ways to make the HTML and CSS interact to answer this.

The main methods are floating and positioning.

The template I am customizing uses the "em" system to make a fluid template.

Have you found this method to be more or less efficient/ problematic?