How do I align attributes to the right?

I am trying to work out how to align the attributes to the right on my products info page just above the add to cart button. Have a look here at http://www.picturegalleryuk.com/store/multi-aperture-frame-in-black-to-hold-2-6x4-photos-p-6.html

I have read lots of different posts on this subject but I still cannot get it to go to the right and it looks silly placed on the left.

Surely it must be so simple! Can anyone help me please? And if you can could you explain it in simple terms as I am a complete newbie!

Many thanks

you can create following block in your CSS

#productAttributes {
float:right;
}

add this to the end of your stylesheet.css

you can also add other properties there , such as margin and padding to control how your attributes will be positioned.

give this a try ..
im sure others might have better suggestion.

Many thanks Tony,

This worked, and it was so easy!

I have spent all day reading the forums, and although many other people have had the same problem no one seems to have come up with a simple answer.

I just need to work out how to close the gaps in-between the attributes now as they are quite wide apart at the moment, so if you have any suggestions I would be most grateful.

Many thanks again, you are a star!

Joy:clap:

locate following code in your stylesheet.css

label, h4.optionName {stylesheet.css (line 129)
line-height:1.5em;
padding:0.2em;
}

you can either remove padding or set it to 0.1em , you can also lower line-height , lowering values in those setting , will get your attributes closer to each other.

it seems you been having problem with line-height..

i suggest 1.2em..

Thank you Tony, that is much better now, you have been most helpful. I knew it must be something simple, it's just knowing how!

Anyone else who is having these problems should just follow Tony's easy instructions and bingo! Your attributes will be on the right hand side above your add to cart icon.

At least I will be able to sleep tonight!

Thank you once again.

Joy :clap:

since you have custom template , your designer has chained many elements together .. although code block from before dose the job , but is effecting some other part .. you can still adjust elements there but you can also try following.. back up your stylesheet.css and try this example ..

locate following in your CSS

h1, h2, h3, h4, h5, h6, .wrapperAttribsOptions {stylesheet.css (line 1108)
margin:0.3em 0;
}

break this code block into two.so that block of code will become two block of code

like this

h1, h2, h3, h4, h5, h6 {
margin:0.3em 0;
}

and

.wrapperAttribsOptions {
margin:0.3em 0;
}
here , set the margin to 0.1 em and that should get things closer ..

also don't forget to change the line height on other posting back to 1.2em

I have done everything you suggested and it all looks fine to me. Just one little question..... Where it says "please choose" is there any way I can widen the gap before the attributes start as it looks a little bit squashed between the "please choose" and the first attribute.

Many thanks once again for your help.

Joy

you may want to add following to the end of your CSS and see if this will fix it

#attribOptionsText {
padding-bottom: 0.3em
}

if you h3 heading didn't apply after this change . you can add it

h3.#attribOptionsText {
padding-bottom:0.3em
}

currently i can not test this on my own copy of zc , since my local server is down.. :unsure:

I have tried your suggestion but it didn't make any difference. Any thoughts?

Joy :no:

replace padding-bottom with just padding

padding:0.4em;

and see if that will work..

doing it on your site , did make different , but just padding-bottom might have not been a correct property in this case .

ahhh. my mistake , i miss typed the id ..

is

#attribsOptionsText i missed S in the name ..

try to fix this name :blush::blush::blush::blush:

Hi Tony,

Sorry for the delay in replying, I have been at work.

I have tried what you suggested and added the "s" but it still hasn't changed the gap between "Please Choose" and the first attribute.

This might be a silly question but does it matter where you add this to the style sheet? Does it have to be at the very end?

Don't worry if you are busy, I can live with it for now.

Many thanks,

Joy

sorry for delay .. i just go back from hell :unsure:

this should work, regardless of where you insert it .

#attribsOptionsText {
padding:0.5em
}

Hi Tony,

I am glad you came back from hell, it's not a nice place to be, lol!

Many thanks, that looks better now.

I am changing my colour scheme now as I didn't like the blue.

If I get stuck on anything else can I give you a shout?

Thanks for all your help, it is greatly appreciated.

Joy:clap::clap::clap:

Glad everything worked the way you wanted.

as for colour of your page .. i guess original blue needs to be there , since some of graphics contain that blue colour , unless you modify all graphics with similar colours which is not really CSS issue but graphic issue .

Thanks Tony,

I know what you mean about changing the colours, I am familiar with photoshop so I should be OK on this one! (Thank God for that did I hear you say?).

Many thanks,

Joy :smile:

You may also want to fix the issue with your login section ..in your Header , if you click on Log in ,, you will see text like

TEXT_CREATE_ACCOUNT_HEADER. also additionally for your Forgot password.

zencart , uses Constants to output information to the page, those are called Define's and are located in some template files as well as language files.

default zc dosn't come with login feature located in header , so this most be a module that has been installed and has problem with its define.

go to admin > tools > Developers tool kit . and use the exact words to search where those defines are located and correct this issue .

Hi Tony,

I think I have found them but not sure how to change them!

I changed the TEXT_CREATE_ACCOUNT_HEADER to CREATE ACCOUNT but my whole page went blank. Sorry I am not very good at this yet!

Any suggestions would be gratefully received.

Many thanks

Joy

Let me know the module name that you have installed for this ..
you can not modify that part . this should have been language directory..