User14289
User14289

Reputation: 189

Trouble making my entire box sized <li> element a hyperlink

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

Answers (2)

Maximillian Laumeister
Maximillian Laumeister

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

Rise Ledger
Rise Ledger

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

Related Questions