Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Create a graphical button with img and text?

    I'm trying to create a graphical button with custom images and text on it. My approach was to split the generic button image into 3 parts:


    (Note: I stored these locally as 'button_left.gif', 'button_middle.gif' and 'button_right.gif')

    Then create a borderless table with these images as background, and put the desired content (text and/or images such as this random icon.gif) in the middle.

    Below is what I got so far. Three questions:
    1. Am I on the right track, or should I do this completely differently? (e.g. no tables at all, and just div/span or something?)
    2. On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
    3. Is there a way to not make the table break to a new line? I.e. could I put this button thing somewhere between regular text?


    Thanks a lot in advance!

    Here's my current HTML:
    Code:
    <html><head>
    
    <style type="text/css">
    <!--
     a { text-decoration: none; } 
     table { border-spacing: 0; }
     td.ButtonMain { vertical-align: center; font-family: Arial; font-weight: bold; color: #ffffff; }
     img.ButtonImg { border: 0; vertical-align: middle; }
    -->
    </style>
    
    </head>
    <body text='#000000' bgcolor='#ffffff'>
    
    <a href='some/other/page'>	
    <table><tr class='ButtonRow' height='68px'>
    <td background='button_left.gif' width='36px'></td>
    <td background='button_middle.gif' class='ButtonMain'>
    
    <img src='icon.gif' class='ButtonImg'> Click here for something wonderful to happen!
    
    </td>
    <td background='button_right.gif' width='36px'></td>
    </tr></table>
    </a>
    
    </body></html>

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I have to say it. Using a table for that is the most ridiculous thing I have ever heard of. Learn the <button> element.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Bram2,
    Dr Howard is right, as blunt as he is. There are better ways than using tables to accomplish that.
    I have a demo up that shows how to do something similar to what your trying but it only uses one image.

    Here's an example with 2 images.

    Am I on the right track, or should I do this completely differently? (e.g. no tables at all, and just div/span or something?)
    On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
    Is there a way to not make the table break to a new line? I.e. could I put this button thing somewhere between regular text?
    -Definitely divs or a ul... not tables
    -Gotta love IE6. That gap should go away if you float your images...
    -not sure, have to see the code to see why it's breaking.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    This worked just fine for me:
    Code:
    <head>
    <style type="text/css">
    div#button {
    width: 87px;
    height: 68px;
    margin: 1% auto;
    background: transparent url(http://img234.imageshack.us/img234/5577/buttonredww4.gif) no-repeat center scroll;
    }
    
    div#text {
    width: 87px;
    height: 68px;
    text-align: center; /* For IE */
    margin: 0 auto;
    padding-top: 25px;
    font-family: verdana;
    font-size: 0.75em;
    font-weight: bold;
    color: #0f0;
    </style>
    </head>
    <body>
    <div id="button"><div id="text">Text Here</div></div>
    </body>
    Looked ok in Firefox and IE. Play with it and see how you want it. BTW, download the button image if you want it:

    Last edited by Major Payne; 12-01-2008 at 07:46 AM.
    ☠ ☠RON☠ ☠

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    This ALA article may help you, http://www.alistapart.com/articles/slidingdoors/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    I have to say it. Using a table for that is the most ridiculous thing I have ever heard of. Learn the <button> element.
    Hehe, no offence taken

    The idea behind using table was that I could use my button part as a repeating background, and put whatever I wish on top of it. Wasn't aware that this could also be done with menu lists and divs.

    What is the <button> element? (Or do you mean just using a custom 'button' class and then apply some css with that as Major Payne demonstrated?)

    Quote Originally Posted by Excavator View Post
    Hello Bram2,
    Dr Howard is right, as blunt as he is. There are better ways than using tables to accomplish that.
    I have a demo up that shows how to do something similar to what your trying but it only uses one image.

    Here's an example with 2 images.
    Excellent, that's really helpful to me. Thanks a lot!

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Bram2 View Post
    What is the <button> element?
    http://w3schools.com/tags/tag_button.asp

    However, in my opinion the button element should only be used in conjunction with forms (if at all) since it has no default action and isn’t very useful in terms of progressive enhancement when used randomly in a document.

    Another useful article: http://particletree.com/features/red...utton-element/

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again for all the help. Much appreciated.


  •  

    Tags for this Thread

    Posting Permissions

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