|
CSS Tip:
Building Blocks With CSS
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Every child plays with blocks at some point. It's fun to stack them, line them up, build houses, etc. Many Web designers take that early love of blocks and apply it to Web page design using style sheets. It's pretty easy - if you understand the difference between a block-level and inline element.
Lining Up Your Blocks
HTML defines page elements into three different display categories:
- Block-level elements display with a line break on the top and bottom.
- Inline elements display inside another element - usually a block-level one. They don't have line breaks above and below.
- Replaced elements don't have a defined size or spacing. The Web designer usually sets the height, width, and other sizing attributes for these elements.
|
Here's a quick reference list of some of the most common elements:
| Block-level |
Inline |
Replaced |
| <p> |
<a href> |
<img> |
| <table> |
<pre> |
<select> |
| <blockquote> |
<font> |
<textarea> |
| <h1> through <h7> header tags |
<strong> |
<input> |
Generally, the visitor's browser defines the default spacing around block-level elements. The amount of spacing depends on the particular element and the individual browser's default settings. In many cases - particularly with header tags - you'll get a more attractive display if change this spacing using style sheets to create custom headers.
But sometimes, a more drastic adjustment is required: a change from block-level to inline.
Using The Display Property
The DISPLAY property is an amazing thing. With a single style definition, you can make major changes: convert a block-level element to inline or even make it disappear entirely!
For instance, when you structure pages with header tags, the section headers appear on their own line, with the descriptive paragraphs underneath. How would you like to have that text begin on the same line as the header tag?
Or what about this situation: you want to display information in multiple columns using DIV tags instead of tables. But DIVs are block level tags and ALIGN is a deprecated and sometimes unreliable attribute. What can you do?
Change the page layout using the DISPLAY property. It accepts 4 possible values:
- block: defines the tag as a block-level element.
- inline: defines the tag as an inline element.
- list-item: places a list-item marker on the first line of text. You can make page elements appear to be a list without actually using UL, OL, or DL tags to define a formal list.
- none: hides the element in CSS browsers. The browser will ignore it entirely; meaning it doesn't reserve space on the page.
|
This example page shows some sample uses for the DISPLAY property in page layout. It also contains an example of the display:none property/value pair. You may have to view the page's source code to find the invisible text.
Browser Compatibility Issues
Because browser manufacturers don't always fully support World Wide Web Consortium standards, you have to test carefully in as many browsers as possible. The majority of CSS2 compliant browsers give reliable support, but you'll probably have trouble with older versions.
For instance, when you view the example page in Explorer 5 for Windows, everything displays as expected - except that the browser ignores the style rule changing the first H2 section header to display:inline. Netscape 4.7 behaves the same way and so does Opera.
Because you can't count on browsers, you'll have to count on yourself and test, test, test to be sure your page looks good for all visitors!
NetMechanic's Browser Photo tool makes this easy. You'll see actual, full-size screen shots of your Web page in 16 different browsers, browser versions, screen resolutions, and operating system combinations. It's the resources of a full testing lab at a small fraction of the price large companies pay to set one up.
Style sheets give you layout and presentation options that just aren't available in basic HTML, but use Browser Photo to make sure that all your careful design work is going to display like you expect.
|
