CODEWITHSUNDEEP
csshtmlhyperlink
Merijn de Klerk
Merijn de Klerk

Reputation: 1023

Make full div clickable (html)

I have the following problem! I have buttons (divs) with a text hyperlink inside it. I want this hyperlink to be clickable on whole the div. I got this to work by doing this

HTML:

echo '<div id="tagsul"><a href="' . get_category_link( $category->term_id ) . '"       style="color:#FFF;" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></div> ';

CSS:

#tagsul{
width:190px;
height:40px;
margin-right:5px;
margin-left:5px;
background:#82e1a1;
text-align:center;
float:left;
margin-top:10px;
}

#tagsul a {
display:block;
height: 100%;
width: 100%;
text-decoration:none;
}

This all works fine. But the text is now displayed at the middle top of the div. But I want it to be displayed in the middle of the div from both perspectives (height and width)

I was thinking I could do something with a top padding but this doesnt work since the whole #tagsurl is clickable so when I use a padding at the top there will be a part under the button that is clickable too...

Upvotes: 2

Views: 1697

Answers (4)

Muhammad Hani
Muhammad Hani

Reputation: 8664

#tagsul{
width:190px;
height:40px;
margin-right:5px;
margin-left:5px;
background:#82e1a1;
text-align:center;
float:left;
margin-top:10px;
vertical-align: middle;
display: table;
}

#tagsul a {
display:block;
height: 100%;
width: 100%;
text-decoration:none;
vertical-align: middle;
display: table-cell;
}

Demo

Upvotes: 1

Joe Dyndale
Joe Dyndale

Reputation: 1071

The following works:

#tagsul {
    width:190px;
    height:100px;
    margin-right:5px;
    margin-left:5px;
    background:#82e1a1;
    text-align:center;
    float:left;
    margin-top:10px;
    display: table;
}

#tagsul a {
    text-decoration:none;
    vertical-align: middle;
    display: table-cell;
}

Upvotes: 0

evan.stoddard
evan.stoddard

Reputation: 698

There are a couple options. You can put the div in the href tag and style the div and it will be clickable or you can use the onclick parameter and use JavaScript.

Upvotes: 0

Quka
Quka

Reputation: 918

Remember to edit the height whenever you apply a padding. It should fix your problem.

Upvotes: 0

Related Questions