How do I make a div clickable in html and css without underlining?

Question

Goodday,

I'm currently working on a page where I want to have a div clickable.

Got this far:

<a href="http://coteax.me/">
 <div id ="rectangle">
   <div id="iconx"></div>
 <p class="rec-text"> Portal for projects</p>
 </div>
</a>

It works but the text is underlined with a purple line (Hypertext ?) How do I make it so that the purple line is gone and the text just clickable ?

Many thanks in advance!

score 0 · Answer 1 · answered Sep 20 '17 at 11:19

0

You can just remove the underline by CSS, Check the CSS part of the example.

Example from Link:

The HTML:

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

The CSS:

.boxhead .otherPage {
    color: #FFFFFF;
    text-decoration: none;
}

answered Sep 20 '17 at 11:19

MartinLeitgeb

63
6

Thanks! I'll take a look at it! – Unknown Sep 20 '17 at 11:25

score 0 · Answer 2 · answered Sep 20 '17 at 11:24

0

HTML

<div id="iconx">
...
</div>

CSS

#iconx {
 cursor : pointer;
}

JQUERY

$('body').find("#iconx").delegate("click", function() {
 location.href="http://coteax.me/"
})

answered Sep 20 '17 at 11:24

Riku

652
1
9
24

score 0 · Answer 3 · answered Sep 20 '17 at 11:25

Just Use text-decoration: none.

<a href="http://coteax.me/" style="text-decoration: none;"><div id ="rectangle"><div id="iconx"></div><p class="rec-text"> Portal for projects</p></div></a>

OR (Using External CSS)

a {
    text-decoration: none;
}

<a href="http://coteax.me/">
    <div id ="rectangle">
        <div id="iconx"></div>
        <p class="rec-text">Portal for projects</p>
    </div>
</a>

How do I make a div clickable in html and css without underlining?

3 Answers3