Question:
How do I get what comes after my NAV to not float?
Preface:
I am putting together a little reusable progress-tracker module to be plugged into some tools being built for internal use from within our firewall.
While cross-browser compatibility is nice, we only need to code against Chrome and FireFox. Those are the only browsers officially supported by our tech team.
Also, ANY and ALL suggestions for improvement are always welcome.
The Challenge: FLOATS!!
In order for the arrows to show correctly and behave intuitively, I had to right float the li‘s.
(by “had”, I mean “couldn’t think of a better way” 🙂
In order to prevent the whole nav from floating to the right, I had to left float that.
Now, whatever comes after the nav is right up there in-line with it.
Note:
You can also see and play with the code here on jsFiddle.
Code:
HTML:
<nav id="progress_tracker">
<ul>
<li><a href='#'>Grab a beer</a></li>
<li><a href='#'>Work a little more</a></li>
<li><a href='#' class="current">Take a Nap</a></li>
<li><a href='#' class="complete">Work like a dog</a></li>
<li><a href='#' class="complete">Grab a coffee</a></li>
</ul>
</nav>
CSS:
nav {
float: left;
}
nav#progress_tracker {
padding: 0.25em;
background-color: #1a3340;
border-radius: 1.75em;
}
nav ul li:last-child{ /* Remember. We are floating right, so last is furthest left */
margin-left: -1.7em;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline-block;
float: right;
position: relative;
padding: 0;
margin: 0;
}
nav ul li a{
display: inline-block;
vertical-align: middle;
color: #777;
background-color: DDD;
padding-top: 0.75em; /* top/btm padding need to be half of line-height */
padding-bottom: 0.75em; /* top/btm padding need to be half of line-height */
padding-left: 2em; /* left padding */
padding-right: 1em; /* right padding is (left-padding - depth-of-arrow (see below) */
line-height: 1.5em; /* line-height needs to be double top/btm padding */
}
nav ul li a:after{
width: 0;
height: 0;
position: absolute;
top: 0;
right: -1em; /* depth of offset (equal to depth of arrow) */
border-left: 1em solid #d9d9d9; /* depth of arrow (equal to depth of offset) */
border-top: 1.5em inset transparent; /* border thickness needs to match line-height */
border-bottom: 1.5em inset transparent; /* border thickness needs to match line-height */
content: ""; /* required to make all of this work */
}
nav ul li a:visited{
color: #888888;
}
nav ul li a.current{
font-weight: bold;
color: #777;
background-color: #FFBB00;
}
nav ul li a.current:after{
border-left: 1em solid #FFBF00; /* depth of arrow (equal to depth of offset) */
}
nav ul li a.complete{
color: #666;
background-color: #FFFFEE;
}
nav ul li a.complete:after{
border-left: 1em solid #FFFFEF; /* depth of arrow (equal to depth of offset) */
}
nav ul li:last-child a{ /* Remember. We are floating right, so last is furthest left */
border-top-left-radius: 1.45em;
border-bottom-left-radius: 1.45em;
}
nav ul li:first-child a{ /* Remember. We are floating right, so first is furthest rt */
border-top-right-radius: 1.45em;
border-bottom-right-radius: 1.45em;
}
nav ul li:first-child a:after{
border: none;
}
Thanks-a-bunch.
I know you said you wanted to keep the markup the same, but you had an issue with using
display:inline-block;and having space between thelielements. Here’s a working version without thefloatmess (example). It has:beforeand:after, each acting as half of the preceding arrow. I’ve added a:hoverstyle so you can test the hovering and see how to style it yourself.Note: This does not look as pretty when wrapped.
HTML
New CSS