Veerle's blog

Time for a bit of CSS styling fun! When working with CSS you need to have the ability to analyze your layout and see how you would place your div containers. That’s what differs from working with a classic table layout. You need a whole different approach and think more in terms of containers. Stop thinking of how you’ll slice your layout, start thinking on how to put each graphic into a container… How much containers do I need without overdoing it?

At Duoh! we've recently finished this site and I think this would suit as the perfect example to show you what I mean. Below is an image that shows the different containers of the basic template layout.

Which background will be used for the body?

First I need to define what will be used as background for the body element. Is it the blue border or the vertical shadow lines on each side of my layout? The answer is the shadow lines. Why? Because you always have to look for the most simple solution. We put the blue background in a container and give that container a width of 100% and a height of 191 pixels which matches the exact height of the header and use the shadow lines as a body background. I'm sure there are other approaches to achieve the same result, just try to keep it as simple as possible and try to limit the nested divs as much as possible. Here's the result so far. Our styles consist of this :

1. body {
2. background: #fff url(../images/bg-body.gif) top no-repeat;
3. margin: 0;
4. padding: 0;
5. }

1. #headerwrapper {
2. background: #ecf3f9;
3. width: 100%;
4. height: 191px;
5. position: relative;
6. }

Build the header

Next on the line is to build the header. Since the shadow lines are now hidden (under the blue border), we have to make sure to include them in our header background but not the logo. The logo will be added on top of this header. Why you ask again? Since it's better to threat the logo separately so we can add a rollover effect and a homepage link to it. Second reason and actually a more important reason is that we add a header 1 element to our logo which will the main title of our site. Using a text-based header 1 element (instead of placing a graphic) is very important for accessibility reasons and good for SEO as well. Here is the structure of our structural code:

1. <div id="headerwrapper">
2. <div id="header">
3. <div id="logo">
4. <h1>Slimbouwen - Bent u klaar om te bouwen?</h1>
5. </div>
6. </div>
7. </div>

And this is the CSS so far:

1. #header {
2. width: 772px;
3. height: 191px;
4. background: url(../images/bg-header.jpg) no-repeat right top transparent;
5. display: block;
6. margin: 0 auto;
7. }

1. #logo h1 {
2. width: 228px;
3. height: 174px;
4. display: block;
5. margin: 0 0 0 11px;
6. padding: 0;
7. text-indent: -99999px;
8. background: url(../images/logo.gif) no-repeat right top transparent;
9. }

Adding a link with rollover effect to the logo

We also want a link on our logo title and we love some effect too. With background positioning we can! You've noticed that our logo image includes both the default and rollover state. This is needed for this technique. This way there is no (loading) delay when people mouse over the logo. Here is the CSS to achieve this effect

1. #logo h1 a {
2. width: 228px;
3. height: 174px;
4. display: block;
5. text-decoration: none;
6. }

1. #logo h1 a:hover {
2. background: url(../images/logo.gif) no-repeat right bottom transparent;
3. }

By using display block and set width and height measurements, you make sure that the entire area is covered. To achieve the rollover effect we add hover selector and alter the position of the background to bottom right.

Adding the content

You'll noticed that I totally ignored the description text in the logo image. This text is actual content and should be placed in the code below the header 1 element between paragraphs. Again I need to make sure this text isn't visible. This is the CSS I use to do so:

1. #content {
2. width: 772px;
3. margin: 0 auto;
4. }
5. p.hidden {
6. position:absolute;
7. top:-300px;
8. left:0;
9. }

First I add an id for the content area and give it the width (same as the header id) and make sure it is centered aligned. Within the content div id will come all our content text. Next step is adding a style for the paragraph and give it a class (hidden) since this is an 'exceptional' paragraph of text. We want to exclude this from the rest of our 'normal' paragraphs. The absolute positioning and top and left coordinates make sure the text is outside the viewing area of my browser window. This and the method of using a negative text-indent (as used for the header) are by my knowledge the only CSS tricks I know, and which I think are better then using display:none or visibility:hidden.

Implementing the special button

Last but not least is the tabbed button. As this button is at a specific position, we use top and left coordinates to make sure it appears on the exact place. But we can't use absolute positioning since this would mean that the button stays at this location even if we resize our window. That's why we use relative positioning. This way the left and top coordinates are always in reference with the container it is in. In our example that is the content div container since the button is part of the content. This is the structural markup:

1. <div id="content">
2. <p class="hidden">Hoe krijgt u het meeste huis voor uw geld?... </p>
3. <div id="testnav">
4. <ul>
5. <li><a href="quiz1.html">Doe de test</a></li>
6. </ul>
7. </div>
8. </div>

Here is the CSS I have added:

1. #testnav ul {
2. width: 173px;
3. height: 35px;
4. position: relative;
5. top: -25px;
6. left: 289px;
7. }

1. #testnav ul li a {
2. background: url(../images/bttn-doe-de-test.gif) no-repeat top left;
3. width: 173px;
4. height: 35px;
5. display: block;
6. text-indent: -9999px;
7. text-decoration: none;
8. }

1. #testnav ul li a:hover {
2. background: url(../images/bttn-doe-de-test.gif) no-repeat bottom left;
3. }

Again I'm using background positioning to create the rollover effect. Here is the final result.

After revising everything in I.E. 6 it seems I need to add this little fix:

1. * html #testnav ul {
2. top: -35px;
3. }

The star html makes sure only I.E. reads this style. You could of course also use conditional comments in the structural markup to implement this fix. It just all depends what the outcome will be once I.E. 7 is released.

Feel free to play the quiz if you can read Dutch or go to BâtirMalin if you prefer the French version. Sorry no English version, it is a Belgian site and aimed to Belgians only.

UPDATE This article is now also available in Portuguese.