#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    22
    Rep Power
    0

    Need to add a link to a div, but validly.


    I've created and styled 3 simple divs to create 3 buttons containing text. I want each whole button to be clickable, not just the text within.

    The W3C html validator tells me I can't validly put a block level item (the div) inside an inline item (the anchor). How, then, do I make an entire button clickable and carry a page link? The only option that seems available to me is a background image link, which is not appropriate in this instance. Using an unordered list seems inappropriate too.

    <style type="text/css">
    .loginbutton { width:151px; height:13px; font-size:9px; font-weight:bold; letter-spacing:1px; text-align:center; color:#FFF; background-color:#97B0B2; padding-top:3px; margin:2px 0 5px 0; }
    </style>

    html:

    <a href="login.html" title=""><img src="img/logo-on-green.png" alt="" width="151" height="16" border="0" /><div class="loginbutton">LOGIN</div></a>

    Sorry if this is too basic a question!
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there sansarin,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    .loginbutton  {
        display:block;
        width:151px;
        height:23px;
        padding-top:16px;
        font-size:9px; 
        font-weight:bold; 
        color:#fff;
        letter-spacing:1px; 
        text-align:center; 
        background-color:#97b0b2;
        background-image:url(img/logo-on-green.png);
        background-repeat:no-repeat;
        background-size:151px 16px;
     }
    .loginbutton  span {
        display:block;
        width:151px;
        height:6px;
        margin-bottom:3px;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <a class="loginbutton" href="login.html" title=""><span></span>LOGIN</a>
    </div>
    
    </body>
    </html>
    coothead
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    22
    Rep Power
    0
    Originally Posted by coothead
    Hi there sansarin,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    .loginbutton  {
        display:block;
        width:151px;
        height:23px;
        padding-top:16px;
        font-size:9px; 
        font-weight:bold; 
        color:#fff;
        letter-spacing:1px; 
        text-align:center; 
        background-color:#97b0b2;
        background-image:url(img/logo-on-green.png);
        background-repeat:no-repeat;
        background-size:151px 16px;
     }
    .loginbutton  span {
        display:block;
        width:151px;
        height:6px;
        margin-bottom:3px;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <a class="loginbutton" href="login.html" title=""><span></span>LOGIN</a>
    </div>
    
    </body>
    </html>
    coothead
    Thanks very much Coothead. I copied and pasted your code into a test page. Some questions:

    1. Re .loginbutton - Not clear why you made height 23px or the padding-top 16px since that seems to just create a grey rectangle for the top half of the button, where the logo-on-green should be. That green logo is not visible on previewing your code.

    2. The use of span in the way you have is new to me. I don't understand what is happening or what it does. Where can I read up about it, please?

    Thanks again for your quick response and for being willing to help others.
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there sansarin,

    I did not have the benefit of your "logo-on-green.png" when coding your example.

    Give it to me and I will be able to test it in my code for you.

    coothead
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    22
    Rep Power
    0
    Originally Posted by coothead
    Hi there sansarin,

    I did not have the benefit of your "logo-on-green.png" when coding your example.

    Give it to me and I will be able to test it in my code for you.

    coothead
    Thanks, image is here http://www.arshavidya.org.uk/a/img/a...o-on-green.png
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there sansarin,

    check out the attachment to see the code with your image.

    coothead
    Attached Files
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    22
    Rep Power
    0
    Originally Posted by coothead
    Hi there sansarin,

    check out the attachment to see the code with your image.

    coothead
    Hey, that is good! I've now altered the span height to 1px and the .loginbutton height to 18px, making both elements the same height visually and separated by a 1px 'rule'. Now 'all' I have to do is figure out what you have done!

    I never knew span could be used like this. Thanks very much for your kind efforts.
  14. #8
  15. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86

    No problem, you're very welcome.

    coothead

    Comments on this post

    • sansarin agrees : Excellent solution

IMN logo majestic logo threadwatch logo seochat tools logo