Something I’ve noticed a lot recently is that some websites use fixed-widths while creating tabs in a navigation system using CSS. Although this would work as a temporary fix, setting fixed-widths can be a hassle when the text in your tabs has to change. Every time you change the text, you will have to change the widths accordingly. And since the widths are fixed, you either have to alter the widths of each tab separately (by setting an ID like #tab-1, #tab-2 etc for each tab) or change the widths of all the tabs globally. Since each tab will have the exact same width when changing globally, some tabs will have more room than the other. The CSS for a menu system that uses the same fixed-width for all tabs would look something like this:
- #menu li {
- border:1px solid #999;
- border-bottom:none;
- width:120px;
- height:24px;
- line-height:24px;
- text-align:center;
- …
- }
If you take a closer look, you will notice that since the second tab has more text, all the other tabs have to be as wide as the second tab, otherwise some of the text of the second tab will be hidden. We could fix this by setting a unique ID for each tab(like I said, by setting an ID like #tab-1, #tab-2 etc for each tab) and then setting a width for each tab, but that just seems even more complicated. Also notice how we have to set a ‘line-height’ for the text in the tabs to align in the center vertically, and ‘text-align’ to center it horizontally.
A better way to do this is, is to NOT to use a width at all. Setting a width is like setting a limit to how much text you have inside the tab. The trick is to use paddings. You basically put text inside the tab, and push the tab from the inside from the left and right sides. This way, no matter how many letters each tab has, the tab will keep pushing to the sides to fit the text. So now, our CSS should look like this:
- #menu li {
- border:1px solid #999;
- border-bottom:none;
- padding:6px 10px 6px 10px;
- …
- }
This way, no matter how much text you have, the tabs will look fluid and less constrained. An easy fix that will save you a lot of trouble down the road.
