March 26th, 2013, 06:47 PM
Clickable box div without image
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...
...but I think that putting the div tag inside the a tag is not good / semantic html.
<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>
Can anyone please suggest a better way to do this?
March 26th, 2013, 06:55 PM
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.
March 26th, 2013, 07:44 PM
@ DonR yeah awesome thanks I should have just thought of it as styling the link so here it is
Originally Posted by DonR
I think this is good / semantic html right?
border:5px solid cyan;
<a class="cyan" href="http://www.google.com">Google</a>
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>
Links that don't contain any text is bad for accessibility, usability, and SEO.
Originally Posted by shellygill
It's much better to use some form of image replacement.
That div link is not beautiful, you can generate a better clickable link with this css button link tool at cssbuttoncode.com