hi guys, im having a little trouble with assigning buttons with the same variables but with different sizes.
this is what i have so far.
i want to have a main button style all the same, and then have all the buttons use it but they all have differtent widths. can anyone help me with this?
thank you in advance!
input.button {
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add {
margin-left: 25.5em;
margin-top: 5px;
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_survey {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}Can you use CODE tags instead of QUOTE tags?
input {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.button, input.add {
width: 5em;
}
input.add_question, input.view_survey, input.view_question {
width: 9em;
}thanx Jona for your reply, that is what i want, kind of.. my fault i got the question wrong!
heres what i have now
so the input has no style really,
but ALL the buttons do. but input includes button so im getting muddled up. can anyone help me out writing this alot cleaner and not repeating my self alot?
thanx!
input{
height: 20px;
font: 12px/14px Verdana, sans-serif;
}
input.details{
width: 28em;
}
input.button {
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add {
margin-left: 25.5em;
margin-top: 5px;
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_survey {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}If this: input {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
isn't what you want, then post a link to the page so we can see what you want.this is what i have
text inputs: all same font, same height, no background colour etc.
input{
height: 20px;
font: 12px/14px Verdana, sans-serif;
}
buttons: same colour, style etc, but all have different widths.
input.button {
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
i guess what im asking is how do i define more buttons with only the width changed?
or some sensible way of doing it?
does this make sense?If I'm reading you right, how about giving them classes? There is another selector that you can use (relates to the fact the tag is "input" that has an attribute "type" that is "button") but it's too much for IE so a work around (like classes) is needed.D'oh! Yeah. Forgot it was only buttons you were applying it to. Just give yer buttons class="btn" and then in the stylesheet put
input.btn {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
That'll apply all the constant styles you want to the buttons and the widths will handle themselves.ah yes good thinking Mr Herer! it is only the buttons im applying it too. so i define all the widths in the xhtml?
ray326 can you explain your way too just for my information? thanx
No don't define the widths in the mark up. Don't define the widths at all. They'll expand/contract to the width needed automatically. I just gave an example of what ray said and what I meant in the first place.
So your input buttons will look a bit like this: <input type="button" class="btn" /> and then just have the style declaration like I said before. You really should go and read the css tutorials over at <!-- w --><a class="postlink" href="http://www.w3schools.org">www.w3schools.org</a><!-- w --> They will help you a lot.They're called "attribute selectors" and here's (<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/selectors/attribute_selectors.html">http://www.westciv.com/style_master/aca ... ctors.html</a><!-- m -->) a tutorial page on them from one of my favorite info sites. Yours would look like
input [type="button"] { ...styles... }thanx Mr Herer that seems to be what i want!
ok, one more question, if 'some' of my buttons needed 'margin' style how would i go about adding that to the style sheet. would i then give it a class of its own for that?
thanx everyone for the help!
this is what i have so far.
i want to have a main button style all the same, and then have all the buttons use it but they all have differtent widths. can anyone help me with this?
thank you in advance!
input.button {
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add {
margin-left: 25.5em;
margin-top: 5px;
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_survey {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}Can you use CODE tags instead of QUOTE tags?
input {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.button, input.add {
width: 5em;
}
input.add_question, input.view_survey, input.view_question {
width: 9em;
}thanx Jona for your reply, that is what i want, kind of.. my fault i got the question wrong!
heres what i have now
so the input has no style really,
but ALL the buttons do. but input includes button so im getting muddled up. can anyone help me out writing this alot cleaner and not repeating my self alot?
thanx!
input{
height: 20px;
font: 12px/14px Verdana, sans-serif;
}
input.details{
width: 28em;
}
input.button {
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.add {
margin-left: 25.5em;
margin-top: 5px;
width: 5em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_survey {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
input.view_question {
width: 9em;
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}If this: input {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
isn't what you want, then post a link to the page so we can see what you want.this is what i have
text inputs: all same font, same height, no background colour etc.
input{
height: 20px;
font: 12px/14px Verdana, sans-serif;
}
buttons: same colour, style etc, but all have different widths.
input.button {
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
i guess what im asking is how do i define more buttons with only the width changed?
or some sensible way of doing it?
does this make sense?If I'm reading you right, how about giving them classes? There is another selector that you can use (relates to the fact the tag is "input" that has an attribute "type" that is "button") but it's too much for IE so a work around (like classes) is needed.D'oh! Yeah. Forgot it was only buttons you were applying it to. Just give yer buttons class="btn" and then in the stylesheet put
input.btn {
height: 22px;
background-color: #e6e6e6;
border-color: #ccc #666 #666 #ccc;
cursor: pointer;
}
That'll apply all the constant styles you want to the buttons and the widths will handle themselves.ah yes good thinking Mr Herer! it is only the buttons im applying it too. so i define all the widths in the xhtml?
ray326 can you explain your way too just for my information? thanx
No don't define the widths in the mark up. Don't define the widths at all. They'll expand/contract to the width needed automatically. I just gave an example of what ray said and what I meant in the first place. So your input buttons will look a bit like this: <input type="button" class="btn" /> and then just have the style declaration like I said before. You really should go and read the css tutorials over at <!-- w --><a class="postlink" href="http://www.w3schools.org">www.w3schools.org</a><!-- w --> They will help you a lot.They're called "attribute selectors" and here's (<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/selectors/attribute_selectors.html">http://www.westciv.com/style_master/aca ... ctors.html</a><!-- m -->) a tutorial page on them from one of my favorite info sites. Yours would look like
input [type="button"] { ...styles... }thanx Mr Herer that seems to be what i want!
ok, one more question, if 'some' of my buttons needed 'margin' style how would i go about adding that to the style sheet. would i then give it a class of its own for that?
thanx everyone for the help!