Reputation: 189
I am trying to align my text to the bottom but also make my entire <li>
a hyperlink. What I am missing to do this?
I tried to do the a tags before the li tags earlier, but could not get the positioning to work properly.
Fiddle here: http://jsfiddle.net/txupvyuj/
.navigation {
max-height: 120px;
height: 100%;
width: 100%;
position: relative;
}
.navigation .navmenu {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.navigation .navmenu .navbox {
background: #0070a2;
text-decoration: none;
text-align: center;
display: inline-block;
width: 120px;
height: 120px;
max-height: 120px;
max-width: 120px;
position: relative;
}
.navigation .navmenu .navbox .navlink {
position: absolute;
bottom: 0;
right: 0;
left: 0;
font-family: 'Helvetica';
font-size: 16px;
color: #fff;
text-decoration: none;
}
<div class="navigation">
<ul class="navmenu" style="display: inline-block; list-style-type: none;">
<li class="navbox"><a class="navlink" href="/home">Home</a></li>
<li class="navbox"><a class="navlink" href="/about">About</a></li>
<li class="navbox"><a class="navlink" href="/projects">Our Projects</a></li>
<li class="navbox"><a class="navlink" href="/contact">Contact Us</a></li>
<li class="navbox"><a class="navlink" href="/login">Client Login</a></li>
</ul>
</div>
Upvotes: 1
Views: 28
Reputation: 20359
Give your links width and height 100%, so they cover the <li>
element completely. Then you can use a span aligned bottom to keep the text at the bottom of the <a>
tag.
.navlink {
width: 100%;
height: 100%;
}
.navlink > span {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
}
Full, live example:
.container {
max-width: 1200px;
width: 100%;
position: relative;
}
.navigation {
max-height: 120px;
height: 100%;
width: 100%;
position: relative;
}
.navigation .navmenu {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.navigation .navmenu .navbox {
background: #0070a2;
text-decoration: none;
text-align: center;
display: inline-block;
width: 120px;
height: 120px;
max-height: 120px;
max-width: 120px;
position: relative;
}
.navigation .navmenu .navbox .navlink {
position: absolute;
bottom: 0;
right: 0;
left: 0;
font-family: 'Helvetica';
font-size: 16px;
color: #fff;
text-decoration: none;
}
.activenavbox {
background: #0698d3 !important;
}
.navlink {
width: 100%;
height: 100%;
}
.navlink > span {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
}
<div class="navigation">
<ul class="navmenu" style="display: inline-block; list-style-type: none;">
<li class="navbox"><a class="navlink" href="/home"><span>Home</span></a></li>
<li class="navbox"><a class="navlink" href="/about"><span>About</span></a></li>
<li class="navbox"><a class="navlink" href="/projects"><span>Our Projects</span></a></li>
<li class="navbox"><a class="navlink" href="/contact"><span>Contact Us</span></a></li>
<li class="navbox"><a class="navlink" href="/login"><span>Client Login</span></a></li>
</ul>
</div>
Upvotes: 1
Reputation: 969
You can do something like this, just add the following style:
.navigation .navmenu .navbox .navlink {
top:0;
line-height:200px;
}
Here is the example: http://jsfiddle.net/txupvyuj/2/
Upvotes: 0