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

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2

    Clickable box div without image


    Hi all,

    Here the red box (ie not just the link text) is clickable and it does not use an image for the box.

    This is done with...

    Code:
    <a target="_blank" href="http://www.google.com"><div style="border: 2px solid; width: 200px; height: 50px; margin-bottom: 40px; background-color: red; text-align: center; line-height: 50px;" class="test">Google</div></a>
    ...but I think that putting the div tag inside the a tag is not good / semantic html.

    Can anyone please suggest a better way to do this?

    Thank you...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    868
    Rep Power
    275
    you could add the "styles" directly to the <A> tag, but, you'd need to also add the display:block; to make the ANCHOR tag "act" like a DIV.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by DonR
    you could add the "styles" directly to the <A> tag, but, you'd need to also add the display:block; to make the ANCHOR tag "act" like a DIV.
    @ DonR yeah awesome thanks I should have just thought of it as styling the link so here it is

    I think this is good / semantic html right?


    Code:
    <style>
    .cyan {
    display:block;
    border:5px solid cyan;
    height:60px;
    width:222px;
    text-align: center;
    background-color: pink;
    line-height: 50px;
    } 
    
    </style> 
    <a class="cyan" href="http://www.google.com">Google</a>
  6. #4
  7. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    ofcourse you can. There's a simple way to it. Simply add the style to your <a></a> tag.

    You may add some padding to widen its spacing: eg

    <a style="display:block;padding:10px 10px;" href="#"> Click Here </a>

    or if you don't want any text in it, then:

    <a style="display:block; width:50px; height:50px;" href="#"></a>
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by shellygill
    or if you don't want any text in it, then:

    <a style="display:block; width:50px; height:50px;" href="#"></a>
    Links that don't contain any text is bad for accessibility, usability, and SEO.

    It's much better to use some form of image replacement.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    40
    Rep Power
    9
    That div link is not beautiful, you can generate a better clickable link with this css button link tool at cssbuttoncode.com

IMN logo majestic logo threadwatch logo seochat tools logo