Subscribe to Updates
OSHPD - Help With New CSS Styles
How it was
When looking at the current web site coding, we see a mix of in-line styles with CSS class based styles. We find that even though the provided CSS supported multiple browsers, there is a strong bias towards IE6 in that classes that were added to styles.css were not added to the other 4 style sheets. Some pages use tables for positioning purposes rather than style sheet positioning.
What's new
The new templates provided by e-services contain a new CSS architecture that emphasizes compatibility with all browsers, a higher level of usability and accessibility. Basically, all formatting is removed from the HTML page and put into the CSS files.
Examples
A page that contains several examples of CSS class elements is here. The referenced page contains an un-styled ordered list:
<li></li>
<li></li>
An un-ordered list styled with the default "list_decorative_dark":
<li></li>
<li></li>
There are two indents used on the above referenced page, class="indent_left_right_15" and class="indent_left_right_37" toward the bottom of the page for the contact HIRC information and "Attention Data Users:..." section respectively.
New container classes
The new templates came with two types of containers, the tabbed container (seen here) and the rounded corner container (seen here). Both container types come in several flavors.
Tab Panel Container
The tab panel container is used with unordered lists to create a container with 3, 4 or 5 tabs, with 1 or 2 internal columns and 4, 5, 6, 7 or 8 lines high, depending on the class combinations selected. The classes are used in combination to create the desired effect. For instance, the page referenced above, our home page, is a 3 tab container with 1 column and 8 lines high. The number of tabs is controlled by the XHTML un-ordered list code, but the other two attributes are created by CSS classes. The following code snippet from the beginning of the tab panel module XHTML makes it clearer (hopefully):
Note the above code snippet itself uses the class "indent_left_right_37" and two "indent_left_right_15", nested to achieve the three indent levels.
Blocks With Rounded Corners
The blocks with rounded corners container is used to set apart un-ordered or ordered lists of links, usually. The Cal-Mortgage page shows one of the two classes of rounded corner containers - two up container. Currently, the classes used are "block_with_rounded_corners" and "block_with_rounded_corners_2", for one up and two up containers, respectively.
Handling Images With Text
We currently have two examples of pages with images. The first is the director's page which shows text flowing around an image that hugs the left margin, here. Note the only specified class is <img class="image_float_left"...> which is defined in the ca_department.css as:
.image_float_left { /* Added this class to allow images mixed with text */
padding: 0px 10px 2px 0px;
float: left;
}
The padding statement is read top, right, bottom and left, in this case 0px padding on top, 10px on the right, 2 px on the bottom and 0px on the left. The container doesn't require top or left padding because the container that surrounds it already provides a top and left margin. The right padding is there to create the same space on the right that the surrounding class creates on the left.
The float: left; element causes the container to display on the left while allowing text (or other images) to be on its right rather than starting below it.
The other page that uses images, but in a different way, is the 2004 Perspectives page, linked here.
.image_float_none { /* Added so that an image could stand alone */
padding: 0px 10px 2px 0px;
float: none;
}
.image_with_caption { /* Added to have an image with a caption centered underneath */
padding: 10px 10px;
float:left;
text-align: center;
}
I'd like to say that through deep knowledge and understanding of CSS I was able to create the page in question and the classes that support it. That isn't the case. Through trial and error I got the settings for this page to work in IE and Firefox, though not identically. The county images are what hold the inner container, "image_with_caption", open. Because the text size on all pages is larger than the old site, the images weren't large enough to prevent text wrapping on the longer county names, so Megan up-sized the images.