• Home
• TheWeb
• Linux
• Microsoft
• SiteMap
• Work
• Musings
• Recipes

• Centering a web page
• Assigning inherited styles with Cascading Style Sheets
• Achieving the same widths in Internet Explorer & Firefox/Mozilla with valid CSS
• Making small images fill large banners on web pages
• Styling navigation links
• Placing [horizontal] navigation bars [with rollover effects]
• Using images in borders
• Placing conventional images to render correctly in IE & Firefox/Mozilla/Opera
• Making highlighter boxes
• Adding HTML and CSS W3C "validator" links

Introduction:   I wrote this page more or less element by element from the top down. The principal blocks are a page-container surrounding everything. The content inside the page-container is divided into two main elements. The first contains the banner at the top and the navigation bar that appears to sit on top of it. The second contains the other sub-elements. In order these are the little graphic and title-text under the banner, then an element for the summary. The main content of the page is under that in several elements, all followed by a footer. Voila! and in XHTML strict [athough the level of HTML is really irrelevant]. These elements have been laid out and are discussed more or less in the order that the original text followed in Tutorial 1.

IE6 hacks with IE7 looming: It's not known for certain which of the IE hacks will need to be re-coded when IE7 becomes widely used. I was determined to avoid IE hacks for this web site and spent a great deal of time doing things alternate ways when I ran into IE bugs. All the workarounds that I used are valid HTML and CSS.

Centering the page in the browser window: Once you have decided on a centered layout, the quick way would be to define a div element to contain the web page and assign "auto" to its left and right margins, as illustrated on the maxdesign site.

The id selector [#] places the element "page-container" midway in the view window while the text alignments, center and then left, accommodate the rendering peculiarities of the non-compliant IE6.

Put some space around the "content": There's a thin 9px vertical strip of space down each side of the page-container, between the content (text etc) and the darker surrounds of the browser "body". That's there to stop the text from butting up against the "body" in an unsightly way. IE has a major problem with its Box Model and I didn't want to grapple with that for every element. I took the easy way out, wrapped the whole of the rest of the content in a <div> called "contents" and put some space left & right of that [rather than on all the elements inside the <div>].

Note so far I have used been forced by IE to use three widths: 759px, 750px & 741px whereas if IE complied with W3C specs I would have only needed one. The two width declarations, 750px & 741px in "contents" are to trick IE. IE can't understand max-width and ignores it. So IE picks up a width of 750px and moves on. Compliant browsers also pick up a width of 750px but can't use it because they obey the smaller max-width declaration of 741px. Both browsers get widths that they need to produce the same result for the viewer. This is more elegant than using a further flaw of IE to counter another flaw in IE, i.e. an IE hack, and it validates in the W3C XHTML and CSS validation services.

Setting page-wide [inherited] styles: Cascading style sheets allow many properties to pass on to contained elements unchanged, or if you like, to "cascade" down and be "inherited". These styles are applied in the style-sheet in body and #page-container:

The browser view window has the strong apple colour (#E7F1D3: look to left & right) declared in body and a faint wash of light apple set for the whole page [#FBFFF3] in page-container. Line heights, font types and sizes as discussed earlier are set here and you can see again the chicanery necessary to center IE. I have used colour contrast for borders, to keep clutter down. The true width of the page is 759px and that fits snugly in IE. There's a bit more space in Mozilla browsers.

Placing a banner at the top of the page: The image at the top of the page is only 450px wide yet it appears to stretch across the width of the page [i.e. across <div id="page-container">]? The trick is to place the image as a background-image in a <div> that takes up the whole width of its container [page-container]. Then set the background colour of the <div> to the colour in the banner. The banner stretches/shrinks seamlessly with the viewing window. My image is "applebannerwtext.jpg" and the colour at the right hand end of the image is #CBFF55. Here's how it goes together in "page-container":

Don't leave the prefix "../" off the url. The other declarations in #banner are pretty much self-explanatory.

Adjustable width horizontal borders with images repeating vertically: I also used the method described for the banner to place the color-graded decorative bars to mentally separate the main content from the stuff above it. This time the image is 400px long by 1px high. I place it in a <div> with height 3px and declare a vertical background-repeat so the 3px will be filled up. 400px doesn't cross the page. But no matter, just apply a background colour to match the colour of the right hand end of the pic. The image and the background become indistinguishable. The HTML is trivial. here's the CSS, which is pretty much self explanatory:

Notice again the "width" plus "max-width" workaround for IE. The declaration font-size: 1%; prevents IE from using the height of one line of normal text as the <div> height rather than 3px. It's valid CSS

Placing navigation bars: If you place the declarations of the styles for a navigation bar once on a page, all the other links seem to follow suit. I don't know if that is an intentional W3C standard, but it works for me. I like it although it causes some bother if I want a different style for links somewhere else on the page. Anyway, here is the CSS & HTML for the navigation bar at top right:

I have nested <div id="navbartop"> inside the <div> for banner so I have handy a frame of reference for positioning it. It's not mandatory to put it there. There are no declarations/styles for the navbartop container so I haven't even included #navbartop {} in the CSS.

This is a horizontal list so the list elements li are declared to be inline. The unorderd list ul is given position (relative) so I can position it 13px from the top of the box containing the banner. Since the list is inline I have used text-align: right; to place the navbar over to the right of the banner. The list-style: none; stops underlining for links. You might think that the zero values for properties line-height and margin make their declarations unnecessary, but that's not so - they make IE behave itself.

There's nothing particularly remarkable about the HTML. It's pretty standard.

The navigation links at the bottom of the page are a horizontal list too, and the coding is much the same except (1) I don't need to position the navbar over to the right so I left text-align out (2) the navbar is positioned in the flow of the page so it isn't given position and (3) display: inline; is added to the declarations for ul in addition to the standard inline declaration in ul li to keep the navbar exactly in line with the text "This series".

Logo just below the banner: A <div> called "headpic" wraps the image (called web.png). Web.png is only 70px by 70px. OK here's the CSS:

The image web.png needs to be placed absolutely to the left. Hence its containing <div> floats left. IE can't get the box-size right so I use the widtth/min-width and height/min-height trick again to fool it [it's a really cool workaround]. The 10px margin-right is to push text away.

Highlighting boxes: These are very simple class selectors used to draw the reader's attention (class can be used multiple times). They're just boxes with borders. The CSS is "border: dashed 1px #8FCC00;" plus some padding and margin.

HowTo validate your HTML & CSS: A footer completes the web page. A key point here is how to link to the W3C validation services for HTML & CSS so your readers/clients know you do a conscientions job. If you click on the W3C links in the footer (XHTML first, CSS second) you'll see the results the average reader sees, which I think is not confusing.

Here's a tip on howto display your email address with some safety. You can see that I've put it on an image so email address harvesting robots can't get it. I use the background-image declaration within #footer in the CSS file. That way the address goes in each time I use a footer without my having to remember to do it. [My image is "email.jpg" in folder "images".]

If using transitional or frameset instead of strict, use target="_blank" instead of rel="external" to have your references open in a new page. The rel="external" method uses javascript so I've put the link to the explanatory page on sitepoint for you to check out whether you want to use it.

Well that's all folks. I hope it isn't too much to take in. In the next tutorial I show HowTo expand the one-column page, i.e. this one, into a two-column page.

If you have any suggestions, criticisms, comments about this or any other page on the website I'd be glad to hear from you by email on the address below. If you have similar content my visitors should see, let me know the web address too please. Cheers, Swerdna.