CODEWITHSUNDEEP
css
milk
milk

Reputation: 434

How to make entire div clickable with css only

I'm trying to make an entire div be a clickable link, not just the text. I tried various methods like the one outlined here but all that does is make the shapes disappear.

So far I have this:

http://jsfiddle.net/n5xow3cd/2/

#productfooter {
width:100%;
max-width:500px;
height: 100px;
    margin:0 auto;
 }

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
    padding:0 7px;
}


#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;

}

#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
}

#stern a:hover {
    color:#fff;
}

What can I change to make the whole #stern clickable rather than just the text?

Thanks for any help!

Upvotes: 3

Views: 155

Answers (3)

emmanuel
emmanuel

Reputation: 9615

You could display .sterntext as table-row and #stern a as table-cell.

#productfooter {
    width:100%;
    max-width:500px;
    height: 100px;
    margin:0 auto;
}
#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732') no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}
.sterntext {
    z-index: 999;
    position: relative;
    height: 75px;
    vertical-align: middle;
    display: table-row;
}
#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638') no-repeat center;
    color:#fff;
    background-size:100%;
}
#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
    display: table-cell;
    vertical-align: middle;
    padding: 0 7px;
}
#stern a:hover {
    color:#fff;
}
<div id="productfooter">
    <div id="stern">
        <p class="sterntext"><a href="#">title title title title title title</a>
        </p>
    </div>
</div>

Upvotes: 1

tleb
tleb

Reputation: 4596

Can not edit HTML

/* For functional purposes */

div {
    width: 100px;
    height: 100px;
}

a {
    display: block;
    width: 100%;
    height: 100%;
}


/* For design purposes */

div {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}
<div><a href="#">text here</a></div>

We just set the a as a block and make him take full width and full height.

Can edit HTML

/* For functional purposes */

a {
    display: block;
    width: 100px;
    height: 100px;
}


/* For design purposes */

a {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}
<a href="#">text here</a>

We set the a as our block.

Upvotes: 1

Dzhambazov
Dzhambazov

Reputation: 490

just modify your HTML structure and put div inside of the a element.

<div id="productfooter">
    <a href="#">
        <div id="stern">
             <p class="sterntext">title title title title title title</p>
        </div>
    </a>
</div>

http://jsfiddle.net/n5xow3cd/3/

Upvotes: 1

Related Questions