Attribute layout

[Xanfar]

Attributes seem to have a pre-set category that says "Please Choose:". I'm looking to get rid of this heading all together. It also puts in another heading which is the name of the attribute created. This one isn't as vital to remove but I would like to know how if it is possible.

Here's a link for visual reference:
http://www.sportsboardscentral.com/s...roducts_id=182

I found these two option in the css file which effect the attributes position

.wrapperAttribsOptions { /*attribute position*/
width:200px;
float:right;
text-align:center;
}

#productAttributes, {} /*attribute container*/


I already modified these to somewhat suit my needs but I need further help...

Thanks to all

[haredo]

Attributes seem to have a pre-set category that says "Please Choose:". I'm looking to get rid of this heading all together.

Try this:
place this in your stylesheet.css

h3#attribsOptionsText {
display: none;
}

[Xanfar]

That did it...for the life of me I couldn't figure that one out...I was originally putting it in as:

#attribsOptionsText h3

which I thought was valid css...may I ask why it didn't work that way but it did work this way:

h3#attribsOptionsText

The following worked for my second question of the option title being displayed:

.wrapperAttribsOptions h4{
display:none;
}

Sorry but I'm confused...
I'm still fairly new to this so I hope this question isn't a bother... Many Thanks

[mellonade]

putting the html element before the id or class symbol and name (eg. h3#attribsOptionsText) means that you are styling the specific html element that is labeled with that class/id in your html.

Example: h3#green {color:green} in your css refers to <h3 id="green"> green text</h3> in your html.

When you put the html element after the css id/class and name (eg. #attribsOptionsText h3) you are actually styling the children of the html element.

Example: #green h3 in your css would refer to:

<div (or any html element, like p, a, etc) id="green">
<h3>green heading</h3>
</div>

if you wanted to get real specific here, the complete css tag for the h3 above is div#green h3.

using this naming format allows you to style things super specifically. for example, you can style all sorts of things within your div#green:

div#green h3 {color:green}
div#green h1 {color:black; font-size:14pt}
div#green img {border:1px solid white}
div#green img a {border:1px solid blue}
div#green a {text-decoration:underline}
div#green div {background:#ccc}

so, the reason your initial solution might not have worked is because there may not have been a parent element for your h3.

does that help?

[ArcheryKinetics]

I ended up using haredo's suggestion and was able to remove the "Please Choose" part, but I'd also like to get rid of the heading (name of the attribute) that appears to the left of the attribute pull down box. I notice that Xanfar was able to do this on his page; how is this done?

Also, I'd like to make it so that instead of multiple attributes aligning vertically, that I could put them side by side. So far I have had no luck finding a solution.

Here is a sample of the pages I am working with:

http://archerykinetics.com/shop/inde...&products_id=2

I want to eliminate the "Length" and "Finish" labels and put the two boxes side by side.

Thanks in advance.

[Tully]

On this whole formatting issue, when you've got multiple text input fields with labels of different lengths, the boxes don't line up well and it looks quite poor - how would one easily vertically align the text boxes?

[Tully]

fixed it to work:

.wrapperAttribsOptions {
float: right;
margin: 0px 240px 0px 0px;
}

[gjh42]

To eliminate the option name in front of the radiobuttons:

h4.optionName {display: none;}

To move the second set up to the right of the first, one way which is very specific and will only work correctly when the first set is four lines:

br+.wrapperAttribsOptions {
    position: relative; 
    top: -7.8em; 
    left: 20em;
    }

As far as I can tell, there is no pure CSS way to make the second set simply align with the top right of the first. The <br> between them is what causes the drop, and you can't disable that without disabling the second one.


Another way to get the boxes/buttons to line up is to give the name a specific width:

h4.optionName {width: 8em;}

[Tully]

What I've discovered is that even aligning things to the right, then bringing them back over towards the left with a margin, it's only working for about 50% of IE7s that I can find... I run FF and verify with IE7, however I've got a few people where the formatting code doesn't have any effect... Thoughts?

[gjh42]

Tully, are you simply trying to arrange the input boxes so their left edges align?

h4.optionName {width: 8em;}

will make all inputs start 8em (80px or so) from the left margin. Of course you can make that whatever you want.