www.webdeveloper.com
Results 1 to 11 of 11

Thread: button attribbutes

  1. #1
    Join Date
    Sep 2004
    Posts
    219

    button attribbutes

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

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Can you use CODE tags instead of QUOTE tags?

    Code:
    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;
    }
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Sep 2004
    Posts
    219
    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;
    }

  4. #4
    Join Date
    Mar 2004
    Posts
    3,056
    If this:
    Code:
    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.

  5. #5
    Join Date
    Sep 2004
    Posts
    219
    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;
    }
    buttons: same colour, style etc, but all have different widths.
    Code:
    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?

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.

  7. #7
    Join Date
    Mar 2004
    Posts
    3,056
    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.

  8. #8
    Join Date
    Sep 2004
    Posts
    219

    Thumbs up

    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

  9. #9
    Join Date
    Mar 2004
    Posts
    3,056
    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.

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    They're called "attribute selectors" and here's a tutorial page on them from one of my favorite info sites. Yours would look like

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

  11. #11
    Join Date
    Sep 2004
    Posts
    219
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles