
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
A scalable layout example
A step by step example of how to suggest a fully scalable page layout based on the use of floating DIV boxes. The result as described is not suitable for NS4x browsers.
Table of contents
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 invisibleDIV
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.