button attribbutes

@Css_CalavOct 31.2004

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!

~~[QUOTE]~~

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;
}

[/QUOTE]

to post a comment

CSS

10 Comments(s) _↴

@JonaOct 31.2004 — #[font=trebuchet ms]Can you use CODE tags instead of QUOTE tags?[/font]

<i>
 </i>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;
 }

@Css_CalavauthorNov 02.2004 — #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!

[CODE]
 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;
 }
 [/CODE]

@Stephen_PhilbinNov 02.2004 — #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.

@Css_CalavauthorNov 02.2004 — #this is what i have

text inputs: all same font, same height, no background colour etc.

[CODE]
 input{
 height: 20px;
 font: 12px/14px Verdana, sans-serif;
 }
 [/CODE]

buttons: same colour, style etc, but all have different widths.

[CODE]
 input.button {
 background-color: #e6e6e6;
 border-color: #ccc #666 #666 #ccc;
 cursor: pointer;
 }
 [/CODE]

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?

@ray326Nov 02.2004 — #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.

@Stephen_PhilbinNov 02.2004 — #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.

@Css_CalavauthorNov 02.2004 — #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 ?

@Stephen_PhilbinNov 02.2004 — #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 www.w3schools.org They will help you a lot.

@ray326Nov 02.2004 — #They're called "attribute selectors" and [URL=http://www.westciv.com/style_master/academy/css_tutorial/selectors/attribute_selectors.html]here's[/URL] a tutorial page on them from one of my favorite info sites. Yours would look like

input [type="button"] { ...styles... }

@Css_CalavauthorNov 02.2004 — #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!

Also in #CSS _↴

Page break for printing end if? using seperate styles for dif browsers IE padding vs. FF padding effect on width

Success!

Help @Css_Calav spread the word by sharing this article on Twitter...

Tweet This

button attribbutes

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

button attribbutes

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴