How do I align attributes to the right?

[joybrealey]

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/stor...hotos-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

[tony_sar]

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.

[joybrealey]

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

[tony_sar]

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.

[tony_sar]

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

i suggest 1.2em..

[joybrealey]

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

[tony_sar]

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

[joybrealey]

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

[tony_sar]

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..

[joybrealey]

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

Joy