| home / programming / css_style / 1 |   [previous] |
|
|
|
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
|
For the "bottom" class we also require a 1px solid top border to separate the last menu item from the curved bottom area.
The bottom 1px white border is now in place.
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;
/* */
}
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.
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;
/* */
}
The second line of the curve is now in place.
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;
/* */
}
The third line of the curve is now in place.
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;
/* */
}
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.
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.'
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.
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/
| home / programming / css_style / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: May 13, 2005
URL: http://webreference.com/programming/css_stlyle/1
