Jump to content

Adding a Link to a Div?


justlukeyou

Recommended Posts

I want to add a link to a DIV.

 

One simple way is to place link outside the DIV

 

<a href= 'http://www.domain.com' class='headernavlink'><div class="headernavgrey">

Link Here

</div></a>

 

But I found a discussion which says it should and shouldn't be used.

 

http://bytes.com/topic/html-css/answers/724421-making-div-link

Does anyone know the correct method of adding a link to a div?

Link to comment
https://forums.phpfreaks.com/topic/232573-adding-a-link-to-a-div/
Share on other sites

You can place a block element such as a div, p etc inside of an inline element such as a span a

If you want this to be done you need to place span elements inside the a element and you could put a div around to position it, but its not really needed. see code below.

 

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/st0yle.css" />
        <title>link div</title>
<style type="text/css">
a.link-block{
        display:block;
        width:300px;
        height:400px;
        background: yellow;
        text-decoration: none;
        color:#333;
}
a.link-block:hover{
        background:yellowgreen;
}
.link-block span{
    padding:10px;
}
</style>
</head>

    <body>
            <div id="monkeys">
                <a class="link-block" href="/">
                    <span>
                        lalalala lalalala lalala
                    </span><br />
                    <span>
                        lalalala lalalala lalala
                    </span>
                </a>
          </div>
        
    </body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.