Silmarillion Storybook

Bibliography - Additional Information - About Site Design - About Site Author

About Site Design

General

This site uses valid HTML 4.01 Strict for all the content mark-up and valid CSS 2.0 for all the presentation instructions. Each page contains only the mark-up for the content. For an example, each page contains a top-level heading element that has the text “Silmarillion Storybook” but these pages nowhere say anything about font name or size, color, or position. All that information is contained in an external stylesheet, storybook.css. The stylesheet says to make all top-level headings a certain height with text centered and in italics with white foreground color and blue background color.

There are some great advantages to using one external stylesheet for all the display instructions. First, the user only downloads those instructions one time; this usually makes the HTML pages around one-third of the size. Second, it makes the HTML cleaner and easier to maintain. If you want to add another item to the navigation, you don't have to wade through table, font, color, bold, and who knows what other tags to find where to put it and to figure out how to make it look like the other navigation items. Third, it makes site-wide changes much easier to make. I changed the main color scheme (from purple to green to blue) and the position of the navigation (from the left side to the right side) without have to redo any of the pages. Fourth, CSS is so much more powerful than HTML for complicated layout. How would you put the navigation up in the right-hand corner like this and have it overlap the blue bars for the heading and the sub-navigation? It could probably be done, but it would take a convoluted mess of spacer images and nested tables. (Below you will find the HTML mark-up and CSS instructions for making this navigation very easily.)

If you are interested in learning more about CSS at a high level and the practical benefit of standards-based web development, I suggest the following two articles:

• An interview with Mike Davidson, the art director for ESPN.com.
• An article called the Business Benefits of Web Standards by Tristan Nitot, formerly of Netscape Communications.

Specific: Main Navigation

Most of the CSS instructions on this site are straight forward: font sizes and colors with just a little touch of style (like using the image of a Silmaril for a bullet in all the unordered list above). The most challenging and exciting use of CSS is in the upper right navigation, so I will walk through the HTML and the CSS to make this element look as it does.

The HTML markup for this is very simple. It is an unordered list with list items that contain links. The whole list has its ID attribute set to "nav", and the link for the selected section has its class attribue set to "on". The HTML for the navigation on the home page looks like this:

The following CSS code contains the instructions below it to make the unordered list element (the main box around the upper right navigation) look like it does:

For every element with id="nav", float it right so that the other elements wrap to the left of it, make it 190 pixels wide, put no space between the border and the elements inside it, put a margin of 10 pixels between the border and the elements outside it, set a solid dark blue border of 2 pixels, set the background color to light blue and use this image of the Silmarils (blue-tinted) centered vertically and horizontally for the background image, and don't use any bullets or anything on the list items.

(For the background image, I made some adjustments to Felix Sotomayor's image titled Silmarils. I made his image black and white and then added a blue tint. I have used this image elsewhere in the site, so you can view the original in the image gallery.)

The following CSS code contains the instructions below it to make the links inside the list element (the individual buttons inside the navigation) look like they do:

For every link element inside an element with id="nav", turn it into a block-level element (the default display for a link is an inline element), put a margin of 5 pixels between the border and the elements outside, put a space of 5 pixels between the border and the text or elements inside it, center the text, set the font size to 14 pixels, make it bold, make the link itself 14 pixels high, make the background transparent so that the background of the list element will show through, make the border solid and white with a width of 1 pixel, make the foreground color of the text white, and remove all text decoration (like the underline that browsers put on links by default).

The link for the selected section of the site will have almost all the same properties; the instructions above will apply to all links, so we only need to specify the properties that are different for the selected link below. The CSS code below contains the following instructions to make the link for the selected section (the individual button) look like it does:

In addition to the styles specified above for all links in the navigation, for every link element with class="on" inside an element with id="nav", set the background to a that certain shade of blue and make the border solid and dark blue and 1 pixel wide.

This last instruction controls how links behave when the user mouses over them; in this case, I chose to have the links underlined.

To learn the details of CSS, I recommend the CSS tutorials at w3cschools.com.

Bibliography - Additional Information - About Site Design - About Site Author

This site is maintained by Randy Hoyt. Please email me with any questions, comments, or suggestions.