CODEWITHSUNDEEP
htmlcsshyperlink
James Korden
James Korden

Reputation: 634

<a> tag not covering correct area of <div>

I have the following:

HTML:

    <div id="about" class="menu1"> <a href="#">About</a></div>
    <div id="aboutsub">
        <div id="team" class="menu2"> <a href="">Team</a></div>
        <div id="experience" class="menu2"> <a href="">Experience</a></div>
        <div id="difference" class="menu2"> <a href="">Difference</a></div>
    </div>

CSS:

.menu1
{
    position: absolute;
    background: red;
    width: 60px;
    height: 21px;
    padding: 15px 20px;
}

.menu1 a
{
    display: inline-block;
    position: absolute;
    color: white;
    text-decoration: none;
}

.menu2
{
    position: absolute;
    background: purple;
    width: 80px;
    height: 42px;
    left: 115px;
}

.menu2 a
{
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

Fully viewable here: http://jsfiddle.net/snk42/1/embedded/result/

The problem I am having, is when I check the <a> element inside #about, I see the area start at the top left of the word "about", rather than filling the whole div.

How can I more easily center the text vertically while making the whole div clickable?

Also, I'm wrestling with why the menu2 tags aren't clickable if someone knows.

Upvotes: 1

Views: 1270

Answers (3)

Amit Joki
Amit Joki

Reputation: 59232

Just increasse the height and width of the menu2 and add some padding to the top.

Demo:http://jsfiddle.net/snk42/4/embedded/result

Upvotes: 0

user934902
user934902

Reputation: 1204

You need to make the anchor the width and height of the parent div, I also recommend box-sizing this element

.menu1 a {
    display: block;
    position: absolute;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    top: 0; left: 0;
}

.menu2 a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

}

http://jsfiddle.net/sjZe4/1/ <- Fiddle

Upvotes: 2

Bri.H.
Bri.H.

Reputation: 313

<a><div></div></a>

Upvotes: 0

Related Questions