Include link in a container

Asked

Viewed 5,051 times

4

I have a container in my code and I need it to be clickable, with href, let’s assume that by clicking it directs 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;
}
html css html5

  • Can you better define what is clickable? If it’s the "little hand" cursor question, just add cursor: Pointer; in class . container

  • Sorry, I need him to take a link with href and tals. Only I tried to put as put on buttons and etc but it was not. I don’t know if it has anything to do with class or if it’s a matter of writing anyway.

  • The question then would be to "transform" the div into a link? Via javascript can be done: <div class="container" onclick="window.location.href='http://google.com'">

3 answers

3

The exchange of DIV by a 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, no block elements within <A>. In practice they worked, but did not pass the validation, therefore, a risk of side effects to be avoided.

Further reading: Block level links and Accessibility

This response is equivalent to the second suggestion of @Guilherme Bernal’s reply, which I consider better than the first, and so I elaborated with the relevant details.

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 won’t behave exactly like an ordinary link. You cannot for example 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. For this use the display: block:

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

  • My problem is that I don’t understand JS yet, so basically I have to deal with this with HTML 5, because I’m using a code that has already been done, and I just need to put the link, because this container already has background and various things. I just wanted to put it as a link anyway, is there any way to do this without having to change the style.css, only moving the index?

  • 1

    @Vinícius Any of the options I have shown can be done by modifying only your html, if you prefer. The code is in the answer...

  • The second suggestion is better.

  • 1

    Using Javascript events such as onclick, inline in HTML.

  • 1

    @Rael No doubt. HTML should ideally contain neither visual nor behavior. Only the hierarchical and semantic structure of elements.

2

I recommend you put the tag inside the heading and paragraph tags, getting the code that 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 the W3C validation smoothly.

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

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

Don’t forget to import the jQuery library.

And in css just add the attribute cursor:poiter

I hope I helped. Good Luck!

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.