After developing CSS for so long, it’s rare that one would encounter anything during development that is new and practical, nonetheless life-changing. When dealing with mad scientists such as graphic designers, whose focus is not in semantic markup, document flow, or helping to make the life easy on a development team, there are times where you need to be creative and experiment with new techniques. Carving out the style-sheet for our own website would be one of those times.
In viewing our website, I’m sure you’ve come across the slideshow interface at the top of various pages, with the 1, 2, 3 navigation in switching between slides:
Horizontal navigation through unordered lists is nothing out of the ordinary, and is used at least once or twice every time we develop an interface, which is presumably the same situation for most authors of CSS. Our primary issue is that based on design. the navigation requires a couple factors:
- The navigation is inline
- The numbers are positioned on top of the content
- The navigation is right-aligned
Let’s start with some basic HTML markup for the unordered list navigation:
<ul class="moneyshot_tabs">
<li><a title="Click to View" href="#moneyshot_01"></a></li>
<li><a title="Click to View" href="#moneyshot_02"></a></li>
<li><a title="Click to View" href="#moneyshot_03"></a></li>
</ul>
Normally, my CSS declarations for basic inline navigation would look like the following:
.moneyshot_tabs {
list-style: none;
width: 670px;
}
.moneyshot_tabs li {
display: inline;
}
.moneyshot_tabs li a {
background: url(images/bg_numbers.png) top left no-repeat;
color: #FFF;
display: block;
float: left;
padding: 2px 0 0 0;
}
Pretty simple. This sets all the list elements inline, appearing horizontal, rather than vertical. The width on the UL is for the constraints our particular layout, and the anchors have some additional styles applied for graphics. That takes care of our first requirement:
- The navigation is inline
- The numbers are positioned on top of the content
- The navigation is right-aligned
Positioning the navigation around the content isn’t too much of a challenge either. Let’s assume the navigation falls below the content inside of the markup, and appears at the bottom:
.moneyshot_tabs {
list-style: none;
margin: -30px 0 0 -10px;
position: relative;
width: 670px;
}
Setting the UL to be relative to the elements around it allows it to move more freely across browsers, eliminating rendering issues that deal with quirks mode. Applying a top negative margin positions the list on top of the content, since it appears below it in the navigation. A negative left margin pulls it into the content, as opposed to being on the right-most edge. At this point, we’ve accomplished two requirements:
- The navigation is inline
- The numbers are positioned on top of the content
- The navigation is right-aligned
The real challenge is consistently aligning the numbers right. Let’s look at a couple options:
- Floats
- Margin / Padding
- Text Alignment
Floating: If we were to float the LI’s or the A tags, we would run into some issues. Based on document flow, the browser will float the elements in reverse order if they are floated right, forcing the numbers to appear in reverse order:
3, 2, 1
In reality, this can then be solved by rendering the pagination in reverse order:
<li><a title="Click to View" href="#moneyshot_03"></a></li>
<li><a title="Click to View" href="#moneyshot_02"></a></li>
<li><a title="Click to View" href="#moneyshot_01"></a></li>
This wouldn’t be semantic at all, and cause some issues with accessibility and indexing. Floating these elements also causes some rendering issues with the z-indexing of the content. It looks like floats won’t cut it.
Margins / Padding: Since the UL is the containing element, we could apply a left margin or left padding to push the numbers to the right. This would prove to be more of a pain than it’s worth, since the numbers can vary.
Assume you have 3 numbers total. In order to push the 3rd and final number all the way to the right, we would have to apply a left margin of 500 px or more. Say a different version of the UI has only 2 numbers, at this point we have to apply more margin to push the numbers further, since the 3 is not there, leaving a gap:
Sure we would do some math and count the amount of number elements, and apply dynamic margins, though that’s extra development time and processing power that just doesn’t need to happen. Looks like margins and padding are ruled out.
Text-Alignment: The remaining viable option appear to be text alignment. This would make sense in terms of practicality since the text is, well, aligned to the right. Why force floats and display properties on something that should make such simple sense. Let’s try it out:
.moneyshot_tabs {
list-style: none;
margin: -30px 0 0 -10px;
position: relative;
text-align: right;
width: 670px;
}
Text-align is pretty odd at times. It only works if you apply it to the block level parent, since it affects the text and elements found within the element you apply it against. Should you apply text-align to an inline element (such as the LI’s), nothing will occur, since there is no box-model boundary for the text-alignment to reference.
Seems to work, except for the anchor hit states. The anchors by default are inline elements. Much like the text-align issue, inline elements cannot have width and height properties properly applied to them. Since we want fat hit states and nice graphics on our navigation, there has to be a way to make them larger. Let’s assume we turn them into block-level elements. This will provide them the ability to have boundaries and display properties such as a width and height. Though once we do this, they stack, and no longer respect the text-align property set on their parent:
Well there’s actually a way to cure this: “inline-block.” According to quirksmode.org:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
This helps us in more ways than we can imagine. It allows us to provide dimension properties to the anchor tags, but they will not stack, and will still respect the text-align property applied previously. Let’s modify our markup, setting this property and giving the anchors some dimension:
.moneyshot_tabs li a {
background: url(images/bg_numbers.png) top left no-repeat;
color: #FFF !important;
width: 20px;
height: 18px;
display: inline-block;
padding: 2px 0 0 0;
text-align: center;
}
The width, height, and padding settings are based on the background image being used to produce the rounded corner effect. Text-align: center allows the numbers to be positioned perfectly in the center of the rounded box. Check out the final result:
Revising our list of requirements, it looks like we now accomplished everything from the original design…
- The navigation is inline
- The numbers are positioned on top of the content
- The navigation is right-aligned
Before using this technique, one should be aware of a couple known circumstances, from QuirksMode.org:
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Firefox 2 and lower don’t support this value. You can use -moz-inline-box, but be aware that it’s not the same as inline-block, and it may not work as you expect in some situations.
You can see this element in action by visiting our homepage, and can read more about inline-block at the following URL:
http://www.quirksmode.org/css/display.html
