SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 41 of 41
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    I think we're splitting hairs here
    lol - I think you're right

  2. #27
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I just want the option to create a "Submit" button that is a image (e.g. png) so that it matches all of the other buttons on my website.

    In my opinion it makes your website look unbalanced to use image buttons for non-form purposes, but then to use the standard (built-in) buttons for forms.

    See attached...


    Debbie

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I just want the option to create a "Submit" button that is a image (e.g. png) so that it matches all of the other buttons on my website.

    In my opinion it makes your website look unbalanced to use image buttons for non-form purposes, but then to use the standard (built-in) buttons for forms.

    See attached...


    Debbie
    Well as already has been discussed you can use an input (or a button element) so it's really just a matter of styling.

    I would do it like this (I just tacked it on to an old demo so ignore the rest):

    Code:
    #submit{
    border:1px solid #326985;
    height:29px;
    line-height:27px;
    padding:0 10px;
    width:auto;
    overflow:visible;
    background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;
    color:#fff;
    font-size:12px;
    text-align:center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
    margin:20px 0 10px 100px;
    }
    #submit:hover{background-position:0 -27px}
    
    #submit:hover{background-position:0 -27px}
    Code:
    <input type="submit" name="submit" id="submit" value="Add a comment" />

  4. #29
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Well as already has been discussed you can use an input (or a button element) so it's really just a matter of styling.

    I would do it like this (I just tacked it on to an old demo so ignore the rest):
    Wow! That looks really impressive, Paul!

    Although, I'm not sure how you got that fancy button...

    I don't think that is the same image I uploaded, is it?

    It almost looks like you are doing some fancy JavaScript stuff or something?

    Trying to figure out this code...

    Code:
    #submit{
    border:1px solid #326985;
    height:29px;
    line-height:27px;
    padding:0 10px;
    width:auto;
    overflow:visible;
    background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;
    color:#fff;
    font-size:12px;
    text-align:center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
    margin:20px 0 10px 100px;
    }
    #submit:hover{background-position:0 -27px}
    
    #submit:hover{background-position:0 -27px}
    Can you please help me understand what is going on here?

    And, how supported is what you did?

    I see this awesome button that looks pretty much like mine, but it's even better because when you hover over it, the gradient switches making it look like a regular non-application.

    It looks good on my MacBook with FireFox 3.6.21, but I have no clue how it would look/work in Windows or Internet Explorer - which are always big concerns of mine since a.) I don't have access to Windows and IE, and 2.) I try to build sites that are widely supported and accessible.


    Code:
    <input type="submit" name="submit" id="submit" value="Add a comment" />
    I think I follow this code...


    Debbie

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Wow! That looks really impressive, Paul!

    Although, I'm not sure how you got that fancy button...

    I don't think that is the same image I uploaded, is it?
    Hi,

    I cut a gradient slice from the actual image you uploaded to make this repeating image sprite. I reversed the gradient to make the hover effect and it's all on the same image.

    The image is then just added to the background of the input as per normal. The text is just browser text from the value attribute of the input also like normal so there are no accessibility issues. This will work more or less everywhere except that ie8 and under will have square corners while everyone else gets the nice round corners (and ie6 doesn't get the hover effect either).

    That's the approach I would take anyway as this allows you to use it multiple times with different text without having to make new images.

    Lastly if css is off or images are missing you still get a usable button.

  6. #31
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    You are OUT-OF-THIS-WORLD in your knowledge and skills!!


    Quote Originally Posted by Paul O'B View Post
    Hi,

    I cut a gradient slice from the actual image you uploaded to make this repeating image sprite. I reversed the gradient to make the hover effect and it's all on the same image.
    What tool do you use to do that?

    Any way to do that for people without $$/Photoshop?

    Also...

    How do you know how wide to make the slice?

    Why doesn't the slice create square edges at the ends?


    The image is then just added to the background of the input as per normal. The text is just browser text from the value attribute of the input also like normal so there are no accessibility issues.
    That is nice.


    This will work more or less everywhere except that ie8 and under will have square corners while everyone else gets the nice round corners (and ie6 doesn't get the hover effect either).
    Okay.


    [quote]That's the approach I would take anyway as this allows you to use it multiple times with different text without having to make new images./quote]

    Yeah, that would be great!


    Lastly if css is off or images are missing you still get a usable button.
    Good to know.

    Okay, drilling down into your Style-Sheet some more...
    Code:
    #submit{
    border:1px solid #326985;
    So you can add a border to the button?

    (I'm used to letting CSS or my Browser create the button, which is probably my aversion to the "factory look"...)


    BTW, what exactly is the correct name for the button in the INPUT tag?


    Code:
    height:29px;
    line-height:27px;
    padding:0 10px;
    I had NO CLUE you could mark up the TEXT and BUTTON like this...

    So "height" is the Button's Height?

    And "line-height" is the Text's Height?


    width:auto;
    overflow:visible;
    What do these two lines do??


    background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;
    What is the 0 0 at the end?


    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    What does these lines do???

    (Are they well-supported??)


    margin:20px 0 10px 100px;
    }
    Is this a margin for the TEXT or the BUTTON??


    #submit:hover{background-position:0 -27px}

    #submit:hover{background-position:0 -27px}
    What do these lines do?? (Almost looks like JavaScript?!)


    Sorry for all of the questions, but I want to *learn* what all of your code does so I can become a better web developer!!!

    Thanks a bunch for your help so far!!!



    Debbie

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    What tool do you use to do that?
    Any way to do that for people without $$/Photoshop?
    I have Fireworks and Photoshop but I mainly use fireworks for web work as it is easier. However, there are many free paint packages that will do the job for you although they won't have all the bells and whistles. Have a search in the graphics forum for some free graphics tools and you should find something suitable.

    Also...
    How do you know how wide to make the slice?
    The slice can be 1px wide but that means the browser has to draw it hundreds of time to make the whole button and slows the browser down. Therefore making it 5px or 10px wide will increase performance tenfold with little increase to the actual filesize. I always avoid 1px gifs and usually use something like 5px or 10px approx.

    Why doesn't the slice create square edges at the ends?
    It does make square ends but I added border-radius properties for IE9+ and other modern browsers. You can grab the code easily from here. As I mentioned above ie8 and under get square corners because it would take too much effort to give them round corners as well.


    Okay, drilling down into your Style-Sheet some more...
    Code:
    #submit{
    border:1px solid #326985;
    So you can add a border to the button?
    Yes you can style most properties for the input button unlike other form controls such as selects. You can change the border, background, colour, padding and margins etc.

    (I'm used to letting CSS or my Browser create the button, which is probably my aversion to the "factory look"...)
    Yes buttons have a default look and some people say you shouldn't change it but I think that as long as you make it obvious its a button then its ok to a degree.

    BTW, what exactly is the correct name for the button in the INPUT tag?
    The submit button is merely an input of type="submit". How it looks by default is solely down to the browser concerned.

    Code:
    height:29px;
    line-height:27px;
    padding:0 10px;
    I had NO CLUE you could mark up the TEXT and BUTTON like this...
    Yes you can set height ,width and padding as mentioned before.

    So "height" is the Button's Height?
    And "line-height" is the Text's Height?
    Yes the height is the buttons height and when you set line-height to the same as the height you effectively vertically center the text. The submit button uses the old box model so you have to account for borders and padding inside the dimensions.

    What do these two lines do??
    Code:
    width:auto;
    overflow:visible;
    The width ensures that the browser hasn't applied a default width (although I don't think any actually do) but I add it just in case.

    The overflow:visible is to cure a bug in IE7 and below where the width of the button is very wide. It's a nonsense fix because it should make no difference but for iE7 and under it fixes the problem.


    What is the 0 0 at the end?
    That is the background-position for the image and makes it start at left top i.e. 0 0. The default is 0 0 anyway and can be omitted if you want to save bytes.

    What does these lines do???
    Code:
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    (Are they well-supported??)

    As mentioned before they provide the corners for ie9+ and all other modern browsers. With the vendor prefix added they have support in Firefox and safari going way back.

    IE8 and under have no support but with ie10 due out next year there seems little need to mess your mark up for outdated browsers.

    Is this a margin for the TEXT or the BUTTON??
    That is the margin for the button just like any other element. The text is inside the button and is controlled by padding or text-alignment just like any text content.

    What do these lines do?? (Almost looks like JavaScript?!)
    Code:
    #submit:hover{background-position:0 -27px}
    No, that's just basic css and on hover you swap the position of the background image to show the reversed gradient. By pulling the background-position of the image upwards by 27px the bottom half of the sprite is shown for the rollover effect. This is a common technique for rollover images and avoids any delay in loading a new over state because the image is already loaded because it is the same image. That is the basis for all sprite images (google css sprites).

  8. #33
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed response, Paul!

    Quote Originally Posted by doubledee
    Code:
    #submit:hover{background-position:0 -27px}
    Quote Originally Posted by Paul O'B View Post
    No, that's just basic css and on hover you swap the position of the background image to show the reversed gradient. By pulling the background-position of the image upwards by 27px the bottom half of the sprite is shown for the rollover effect. This is a common technique for rollover images and avoids any delay in loading a new over state because the image is already loaded because it is the same image. That is the basis for all sprite images (google css sprites).
    You make it sound like you have to have an image slice that is twice as high as my original button that you chopped up?! (Isn't that how sprites work?)


    Debbie

  9. #34
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    So I was able to implement your code and suggestions and things look really nice!!

    However, one small problem...

    I have pages with buttons on them that are not currently associated with a form.

    For example, after a person leaves a comment, I post a confirmation message and then give them the ability to "Return to Article" or "Go to Home Page" as seen in Post #27 above.

    Is there a way to implement you awesome solution with these non-form-based, standalone buttons??

    (Since you created the sprite from my original buttons, there really isn't any way to tell whether a button uses your sprite-approach or is an image button - except for the hover-over behavior. So, I suppose I could keep using my image buttons in cases like this, however, if I can implement your solution site-wide, that would be the best!)

    Thanks,


    Debbie

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can turn anchors into the same buttons with basically the same routine.

    Here's an example.

    It's more or less the same code with the text-decoration and inline block properties added.

  11. #36
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I assumed we were talking about background images [...]
    Irrelevant background decoration and nothing to do with the control; if you need a image to convey meaning or other content then you'd use BUTTON that is all I was explaining. I know what you were getting at; if you just want to style a button (and the image content doesn't matter one iota) then use CSS, its horses for courses. I've already mentioned the benefits or more correctly the appropriate usage or contextual differences.

  12. #37
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    I think we're splitting hairs here

    I'm not trying to tell anyone which type of button they must or should use. I'm just highlighting the fact that unless you are supporting IE6- then there is no major difference between using <button> or <input type="submit />.
    unless the submit button has text that expands over 2 or more lines. If so, then <button> must be used, right?

    Wasn't <button> created for <input type="submit" /> that contained text that expanded at over multiple lines?

  13. #38
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Technically if the text does go over two lines then yes BUTTON is used. Really BUTTON was created for containing richer content not just wrapping text or using an IMG whereas INPUT cannot contain content as it's EMPTY. However, in 1999, CSS support in some mainstream browsers was let's say very 'iffy'.

  14. #39
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You can turn anchors into the same buttons with basically the same routine.

    Here's an example.

    It's more or less the same code with the text-decoration and inline block properties added.
    Paul, my Form Submit Buttons and Standalone Buttons look great!

    Thanks!!

    One small annoying thing, though...

    When I tab on to a button, I get this annoying dotted box around the text.

    Is there a way to eliminate that?


    Debbie

  15. #40
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It's probably the focus; if you want to make is extremely HARD and inaccessible for people who use keyboards to navigate your page then remove it... Otherwise think very carefully and leave it be (yes you can remove it) but like I said, it might be unwise to do so for obvious reasons.

  16. #41
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding focus styles, I like to go bold. Something like:
    Code:
    a:focus, input[type=submit]:focus, etc. { outline: 2px solid #ffaa00 }
    a:focus:active, etc. { outline: 0 }
    The 2nd line is just what I do for browsers (e.g. Ffox) that show focus styles while clicking elements.
    What do these lines do??
    You must be very new to CSS.


Bookmarks

Posting Permissions

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