Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

Purists will argue about a strict separation of format/ presentation from content, but if you are not a “purist” why should you care?

Several reasons,

Much more dynamic layout.   Witness the skins on any blog server.    With tables to control layout, imagine the changes required to move navigation from the left of the page to the right of the page.    Using style sheets, you simply have to change one attribute of one style class.    As a more extreme case, consider having to change a form with labels over the input controls to one where the labels are beside the input controls.    Using tables, this is a substantial change.   Using style sheets, this is a trivial change of one attribute of a style sheet class.    This alone could dramatically simplify maintenance.

Smaller markup files.   By storing all of the layout information in separate style sheets that are common across all of the pages in a web site, the individual files transferred to the client are much smaller.   The external style sheet files are not re downloaded each time a page is requested.     By putting the page's content in span or div tags instead of td tags with their corresponding tr and table tags, you have less markup.  This is easier to follow and renders faster.

Cleaner markup is easier to follow and maintain.  Have you ever had to edit the content of a page that had multiple layers of nested tables just to get the positioning right.   I have even gone so far as adding a table around a table just to get a desired border look.    All of these extra tags makes for bloated markup and unexpected results if a tag is not properly closed.

Tips on Positioning Without Using Tables

There are some key style sheet features that are used for layout that you may not have used if all you have used style sheets for is formatting.    These attributes are key to positioning:

float: left| right   will indicate that objects of the associated class should “float” to the left or right of the rest of the content.    To move the navigation from the left side of the page to the right side of the page, simply add a float : right to the class for the containing div tag.    This is also how to get the label for a control over to the side.

display: inline| block  will indicate whether the content should be displayed as a line by itself or inline with the rest of the content.    By marking the label for an input control as display:block, the label will appear on the line above the input control.   By marking the label for an input control as display : inline and float : left, the label will appear on the same line and to the left of the control.   Changing the float : left to float : right will move the input label over to the right of the input control.

width : unit   It becomes very important to set the width of classes to control layout.    To make sure that all of the input controls line up, set the width of the label.   The input form then becomes a collection of paragraphs consisting of a span tag with a class of “InputLabel“ followed by a control.

Is anyone else experimenting with moving the layout out of the markup and over to the style sheet?


Posted on Tuesday, August 9, 2005 7:39 PM Stylish musings | Back to top

Comments on this post: Making the case for style sheet positioning

comments powered by Disqus

Copyright © Nick Harrison | Powered by: