Big gap between attributes being caused by add to cart button

Hey guys. I'm looking for a little help on modifying my product_info file so that all my attribute options are listed together. Right now, I have the color option being displayed, then under it is the size option. The size option has a large 'white space' between it and the color option. This space is equal to the size of the add to cart button which is located on the right side of the screen.

Can someone tell me what file needs to be edited to get the attributes to be grouped together?

Here's an example to make things a bit clearer:

http://www.decaldepot.net/zencart/index.php?main_page=product_info&cPath=21_25&products_id=214

Thanks...

#productAttributes {
float: left;
width: 70%;
}

thank kobra for it.

Your style sheet is far different than the default....but try finding or adding this to it and see how it looks

#productAttributes {
         float: left;
         width: 70%;
         }

edit:
Hello barco...you were just a bit faster

I'm a cut & paste god

Thanks for the speedy reply guys. I added the css code to my stylesheet.css in my template directory. I'm not so sure I've made any improvements. The space between the attributes seems acceptable in Firefox and IE under XP, but on Firefox on my Solaris workstation I'm still seeing the large gap between attributes. Maybe it's just one of those css nuiances.

You could remove the clearBoth tag inbetween the two attributes, although I'm not certain of the exact PHP file to edit for that. That'll let the air out between the two, I'm guessing that's what you want.

Also, your template stylesheets are in need of validation for simple syntax errors. Not your fault though, those errors came with the template. :onfire:

Solaris workstation
Is that not a 'nix OS? I looked at it in FF on a linux box and it appears to be better than before.....

Sketchy:

You could remove the clearBoth tag inbetween the two attributes, although I'm not certain of the exact PHP file to edit for that. That'll let the air out between the two, I'm guessing that's what you want.

Also, your template stylesheets are in need of validation for simple syntax errors. Not your fault though, those errors came with the template. :onfire:

Thanks.. I found it in includes/templates/template_default/templates/tpl_modules_attributes.php . I removed the clearBoth class declaration in two places and had issues with the second pulldown being too far to the right. I put the clearBoth back for the second instance and all looks good. I'm uncertain if this will have an impact on products that have more than two options, but at least now I know where to make the changes.

kobra:

Is that not a 'nix OS? I looked at it in FF on a linux box and it appears to be better than before.....

Yes, Solaris==SunOS==Unix variety. It's my main work workstation.

One last thing, and this may not be easy, but I would like to add a link next to the color pull down that opens a popup window that will show an image of colorswatches of to give the customer a visual on what the option names look like. For example, someone might not know that 'plum' is a purplish color. Even better would be to have a little block in the pulldown itself next to the color name. This block would be colored using the rgb value of the option color. Not sure if that was clear or not. Any ideas if anyone has attempted this before?

Again, thanks for your time and patience....

kobra:

Your style sheet is far different than the default....but try finding or adding this to it and see how it looks

#productAttributes {
float: left;
width: 70%;
}

> 
> edit:
> Hello barco...you were just a bit faster


Hrmff.. I thought this was working out, but it seems like things are screwy if any other boxes show up after the attributes.  Take a look at this:

[http://www.decaldepot.net/zencart/index.php?main\_page=product\_info&products\_id=79](http://www.decaldepot.net/zencart/index.php?main_page=product_info&products_id=79)

Any idea on how I can fix this?  Do I need to somehow clear the css or something?  I wish I knew more about css to fix this myself and appreciate the help you guys have been giving me!

I've been toying with settings for this and am not having much success. Can someone tell me how I might be able to move the 'add to cart' button below all of the options? While it does look good on the right part of the screen, if it's easier and doesn't break the rest of the page, I see no reason not to move it to the left-bottom.

I know you guys don't get paid for the assistance that you give to a newbie like me, but just know that all help provided is GREATLY appreciated!

How about just positioning to the left side of the attributes instead? :unsure:

If interested, make a backup of your stylesheet.css and find/modify;

/*Shopping Cart Display*/
#cartAdd { float: left; text-align: center; padding: 1em; font-weight: bold; margin-right: 2em; }

Change/add the values in red.

Looks good in Firefox, but better double check in IE though.

Sketchy:

How about just positioning to the left side of the attributes instead? :unsure:

Looks good in Firefox, but better double check in IE though.

Yup, much easier than fighting the battle I keep losing! I made the changes and all is well. Well, actually I'd like to get the pulldowns a little closer together, but I think I'll put that on hold for a while.

I'm learning a good bit about the override system and css. Thanks to you all for the help!

dinki,

Just looked at this page Your page and it appears that you have got it placed where you want it.

Great Job!!

Any other things you require?

kobra:

dinki,

Just looked at this page Your page and it appears that you have got it placed where you want it.

Great Job!!

Any other things you require?

Kobra, Thanks for the kind words.

Now that you mention it ... I could use some help with something else! :yes:

Something that I would really like to do is be able to put a link next to the colors pull down that would open a smaller browser window (using target:blank_) that would show an image depicting color swatches so that the customer would have an idea what the color names look like (like plum, vivid blue, etc). Right now I just have white and black vinyl, but I have about ten others on order. I can handle the generation of the browser window and the contents of the page showing the image, but I'm not sure how to go about incorporating the link next to the pulldown.

Any help on this would be greatly appreciated!

Why not add the color swatches as additional images? you know little squares of solid color. popups are annoying:yes:

barco57:

Why not add the color swatches as additional images? you know little squares of solid color. popups are annoying:yes:

Well I mostly agree with you on the popups being annoying, but I think they are acceptable when the customer requests additional information. Remember, this isn't an ad I'm serving, it's the information that they are requesting.

I'm guessing what I'm proposing isn't easy. I guess I could add a 'To view available color swatches click here' and get a similar effect, but really it's not ideal. I'm not totally against putting them up as additional images, but I'm trying not to muddy up the look of the products page with too many images.

I've found a somewhat promising way to solve my issue by using unicode ■ to create a solid sqaure that I can then use the font tag to change the color to whatever color I need. Unfortunately, this doesn't work inside of the select option pulldown. Take a look at this page http://decaldepot.net/zencart/testing.php

You'll notice that right after the item description I put in the color samples and they work fine. If you look at the color pulldown you'll see that the solid box does appear with the text description but everything is black! So close! Does anyone know how I can change the colors of these little squares?

appear with the text description but everything is black
Just looked and they are not all black anymore...

But you have asked a question and not provided us with any idea of what/how you are implementing this. Kinda like saying "I am doing something, can you guess what it is"..:lol:

Can you describe and post a bit of code and to where you are applying it?

You are getting closer I am thinking

This is probably a very silly question, but why are you using a dropdown instead of radio buttons?

kobra:

Just looked and they are not all black anymore...

But you have asked a question and not provided us with any idea of what/how you are implementing this. Kinda like saying "I am doing something, can you guess what it is"..:lol:

Can you describe and post a bit of code and to where you are applying it?

You are getting closer I am thinking

Kobra, I'm a bit all over the place right now. I posted the question here thinking it more likely to get attention in the css forum and that it was a better fit for that section. You'll see the code that I used there.

I've really decided to go back to my initial idea of just putting a link that opened the popup with the image. Problem is I'm having a hell of a time finding where the actual pulldown is being constructed. Is this type of request better suited for the pay forum? I don't mind paying a small sum (read enough for a supersized value meal) to find out how to do this.

Kim:

This is probably a very silly question, but why are you using a dropdown instead of radio buttons?

Kim, not a silly question at all. Right now, with only two options, radio buttons would be fine. I've just received ten additional vinyl colors that I will be adding as product options. I think that the dropdown is more suitable for this quantity.