Include link in a container

4

I have a container in my code and I need it to be clickable, with href , let's assume that by clicking it, go to "Google.com". How can I do this?

<div class="project-2 v-center">
<div><!--v-center-->
    <div class="container">
            <h1>COMPADRE IPSUM</h1>
        <p>Eiiitaaa Mainhaaa!! Esse Lorem ipsum é só na brincadeira!!.</p>
    </div>
    <!--/.container-->
</div>
<!--/v-center-->

The class:

.container {
    position: relative;
    z-index: 2;
}
    
asked by anonymous 26.04.2014 / 16:54

3 answers

3

Switching from DIV to A allows the use of href traditional, and works even without JS:

CSS:

.container {
    display:block;
    position: relative;
    z-index: 2;
    text-decoration:none;
    ... outras estilizações necessárias ...
}

HTML:

<div class="project-2 v-center">
<div><!--v-center-->
    <a class="container" href="http://google.com">
        <h1>COMPADRE IPSUM</h1>
        <p>Eiiitaaa Mainhaaa!! Esse Lorem ipsum é só na brincadeira!!.</p>
    </a>
    <!--/.container-->
</div>
<!--/v-center-->

This solution only passes HTML5 validation.

In HTML4, block elements within <A> were not valid. In practice they worked, but did not pass validation, therefore, a risk of side effects to be avoided.

Further reading: Block level links and accessibility (en)

This answer is equivalent to the second suggestion of @ Guilherme Bernal's answer, which I think is better than the first, and so I elaborated with the relevant details.

    
27.04.2014 / 00:06
2

For this the simplest way is to use javascript in the onclick event of div :

<div style="cursor: hand;" onclick="location.href='www.google.com'">
  Qualquer coisa aqui
</div>

The problem with this is that it will not behave exactly like an ordinary link. For example, you can not right-click to copy the url, or click the middle button. A slightly better way is instead of trying to make the div behave like a link, is to make the link behave like a div. To do this use display: block :

<a href="www.google.com" style="display: block;">
  Qualquer coisa aqui
</a>
    
26.04.2014 / 17:07
2

I recommend you put the tag inside the title and paragraph marking tags, getting the code this way:

<div class="project-2 v-center">
    <div><!--v-center-->
        <div class="container">
            <h1><a href="http://www.google.com">COMPADRE IPSUM</a></h1>
            <p><a href="http://www.google.com">Eiiitaaa Mainhaaa!! Esse Lorem ipsum é só na brincadeira!!.</a></p>
        </div>
        <!--/.container-->
    </div>
    <!--/v-center-->
</div>

This way you pass W3C validation without any problems.

If you want to keep the container structure you need to use a bit of Javascript (jQuery) in the case:

<script type="text/javascript">
    $(document).ready(function(){
        $('.container').click(function(){
            window.location="http://seu.site.com/";
        });
    });
</script>

Do not forget to import the jQuery library.

And in css just add the attribute cursor:poiter

I hope I have helped. Good Luck!

    
30.04.2014 / 23:52