Post Archive
› June 7, 2005
Float Minitabs
The natural follow-up to Inline Minitabs is Float Minitabs. In this article we'll see a variation on minitabs that uses background. Nothing really new: Dan Cederholm, the creator of the original Minitabs, also worked on a Minitabs version with background, but the version I'm going to present is quite different and perhaps some of you could find some useful tips from this entry.
The implementation of the menu we're going to see is logical, hack-free and cross-browser friendly. In fact the menu is also easily done with inline lists: but the problem is IE5, this browser does not implement padding correctly on inline elements.
The examples of this article have been tested with success in IE5, IE5.5 and IE6, Opera 7.6, Firefox 1.04 and Safari. I believe support should be extended to all modern browsers. Now, let's start.
Here's the example. As markers, I've used two small star-icons to get something different and (I hope) appealing. The menu has two images with rollover, and uses float but it's self-contained. The markup is a simple unordered list:
<ul id="minitabs">
<li><a href="#">home</a></li>
<li><a id="current" href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
Now, let's see the CSS with key declarations emphasized:
ul#minitabs{overflow: auto;width: 100%;list-style: none;margin: 0;
padding: 0;border-bottom: 1px solid #CCC;font-weight: bold}
ul#minitabs li{float: left;margin: 0;padding: 0 7px}
ul#minitabs a{float: left;text-decoration: none;padding: 4px 0 16px;
background: url(star.gif) no-repeat center bottom;
color: #999;text-align: center}
ul#minitabs a#current,ul#minitabs a:hover{color: #666;
background: url(star2.gif) no-repeat center bottom}
ul#minitabs a#current{color: #06F}
Let's start from the list: in order to contain floats inside it without structural markup
I've adopted the excellent Simple clearing of floats
technique. The two declarations that serve this purpose are overflow: auto;width: 100%;.
Next, we'll remove the natural bullets from the list, remove padding and margin and add a bottom border one pixel tick.
The list-items are floated in order to put them side by side, and a 7px horizontal padding is added to make a more breathy menu.
Also links are floated. Some of you may know that floated elements are in fact automatically promoted as block-level according to CSS specs. This will help us a lot in getting the right formatting model to place the background. A vertical padding is added to links: the important value is the bottom one, that should be at least the same of the icons height. The icon is positioned at the center bottom of links.
Finally, for the active link and for the :hover state, we simply declare a more notable image. The fact that the same image is used for the active link and the hover state also allow us to get a instantaneous rollover without preload. Some of you might recall the good CSS uberlink tutorial, wich uses the same technique.
That's it, let's see again the example. I also did a small variation on the theme: as you can see mini-icon are now above the links. This was simply done swapping top and bottom padding of links and placing backgrounds on top instead of bottom. Enjoy!
Comments
1. June 7, 2005 11:22 PM
2. June 8, 2005 12:38 AM
Alessandro Posted…
Hi Andrew, with "visual lag" you mean "flickering"? It's strange because I did not notice it (all IE versions from 5 to 6 on Win XP). Yes, if the problem is annoying a possible fix could be the one you suggested.
3. June 8, 2005 12:56 AM
Andrew Krespanis Posted…
My bet is that you didn't notice it because you were testing with local files. We have an absurdly fast connection at work and I can still see it (ie5, 5.5 & 6)
The following version of your CSS won't have the same problem (untested but confident ;)
ul#minitabs{
overflow: auto;width: 100%;list-style: none;
margin: 0; padding: 0;border-bottom: 1px solid #CCC;
font-weight: bold
}
ul#minitabs li{
float: left;
margin: 0;
padding: 0 7px;
background: url(star2.gif) no-repeat center bottom
}
ul#minitabs a{float: left;text-decoration: none;padding: 4px 0 16px;
background: url(star.gif) no-repeat center bottom;
color: #999;text-align: center}
ul#minitabs a#current,ul#minitabs a:hover{
color: #666;
background-image:none;
}
ul#minitabs a#current{color: #06F}Other than that, nice article :)
4. June 9, 2005 03:29 AM
5. June 10, 2005 08:11 AM
Peter Costello Posted…
Alternatively, if you include both background states on the one image and offset the image by 50px on hover you will only have to load one image and eliminate the lag.
Nice Post BTW.
6. June 10, 2005 01:17 PM
Alessandro Posted…
Andrew, I still can't see the lag you're referring to, but as far I can think it doesn't involve flickering with reload of background, but just a visual latency in IE. Thanks for the alternative: since I didn't notice the problem, I did not think about it. Another one could be assign the hover/active image to both list-items and hover/active links.
Peter, in order to use fast CSS rollover the menu should be rethinked. This rollover technique can work only when (at least) one of the dimensions of the links is setted, so it won't in this case.
7. June 14, 2005 12:32 PM
Ryan Christie Posted…
If you want to emulate the flickering, you have to play with options in Internet Explorer. Go to Tools > Internet Options... > General > Temporary Internet Files > Settings, and then highlight "Every visit to page" and set it by choosing Apply at the bottom. (sorry if you already know this, but others may not)
Whenever I install WinXP, my IE always defaults to "Automatically", but I've heard about this problem from people that wouldn't normally play around in the options area, and definitely not with that setting. Anyway, any other setting besides "Every visit to page" will stop the flickering.
This is a glitch in the programming on Microsoft's part, and it has nothing to do with CSS bugs. There are ways to fix it with forced image caching, but those methods are mostly unconventional.
8. June 14, 2005 12:38 PM
Ryan Christie Posted…
Another note - I did an analysis on this problem for a potential client after they had mentioned that it was a problem for them. There are other solutions that would entail changing the graphics files loaded by the browser, but I was going off the point of working with what they already had in place. I compiled the information from multiple sources.
It may be of some use to you - IE6Win Flickering Test Case
9. June 14, 2005 02:40 PM
Nate Posted…
Thats a nice test case Ryan, I'll bring that up to the top for folks who might miss it otherwise.
10. June 14, 2005 03:18 PM
Alessandro Posted…
Thanks for pointing this out, Ryan. Yes, with the settings "on every visit of the page" in effects the menu suffers for flickering with reload of images. Perhaps it's because I used gifs... I'll update the the technique soon, guess by double-buffering background images.
11. June 15, 2005 01:48 AM
Alessandro Posted…
Nope.. I did some tries, and apperently there's no way to fix flickering problem just playing with backgrounds. I tried to use JPGs instead of GIFs, applying the technique Andrew suggested, tried to double-buffer the hover/active images both on list-items and hover/active links, but no way to fix it... I've also noted that both uberlink menu and Dan Cederholm's Mini-tabs shapes suffers from this annoying problem... I'll post a follow-up as soon as I get the solution.
12. June 16, 2005 03:49 PM
Matthijs Posted…
Also of interest might be the articles at fivesixseven: ie6flicker and Flicker-free pgacom at simplebits. In those articles the flickering problems are resolved. Sometimes they have something to do with the server settings, besides the already mentioned problems with the IE settings.
13. June 21, 2005 01:42 PM
Bruce Hodo Posted…
I've done a bunch of sites with 10 or more pages, so I make frequent use of server side includes (SSI) for all reusable elements. For navigation, I place the navigational HTML in its own SSI. In order to handle the "uberlink", I assign an id or class to the BODY tag, and an id to each navigation item. Then all I have to do is define the cascade for the uberlink in CSS. This negates the need to define the nav and uberlink in each page. (Great for Database driven sites!)
14. June 22, 2005 11:20 AM
'ju:femaiz Posted…
Nice to see a tutorial on this... I had actually done something quite similar for a client (the music lounge for the top navigation, though used margins instead of padding for the separation. May give the padding method a go, since the margin method comes a cropper in Safari...
Andrew Krespanis Posted…
This suffers the visual lag in IE (hover img's loading). If you put the rollover images on the <li> and set the <a> background to transparent on :hover, you won't have this problem.