How to Style a Definition List with CSS | 3

How to Style a Definition List with CSS

Step 12

'Snazzy borders' styling

The "top" class and "bottom" class styling are very similar.

.top {
  display:block; 
  background:transparent; 
  font-size:1px;
  }
.bottom {
  display:block; 
  background:transparent; 
  font-size:1px; 
  border-top:1px solid #fff;
  }

Common styling

  • display:block; - makes the width the same as the #container width.
  • background:transparent; - makes the background transparent so that the body color will show through.
  • font-size:1px; - makes the font size 1px high (mainly for earlier versions of Internet Explorer) so that the nested <b></b> tags will have a default height of 1px unless we style them differently.

For the "bottom" class we also require a 1px solid top border to separate the last menu item from the curved bottom area.

‡ Step 12

The bottom 1px white border is now in place.

Step 13

Styling class b1

Top Line b1 (and also Bottom Line 4 of our curved border is a 1px high line with a white background and 5px wide margins.

.b1 {
  display:block; 
  height:1px;
  background:#fff;
  margin:0 5px;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */
  }

‡ Step 13

The first line of our curve should now be in place at the top and bottom of the Definition List.

You should note that the bottom curve is built in a reverse order of nested <b></b> tags.

Step 14

Styling class b2

Line two (b2) has a blue background, a 2px wide border and a 3px wide margin.

.b2 {
  display:block; 
  height:1px;
  background:#69c;
  margin:0 3px;
  border-left:2px solid #fff;
  border-right:2px solid #fff;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */
  }

‡ Step 14

The second line of the curve is now in place.

Step 15

Styling class b3

Line three (b3) has a blue background, a 1px wide border and a 2px wide margin.

.b3 {
  display:block; 
  height:1px;
  background:#69c;
  margin:0 2px;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */
  }

‡ Step 15

The third line of the curve is now in place.

Step 16

Styling class b4

The last line b4 has a blue background a 1px wide border and a 1px wide margin, BUT it is 2px high.

.b4 {
  display:block; 
  height:2px;
  background:#69c;
  margin:0 1px;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */
  }

‡ Step 16

The fourth (last) line is now in place and we have the completed curve.

Again, we could stop here and use the CSS styling of Step 16, but since the styling for b1, b2, b3 and b4 is very similar we can combine common styling and so simplify the CSS.

Step 17

Simplifying the curved border style

All that is necessary in this step is to separate out the common parts of each style. For instance, ALL the styles have display:block; and overflow:hidden; so we could group these together.

.b1, .b2, .b3, .b4 {
display:block; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}

Similarly b1, b2 and b3 are all 1px high.

.b1, .b2, .b3 {height:1px;}

And finally b2, b3 and b4 all have the same background color and have left and right white borders.

.b2, .b3, .b4 {
  background:#69c; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }

This just leaves a small amount of individual styling.

.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}

This individual styling is mainly for the specific margin, height and border width settings, it also includes the white background for b1.

With these last changes in place we end up with the completed Definition List with 'Snazzy borders.'

‡ Styled Definition List

Conclusion

Working at this single pixel level can prove very tricky as it's not easy to see if everything is in the right place.

Fortunately, there is an easy answer to this that should be available on most PCs. If you have XP, for instance, just click on Start > All Programs > Accessories > Accessibility > Magnifier and you now have a screen magnifier to check your work. This magnifier allows you to set the magnification level that has a maximum value of x9. Using this magnifier makes it simple to check your style for errors.

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/


Created: March 27, 2003
Revised: May 13, 2005

URL: http://webreference.com/programming/css_stlyle/1