CODEWITHSUNDEEP
htmlwordpress
suMi
suMi

Reputation: 1546

make entire <article>-tag a link

I'm working on a wordpress customisation where I need an entire article tag to be a link.
Basically when I hover the <article> the background color changes (working) but I cannot figure the html to make that entire tag into a link. I've tried both ways

<a href="mylink">
    <article>
        /*article content: an image, header &text*/
    </article>
</a>

and

<article>
    <a href="mylink">
        /*article content: an image, header &text*/
    </a>
</article>

Upvotes: 4

Views: 12431

Answers (2)

Kijan Maharjan
Kijan Maharjan

Reputation: 1031

The first code should work. add class to <a> tag and use css display:block property.

.block{
  display: block;
}
<a class="block" href="mylink">
    <article>
        <img src="http://placehold.it/400/400" alt="" />
    </article>
</a>

Upvotes: 2

suMi
suMi

Reputation: 1546

Thanks Kijan! your answer almost works. I had to adjust it like this:





    .parent{
	position: relative;
    }
    .block{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    }


    <div class="parent">
        <a class="block" href="mylink">
            <article>
                <img src="http://placehold.it/400/400" alt="" />
            </article>
        </a>
    </div>

so basically giving the link a height was essential. and for it to cover the entire article I made it absolute position and take the whole article background. Maybe this helps others.

Upvotes: 0

Related Questions