Forums

Making an area link

Permalink
Is there an easy way to make a block area into a link? The easiest way to illustrate my question is to look at the page I'm trying to work with: http://spot5artstudio.com/store/...

You will find boxes at the bottom of the page that I created simply using the layout function along with the add-on 'Round Corners on Anything' -- now I want to make each of these areas (not just the text) a link to another page. Can anyone help? I'm not stupid, but fairly ignorant of CSS and PHP - so any instruction in that direction will have to be pretty basic - Thanks in advance.
 
braincramp replied on at Permalink Reply
braincramp
just give the link tag a class that will be rounded, then make sure additional CSS identifies it as display block and specify a width and float (most likely left) and you should be all set. If you didn't care about IE not having round corners you could ditch the addon and just use CSS exclusively.
jgaris replied on at Permalink Reply
Here's 2 jquery plugins you can use to achieve that effect:

http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-...

http://www.ollicle.com/projects/jquery/biggerlink/...
braincramp replied on at Permalink Reply
braincramp
This will get you most of the way there. You would need to adjust colors and such but this will have rounded corners in all but IE.
<a style="display:block; padding: 1em 1.5em; background: magenta; text-decoration: none; width:100px; color: rgba(0,0,0,.7); *color: #303030; font-weight: bold; text-transform: uppercase; border-radius: 1.75em; -moz-border-radius: 1.75em; font-family: Verdana; text-align: center; border: red 2px solid;" href="#">We have two big friendly dogs.</a>


You will probably want to put a hover effect on it as well and use it to change the background, like this 
a:hover {
background: #000;
color: #fff;
}