A scalable layout example

 Introduction 

This article intends to give an example of how to use only CSS1 based style rules to suggest an initial page layout where the receiving browser canvas is used to present a fully scalable view of a document.

CSS style suggestions given in this article do not address questions on how to use CSS in a cross-browser compatible way. Instead I intend to describe a "mathematically correct" way of creating CSS rules to guide a specific layout example.

Also I don't always trust inheritance to work correctly even in browsers that do have a decent CSS1 support for the rest of it, so some seemingly redundant styling may be found in the following examples, just to make sure that the final layout suggestion will stand a chance of correct treatment on the client side.

Browsers, known to handle CSS1 up to a level required for the following example are; (for Win) Mozilla M17+, Opera 3.62, IE4+ and IE5+. I'm also assuming that WinIE6+ and IE5 for Mac will do the right thing.

 The layout 

At some point in time I got this idea to try to create a fully scalable CSS based layout suggestion with a Logotype in the top right corner, a vertical link field for site navigation placed directly below that logotype and another field to the left of the logotype, suitable for a page heading.

"Ascii art" to illustrate the idea

 +---------------------------+-----------+
 |                           | [2]       |
 |  [3]Heading area          | Logotype  |
 |                           |           |
 +---------------------------+-----------+
 |                           |           |
 |  [4]Page content area     | [1]       |
 |                           | Link area |
 |                           |           |
 |                           |           |

(page continues to fill available vertical size of browser window)
» » »

It can be shown that we only need to use properties specified in CSS1 to suggest this kind of presentation in browsers with an acceptable support for the CSS1 spec. A page presentation based on the following style suggestions will also have the added benefit of being highly scalable into a wide range of browser window sizes.

 How to set it up 

Initially some graphic work was done to create two images to be used as tiled backgrounds in areas [1] and [3] and also the logotype was created. All images was designed as 80x80px jpegs.

Since I also want a thin white border line as a separator to area[4] I decided to include that line directly in the graphics. So the image used as a background in area[1] has a 1 pixel white border at the left side. A variation of the same image to be used as background in area[3] has a 1 pixel white border at the bottom, and the logotype has white border lines both to the left and at the bottom.

I'm deliberately trying to avoid using the border property from CSS since the width of a border can not be set with the % relative unit. This may be a mistake by the creators of CSS since it makes it awkward to suggest borders on elements in a way that they would scale mathematically correct into a wide range of browser window sizes.

Workarounds are available of course, but they include the use of extra markup to cover up for non scalable borders, so in this case it came out as a more simple solution to include the border lines in the graphics instead.

 Step 1: Establish page framework 

I started with a template for a "Strict HTML4.01" document and created a basic style rule for the BODY element like this...

Style rule for the page BODY

BODY {
 background: #483378 url(../graph/pmarbler.jpg)
 top right repeat-y; color: #ffffff;
 font-size: 1em; font-weight: normal;
 font-family: Georgia, "Bookman Old Style", serif;
 margin: 0; border: none; padding: 0;
 width: auto; height: 101%;
}

The important part here is how that background is specified. A background color value is selected to be the same as the dominant color in the background image. The image is placed in the top right corner of the browser window and set to tile only vertical on the right side of the page with repeat-y. This tiled background area will later come into use as the background for the navigation links.

The margin, border, padding and width properties are set so that the BODY element will use every available pixel in a browser window, and the foreground color (i.e. for text) is set to all white (#ffffff) with a font-size that will be whatever the user has set as his default size.

The selected value for font-family just happens to be a few of my favorites and naturally any other selection of fonts may be suggested, if any.

And finally the height:101% is only in there as a dirty workaround for a bug in Opera5x reflow routines that happens when the vertical scroll bar is not shown.

The height:101% style rule just happens to convince Opera5x to always show a vertical scroll bar so that the buggy reflow never needs to take place.

The basic starting page may now look like this.

 Step 2: Set area[2] at the top of the page 

This area is set up as a DIV element that uses the logotype image as its background. The following style rule is used for the area[2] DIV element to suggest a location of the logotype in the top right corner of the browser canvas.

Style rule for the logotype area[2]

DIV.rtop {
 background: #483378 url(../graph/JR-logo.jpg)
 top right no-repeat; color: #f5dda1;
 float: right; margin: 0; border: none; padding: 0;
 height: 80px; width: 80px;
}

The background (i.e. the logotype) is initially placed in the top right corner of the DIV and set to not tile in any direction through no-repeat. It's also set to float: right so the next DIV element can appear at the left side of it. Finally the content size of the DIV is set to exactly the same size, 80x80px, as the background logotype image.

The page with the logotype may now look like this.

 Step 3: Set area[3] at the top of the page 

This area is set up as a DIV element that uses a variation of the the BODY background image as its background. The following style rule is used for the area[3] DIV element to suggest a presentation directly to the left of the logotype and at the top of the browser canvas.

Style rule for the page heading area[3]

DIV.ltop {
 background: #483378 url(../graph/pmarblet.jpg)
 top left repeat-x; color: #f5dda1;
 margin: 0 80px 0 0; border: none; padding: 0;
 height: 80px; width: auto;
}

The background image is set to start in the top left corner and tile horizontally, with the width of the DIV element set to auto to make it fill all available horizontal space.

Since the content of area[3] is primarily thought of as the main heading of the page, I decided to dedicate element H1 to carry that heading and one example of a style rule for element H1 is given here.

Style rule for the page heading

H1 {
 background: transparent; color: #f5dd9f;
 font-family: Georgia,"Bookman Old Style", serif;
 font-size: 1.6em; font-weight: bold; font-style: italic;
 margin: 0; border: none; padding: 20px 0 0 50px;
 text-align: left; width: auto; line-height: 1.3;
}

This style rule leaves a lot of room for experiments to customize it into a suggestion that can fit many other selections of colors, fonts sizes etc...

The page with logotype and main heading may now look like this.

 Step 4: Set area[1] to contain links 

The last thing to take care of here is to define area[1] to contain the navigation links. I decided to continue to use the DIV container method for this and created this style rule.

Style rule for the navigation link area[1]

DIV.rside {
 background: transparent; color: #ffffff;
 float: right; margin: 0; border: none; padding: 0;
 width: 80px;
}

This rule suggests a right floating transparent box that is exactly as wide as the background image in the BODY element. Since we already have areas [2] and [3] set up to occupy the top 80 pixels of the page, to its full browser window width, the only place available now for a next right floating element will be directly below area[2] i.e. directly below the logotype and that will become the suggested location for this area[1] DIV element.

Inside this DIV element we can now specify navigation links in a way that they will not creep out of the BODY background area which is now shining through into this DIV container.

 One way to style links 

Styling of links gets discussed at times and some people will rightfully argue that one should leave links alone to be presented in the default style that users are most accustomed to.

One very common default color for links is blue. Now given the background and image color that I have chosen for this page layout, a blue link would not present itself very good. So a decision was taken to set links to be initially white and to include a specific link heading element H3 that tells in clear text where to find the link area.

Style rule for the link list heading

H3 {
 background: transparent; color: #ffffff;
 font-family: Verdana, Arial, sans-serif;
 font-size: 1em; font-weight: normal;
 letter-spacing: 0.05em; margin: 0.5em 3px 0 3px;
 border-bottom: solid #ffffff 2px; padding: 0;
 text-align: center; width: auto;
}

The link list heading uses the border-bottom property to underline the heading and since the heading text is to be written in all capitals, I have also suggested a typographical adjustment of the distance between letters through the letter-spacing property, among other things.

For the link list itself I decided to set it up as an unordered list using element UL for the markup of it. A suggested style rule for such a list is given here...

Style rules for the link list

UL.rlist {
background: transparent; color: #ffffff;
margin: 0 ; border: none; padding: 0 0 0 0.3em;
list-style-image: none; list-style-type: none;
width: auto;
}

LI.rlink {
background: transparent; color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em; font-weight: bolder;
margin: 0; border: none; padding: 0.5em 0 0 0;
text-align: left; width: auto;
}

Element UL is set up as an invisible box that covers the full width of its containing element DIV. The padding property is used to set a small 0.3em space at the left side so that the child LI elements are not starting directly from the white left border line in the background image.

The last thing to take care of now is to suggest a presentation style for the anchor parts of what goes into the list of links.

Style rules for the link anchor

A.r:link {
 background: transparent; color: #ffffff;
 margin: 0; border: none; padding: 0;
 text-decoration: none;
}

A.r:visited {
 background: transparent; color: #fac15e;
 margin: 0; border: none; padding: 0;
 text-decoration: none;
}

A.r:hover {
background: transparent; color: #5ff0d1;
margin: 0; border: none; padding: 0;
text-decoration: underline;
}

A.r:active {
 background: transparent; color: #e0e0e0;
 margin: 0; border: none; padding: 0;
 text-decoration: underline;
}

Here I have included a style rule for the :hover pseudo property from CSS2. Be warned that not all browsers support :hover but it causes no known damage in those so it can be included for those browsers that has support for it.

The page with the links included may now look like this.

 How to markup the page body 

The style rules now defined needs to be referenced from HTML markup in the BODY section of a document and we use the CLASS attribute for this reference so that the markup for areas [1], [2] and [3] comes out like this...

HTML markup for areas [1], [2] and [3]

 <BODY>
   <DIV CLASS="rtop"></DIV>
   <DIV CLASS="ltop">
     <H1>Main header text for the page</H1>
   </DIV>
   <DIV CLASS="rside">
     <H3>LINKS</H3>
     <UL CLASS="rlist">
       <LI CLASS="rlink"><A CLASS="r"
         HREF="foo.html"
         TITLE="Title for foo">Foo</A></LI>
       <LI CLASS="rlink"><A CLASS="r"
         HREF="bar.html"
         TITLE="Title for bar">Bar</A></LI>
       <LI CLASS="rlink"><A CLASS="r"
         HREF="baz.html"
         TITLE="Title for baz">Baz</A></LI>
     </UL>
   </DIV>
   <DIV CLASS="area4">
     (marked up content for area[4] follows here).
   </DIV>
 </BODY>

Naturally we would also need more style rules to suggest presentation of elements in the main content area[4].

One important part to think of here is that the invisible DIV element that is used to house the links, will get its rendered height automatically set from the total height of its content. This means that, all depending on the number of links in that DIV element, it may come out with a rendered height that is less than the rendered height of the area[4] content to the left of it.

The correct way to prevent area[4] content from sneaking in under a link containing DIV, with only few links in it, is to place all of area[4] content in DIV(s) of its own, and create a style rule for such a DIV that restricts its internal width made available for rendering of content at the right side. Much in the same way as was described in the area[3] style rule above.

It is incorrect, in my view, to try to enforce a certain height for the link area DIV, e.g. to correspond to current client window height.

From the real life example given below one can find a page named 1789 that may be examined for its source and stylesheet, as an example of how to suggest a presentation of area[4] content.

 A real life example 

A fully working real life example of the page layout described in this article can be viewed in my private experimental web area here...

...with the relevant stylesheets available from here...

Disclaimer

Privately I view NS4x browsers as not supporting CSS, so sorry to those who are still using it. NS4x users will not benefit from a CSS guided presentation of my private pages but will still find all of its content fully accessible and usable in their browsers default presentation mode.