The Net Requirements Venture’s (WaSP) Browser Improve Initiative (BUI), has spurred many a designer to maneuver in direction of extra requirements compliant net design, utilizing CSS quite than tables for structure to avoid wasting consumer bandwidth whereas enhancing underlying semantics, accessibility, and attain.
Article Continues Under
“Tables are lifeless…”#section2
A number of designers have taken Jeffrey Zeldman’s lead in posting tutorials which have helped us recover from the preliminary hump of table-less design. The primary efforts have targeted on creating two or extra columns utilizing CSS positioning as an alternative of tables, thus permitting for a (full) separation of construction from presentation. These broader strategies have been documented and archived at Eric Costello’s glish and Rob Chandanais’ Blue Robotic.
Others have chimed in, together with Owen Briggs’ Field lesson and Tantek Çelik’s field mannequin hack/workaround, detailed by Eric Costello, and defined by Tantek.
“…Lengthy reside tables”#section3
Whereas these glorious sources tackle the bigger challenge of making a basic structure utilizing solely CSS positioning, different sensible questions come up as we discover ourselves, as designers, confronted with an issue that’s trivially straightforward to resolve with tables, however not so apparent with CSS. Such a query was posed on the Webdesign-L listing with the topic line “Tables are lifeless … lengthy reside tables.”
Suppose you wish to have a bunch of thumbnail photos that hyperlink to bigger variations of the photographs – a reasonably widespread kind of net web page. Suppose additional that every picture incorporates a brief caption that you simply want to maintain centered beneath its picture. And, within the curiosity of conserving browser window actual property, you wish to line these picture/caption pairs up in rows throughout the display screen, however in such a means that they are going to wrap as vital relying on the width of the browser window (liquid design). With the final requirement now we have stepped out of the realm of tables, and into the realm of CSS.
Let’s take a look at this step-by-step. The primary requirement is that the thumbnails have their caption centered beneath them. That is comparatively simple: in your HTML place your picture, adopted by a break, after which put your caption in a paragraph that’s aligned to the middle (by way of CSS).
Subsequent we wish to line up these picture/caption pairs throughout the browser window. Utilizing tables for structure, every of those picture/caption pairs would go right into a separate TD. Utilizing CSS we have to put them right into a separate DIV. To get them to line up horizontally throughout the window we use CSS to FLOAT every of those DIVs to the left.
Here’s what the CSS may appear to be at this level:
div.float {
float: left;
}
div.float p {
text-align: heart;
}
And the HTML:
<div class="float"> <img src="https://alistapart.com/article/practicalcss/image1.gif" width="100" peak="100" alt="picture 1" /><br /> <p>caption 1</p> </div><div class="float"> <img src="image2.gif" width="100" peak="100" alt="picture 2" /><br /> <p>caption 2</p> </div><div class="float"> <img src="image3.gif" width="100" peak="100" alt="picture 3" /><br /> <p>caption 3</p> </div>
And here’s what it seems to be like within the browser:
caption 1
caption 2
caption 3
The subsequent requirement can solely be solved utilizing CSS. We would like the picture/caption pairs to wrap if there are greater than will match within the browser window. FLOATing the DIVs to the left has already solved this downside. If we repeat these pattern thumbnails a few occasions, they are going to wrap within the browser window:
caption 1
caption 2
caption 3
caption 1
caption 2
caption 3
Now, suppose you had a couple of class of thumbnails you wished to show in your web page, and also you wish to group them visually, with a background and/or border. Merely enclose them in a container DIV:
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
Nonetheless once we do that we run into an issue. Once you float a component with CSS, it now not takes up any “house” and the background and border present up above the photographs as an alternative of surrounding them. We have to put some content material aside from the floated DIVs into the container DIV. Like a spacer DIV:
div.spacer {
clear: each;
}
Now the next HTML (word that there are spacer DIVs on the high and backside of the container DIV):
<div class="container"> <div class="spacer"> </div><div class="float"> <img src="https://alistapart.com/article/practicalcss/image1.gif" width="100" peak="100" alt="picture 1" /><br /> <p>caption 1</p> </div><div class="float"> <img src="image2.gif" width="100" peak="100" alt="picture 2" /><br /> <p>caption 2</p> </div><div class="float"> <img src="image3.gif" width="100" peak="100" alt="picture 3" /><br /> <p>caption 3</p> </div><div class="spacer"> </div></div>
…provides us what’s proven subsequent:
caption 1
caption 2
caption 3
Nested DIVs, nested TABLEs, what’s the distinction?#section6
So now now we have a bunch of nested DIVs. How is that this any higher than the nested tables they substitute? The reply lies in the best way the tag was supposed for use. DIVs indicate a logical, or structural grouping. Even when they’re nested they continue to be structural markup. In our instance we grouped photos with their captions (first degree), after which grouped these picture/caption pairs with comparable picture/caption pairs (second degree). These are each examples of structural grouping that’s dealt with fairly effectively by the DIV tag.
Nonetheless, tables indicate a relationship between column and/or row headers, and the info within the desk cells. Once we use them for structure, we lose the structural semantics of a desk. And we’re again to utilizing HTML for structure. Nesting tables solely compounds the issue.
FORM(s) and Perform#section7
One other widespread use for desk structure is lining up FORM components with their labels. Whereas it could possibly be argued that that is an applicable use of TABLEs, the CSS approach that I describe under will show to be helpful for different, comparable structure wants, as we are going to see.
A typical structure for FORMs has the labels on the left, flush proper, with the shape components on the correct, flush left, with every part assembly within the center:
Identify:
Age:
Shoe dimension:
Feedback:
The shape above was created with out using TABLEs. As soon as once more we’re utilizing FLOAT to perform the positioning. The trick is to create a DIV that works just like the TABLE row that we’re used to utilizing. Then we’ll create two SPANs: one for the labels and the opposite for the shape components. Float the label SPAN left and the shape component SPAN proper. For the label SPAN, align the textual content proper, and provides the shape component SPAN left-aligned textual content.
The CSS seems to be like this:
div.row {
clear: each;
padding-top: 10px;
}div.row span.label {
float: left;
width: 100px;
text-align: proper;
}div.row span.formw {
float: proper;
width: 335px;
text-align: left;
}
The CSS above additionally provides widths for the SPANs. These could be absolute values like the instance, or percentages that add as much as 100% or barely much less, relying on padding and borders (and the field mannequin you might be designing for). Within the instance I’ve wrapped the shape in one other DIV to present it a border and a background.
The instance HTML seems to be like:
<div fashion="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<kind>
<div class="row">
<span class="label">Identify:</span><span
class="formw"><enter kind="textual content" dimension="25" /></span>
</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><enter kind="textual content" dimension="25" /></span>
</div>
<div class="row">
<span class="label">Shoe dimension:</span><span
class="formw"><enter kind="textual content" dimension="25" /></span>
</div>
<div class="row">
<span class="label">Feedback:</span><span
class="formw">
<textarea cols="25" rows="8">
Go forward - write one thing...
</textarea>
</span>
</div>
<div class="spacer">
</div>
</kind></div>
Entrance and Heart#section8
You might have observed a part of the STYLE attribute for the containing DIV above contained the next: margin: 0px auto;. This leads to the 400 pixel DIV being centered in requirements compliant browsers. Some browsers, like IE5.x for Home windows ignore this, however will (incorrectly) heart DIVs which have a TEXT-ALIGN of heart. To heart DIVs in these browsers you possibly can wrap a DIV with TEXT-ALIGN set to heart, round one other DIV that units MARGIN to auto (and TEXT-ALIGN to left so textual content will align appropriately). See Rob Chandanais’ Format Reservoir for this and different centering technniques.
Splitting the Distinction#section9
An analogous structure that’s usually solved with tables is basically the other of the above. As a substitute of assembly within the center, you may wish to place two components at reverse sides of the browser window. This could be a case the place you will have a small emblem that you really want on the high proper nook of your web page, and a few navigational components on the high left:
Right here we are going to use the identical DIV.ROW, however totally different SPANs than we did for aligning the FORM components with their labels. The SPAN on the left will float left, and comprise left-aligned textual content. The SPAN on the correct will float proper and comprise right-aligned textual content.
CSS:
div.row span.left {
float: left;
text-align: left;
font-weight: daring;
shade: #fff;
width: 49%;
}div.row span.proper {
float: proper;
text-align: proper;
font-weight: daring;
shade: #fff;
width: 49%;
}
HTML:
<div fashion= "width: 90%; background-color: #666; border: 1px stable #333; padding: 0px; margin: 0px auto;"> <div class="spacer"></div><div class="row"><span class="left"> Residence > Merchandise</span> <span class="proper"> [logo]</span></div><div class="spacer"></div></div>
The ACRONYM and ABBR tags are helpful, if little used, tags that use the TITLE attribute to develop the acronym or abbreviation. Most present browsers do nothing to alert your website guests that there’s something behind the phrases on the web page that may assist them make sense of the abbreviation or acronym. Enter CSS.
In your fashion sheet you possibly can add a backside border to these tags to attract consideration to them on the web page. You can too use CSS to alter the cursor right into a “Assist” cursor (often a query mark) for these browsers that assist it. And also you aren’t restricted to HTML tags. Create a category known as .assist and use SPANs to present extra details about phrases or phrases that your readers could be confused by.
This CSS:
abbr, acronym, .assist {
border-bottom: 1px dotted #333;
cursor: assist;
}
… is used along side the TITLE attribute on an ABBR or ACRONYM tag to create an underline impact that’s totally different from the hyperlink underline. Altering the cursor to “assist” implies that the phrase will not be clickable, and the TITLE attribute expands the abbreviation or acronym. I first noticed this performed at a website by Sander Tekelenburg.
I first examine altering the show of an inventory to inline in Bos and Lie’s Cascading Type Sheets. I first noticed it put to make use of in Christopher Schmitt’s Babble Record web site. The trick takes an inventory and makes it show inline, or horizontally. So as an alternative of:
- Merchandise one
- Merchandise two
- Merchandise three
…you get:
- Merchandise one
- Merchandise two
- Merchandise three
Including some padding and a border impact provides:
- Merchandise one
- Merchandise two
- Merchandise three
CSS:
li.inline {
show: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #066;
}li.final {
show: inline;
padding-left: 3px;
padding-right: 3px;
border-right: 0px;
}
HTML:
<ul> <li class="inline">Merchandise one</li><li class="inline">Merchandise two</li><li class="final">Merchandise three</li> </ul>
The Finish? Or only the start…#section12
It’s my hope that in sharing the following tips, methods and strategies, you can be inspired to make use of extra CSS Format in your net work, and that you’ll proceed to find, and share, new suggestions, methods and strategies with others.
