CODEWITHSUNDEEP
htmlcss
Lars Fredrik
Lars Fredrik

Reputation: 15

Remove text decoration when div is linked

So I made a div as a box with text. When I then put it in < a href="#" > tag It looks like this:

https://i.gyazo.com/8103b9cc1968842e88afa4c4971b64ea.png

My problem is that I can't remove the line under the text.

My code:

HTML:

<div class="sommersalg">

    <div id="prosent">
        50%-75%
    </div>

    <p>SOMMERSALG</p>

    <a href="produkter.html">
        <div id="handle">
            HANDLE NÅ
        </div>
    </a>

</div>

CSS

.sommersalg a #handle {

    margin: auto;
    border-radius: 7.5px;
    position: relative;
    top: -290px;
    color: #586e72;
    background-color: white;
    font-size: 15px;
    width: 250px;
    padding: 15px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    box-shadow: 0px 2px 5px #3686a3;
    text-decoration: none;
}

.sommersalg #handle:hover {
    top: -289.25px;
    box-shadow: 0px 0px 0px #3686a3;
    text-decoration: none;
}

Upvotes: 0

Views: 1807

Answers (3)

Jan Franta
Jan Franta

Reputation: 1721

You have to set the <a> tag to text-decoration: none;. Not the div inside.

.sommersalg a #handle {

    margin: auto;
    border-radius: 7.5px;
    position: relative;
    top: -290px;
    color: #586e72;
    background-color: white;
    font-size: 15px;
    width: 250px;
    padding: 15px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    box-shadow: 0px 2px 5px #3686a3;
    text-decoration: none;
}

.sommersalg #handle:hover {
    top: -289.25px;
    box-shadow: 0px 0px 0px #3686a3;
    text-decoration: none;
}

.sommersalg a {
  text-decoration: none;
 }
<div class="sommersalg">

    <div id="prosent">
        50%-75%
    </div>

    <p>SOMMERSALG</p>

    <a href="produkter.html">
        <div id="handle">
            HANDLE NÅ
        </div>
    </a>

</div>

Upvotes: 4

Geff
Geff

Reputation: 49

The problem is with div element inside the element, as discussed here. Have you added an html doctype?

The "text-decoration: none;" is all right in .sommersalg a. You do not need to add a :hover part.

Upvotes: 0

amdev
amdev

Reputation: 7460

first of all put the text inside of a p tag , then use this code in your CSS file :

#handle > p { text-decoration:none;}

instead of p tag u also can use span , by then your css should be :

#handle > span {text-decoration:none;}

just note that p is blocked by nature (means that it takes whole width) but span is not and it just takes what ever it needs from width!

Upvotes: 0

Related Questions