Jason 0

The code below makes a large button like link, the problem is, only the text is a link, can I make the whole div be a clickable link? Also somewhere in the process the text lost its text color.

<style>
.notificationlink{
    border:#d8e2bd solid 6px;
    background-color:#fff;
    color:#d12f19;
    font-size:20px;
    font-weight:bold;
    width:220;
    padding: 3px ;
    margin: 6;
    text-decoration:none;
    -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
</style>
<div class="notificationlink" id="item6"><a href="">Testing 6</a></div>
  • what is a "css looking button"? — Andy Ford 11 months ago

3 answers

Edward Williams 493
5
points
This was chosen as the best answer

You could change the first line of CSS to apply the style to the link inside the div, and add 'display: block' like so:

<style>
.notificationlink a { /* adding 'a' applies the style to the link, rather than the div */
display: block; /* add this */
border: #d8e2bd solid 6px;
background-color: #fff;
color: #d12f19;
font-size: 20px;
font-weight: bold;
width: 220;
padding: 3px;
margin: 6;
text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px;
}
</style>
<div class="notificationlink" id="item6"><a href="">Testing 6</a></div>

Or, to save a couple of characters of code, change your HTML by moving the class to the link, instead of the div, still adding 'display: block', like this:

<style>
.notificationlink {
display: block; /* add this */
border: #d8e2bd solid 6px;
background-color: #fff;
color: #d12f19;
font-size: 20px;
font-weight: bold;
width: 220;
padding: 3px;
margin: 6;
text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px;
}
</style>
<div id="item6"><a class="notificationlink" href="">Testing 6</a></div>
Answered 11 months ago by Edward Williams
  • great, thanks, I tried adding to the link before but it messed it all up, display: block; fixed that — Jason 11 months ago
  • great, thanks, I tried adding to the link before but it messed it all up, display: block; fixed that — Jason 11 months ago
orta 244
0
points

Remember the display:block; line of code, you'll use that one a lot for making a's not just the shape of the text :)

Answered 11 months ago by orta
Tony Crockford 5195
0
points

I used the jQuery plugin 'fitted' to do just what you're asking for on this site: http://www.bclm.co.uk

Answered 10 months ago by Tony Crockford
Log in to post your answer