You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 30

The XHTML/CSS template phase of my new blog, part 2

2006 at 12.46 pm posted by Veerle Pieters

In part 1 I’ve showed you how I divided the design into different container div areas. In this post I’m going more into detail on the CSS/XHTML of the horizontal navigation. As I mentioned already in part 1, I use a technique called the Navigation Matrix written by Didier Hilhorst. In this technique, you use only 1 background image for the whole navigation. This background image is then placed to its pixel precise position using CSS background positioning.

background image for the whole navigation

The structural code

First have a look at the structural code:

  1. <ul id="nav">
  2. <li id="home"><a href="index.html" title="This link takes you back to the homepage">home</a></li>
  3. <li id="about"><a href="about.html" title="Find out a bit more about this weblog and myself">about</a></li>
  4. <li id="archive"><a href="archive.html" title="Browse the archive">archive</a></li>
  5. <li id="contact"><a href="contact.html" title="Contact information">contact</a></li>
  6. <li id="links"><a href="links.html" title="List of websites I find interesting">links</a></li>
  7. </ul>

As you can see the code for the navigation is an unordered list. Each list item represents a tabbed button and has a its own ID. So far so good, nothing difficult about that. The CSS is where the power lays. Using the right CSS will turn this text-based list into a graphical one.

The CSS

The CSS adds a graphical layer on top of the code. First we start by styling the (<ul>) unordered list element.

Styling the unordered list element
  1. ul#nav {
  2. position:absolute;
  3. top:194px;
  4. left:35px;
  5. width:380px;
  6. height:27px;
  7. }

For my site's design I've used an absolute positioning of the navigation. This means that the navigation is shown on the exact X and Y coordinates on the page: 194 pixels from the top and 35 pixels from the left. Next I define the width and height of my navigation : 380 pixels width and 27 pixels height.

Styling the list item
  1. ul#nav li {
  2. padding:0;
  3. margin:0;
  4. list-style-type:none;
  5. float:left;
  6. text-indent:-9999px;
  7. }

First we set the padding and margin to zero so there is no space between each tabbed button. The property "list-style-type" has a value of "none". This turns off the rounded bullets that appear by default. To achieve a horizontal navigation we need to give each list item a left float. We also need to hide the text as well, we can do this by using a negative text indentation of -9999px which will throw the text outside the browser window.

The CSS styles for the anchor element within the list item
  1. ul#nav li a {
  2. border:0;
  3. text-decoration:none;
  4. display:block;
  5. background:transparent url(../images/navigation.gif) no-repeat;
  6. }

The default border that appears with an anchor element is set to zero (border:0). Same goes for the text decoration property, this is set to none, to hide the default underlining. Then we give each list item a display:block, this way the list item will be forced to render as a blocked element and we will be able to give this box area an exact with and height. Because the width differs for each tab, both measurements are defined in a separate style. In the last property we link the background navigation image in the CSS.

Each tab has its own ID
  1. li#about a {
  2. width:69px;
  3. height:27px;
  4. }

As described above, every list item has its unique ID. Each list item, each representing a tabbed button has its unique width and height for the anchor element. The above example shows the styles for the "about" tab.

The CSS styles for the anchor pseudo-classes
  1. li#about a:link, li#about a:visited {
  2. background-position:-66px 0px;
  3. }
  4. li#about a:hover, li#about a:focus {
  5. background-position:-66px -27px;
  6. }

In the first style we define the links and the visited links. The beauty of this technique reveals itself. It's all about background positioning. What we do is using the exact X and Y coordinates that fit the top left corner of the part we want to reveal. The second style defines the style when the mouse hovers the tabbed "about" button. The focus anchor pseudo-class is valuable for people using a keyboard devices.

how the Navigation Matrix works

The CSS styles for the active tab
  1. body#about-page ul#nav li#about a {
  2. background-position:-66px -54px;
  3. }

Last but not least is the style for the active tab. The above styles show the CSS for the "about" tab. Depending on your experience and knowledge of CSS, you probably wonder why I use body#about-page. Well basically what I did is give each body element for the pages that are linked to each tab an ID. This will become more clear in a later post when I'll talk a bit more about the implementation of my template pages in Expression Engine (EE). My header is a separate EE template which means that if I need to modify my header, I need to do this only once and all pages that include this template will be updated. You see in EE you can work with nested templates, this is one of the powerful features that I love about EE.

I guess you are most curious about the navigation's code. Here you go.


34served

gravatar

1

permalink this comment Steve Sun Apr 30, 2006 at 02.40 pm

This is a really clever way to take advantage of the CSS image-caching feature in most browsers. Thanks for the tip!


gravatar

2

permalink this comment baldo Sun Apr 30, 2006 at 02.58 pm

this is a nice example of good coding..

take a look at this event for more stunnig examples of css layouts:

http://www.cssreboot.com (i’m also rebooting on 1 may)


gravatar

3

permalink this comment Neovov Sun Apr 30, 2006 at 03.58 pm

Great Idea !

I’ve used sprites for www.lekargo.com, but each link is an double image positionned using CSS, not a “matrix” like you, I’ve some CSS dynamic (generated by PHP) for the gallery.
I’ll remember your technique ;)


gravatar

4

permalink this comment Colin Sun Apr 30, 2006 at 10.54 pm

I think this is one of the more powerful uses of CSS discovered in the standards-era. It’s the only true way to achieve beautiful, yet degradeable, navigation. I use it often.


gravatar

5

permalink this comment Mark Bowen Mon May 1, 2006 at 04.25 am

Hiya Veerle,

Yet another thoroughly excellent tutorial. Thanks to you I checked out the link to the Navigation Matrix and followed through the examples on that page and figured it all out but it did take a while.

Just reading through the article you have written made it all about another 300% clearer!! Thanks for that.

Please keep up all the excellent work for newbies to CSS like myself.

Best wishes,

Mark


gravatar

6

permalink this comment angelday true Mon May 1, 2006 at 05.28 am

I’m looking forward to the next part! Kudos for writing it up.


gravatar

7

permalink this comment Steve Mon May 1, 2006 at 07.31 am

Veerle,

Your timing is perfect.  I’ve been thinking about writing to you for a couple of days now, to ask about your background image.  I can’t figure out why the image has the right-side portion.  Does it ever get shown?


gravatar

8

permalink this comment Ryan Mon May 1, 2006 at 08.45 am

I think the Navigation Matrix technique is pretty cool. I’ve used that technique for each tab in a menu but never one image for the whole tab. I’m really enjoying seeing what went into the design for your blog. I’m looking forward to the next installment.


gravatar

9

permalink this comment Veerle Mon May 1, 2006 at 09.21 am

Steve said:

I can’t figure out why the image has the right-side portion.  Does it ever get shown?

Well actually you can just delete this part of the navigation image. I just left it there when I exported the file from Photoshop. I used the entire width just in case I add other buttons in the future, so there is actually no real value at the moment on that part.


gravatar

10

permalink this comment Reece Mon May 1, 2006 at 10.16 am

Yes, I’ve used this method for a few sites.  Creating an image-based navigation menu from just one image is amazingly creative and streamlined.  I did have one issue, that I’m sure others have noticed as well.  I noticed that when I updated to Firefox 1.5.0.2 on Windows XP that it was putting an annoying border around my links that ran all the way to the left side of the screen when I clicked on them.  I thought it was just a fault in my code, but I noticed the same effect on HappyCog and now here on your site.  I know it’s not really a bug, more a visual hint or give-away of how it’s really achieved.  Anyway, I wonder if this will change with Firefox 2.


gravatar

11

permalink this comment Matt Smith Mon May 1, 2006 at 10.48 am

I noticed that when I updated to Firefox 1.5.0.2 on Windows XP that it was putting an annoying border around my links that ran all the way to the left side of the screen when I clicked on them.  I thought it was just a fault in my code, but I noticed the same effect on HappyCog and now here on your site. 

- I think you can get round this by specifying the following style rule:

a:active {
border: 0px;
outline: 0px;
}

(It may only be necessary to specify the outline rule.)

The active link displays a dotted border / outline by default in Firefox, but most of the time you don’t see it, because it disappears when the new page loads. However, if there’s a delay in loading the page, or if your link references an object on the same page, the lines are still visible.

There’s an article here which explains - better than I can - how the problem arises and a fix to deal with it.

Hope that helps.

Thanks again, Veerle, for all your efforts in putting up these tutorials.

M.


gravatar

12

permalink this comment Veerle Mon May 1, 2006 at 11.03 am

@Reece and Matt Smith, I’ve read this article before, but I’m still not 100% sure that it won’t break accessibility. It’s there for a reason, that’s why I leave it alone for the time being. The author of the article states that if you use this CSS on the a:active only that it is OK, because you still allow for the browser’s default to handle the a:focus. This sounds OK but I still have my doubts since I haven’t tested this.


gravatar

13

permalink this comment Reece Mon May 1, 2006 at 11.13 am

Matt, Thanks for the link.  Controversial but informative.

Has anyone tried overflow:hidden for the list items?  More than one person mentioned that it worked for them. Does anyone know if this works for sure?...Anyone…Anyone…  Veerle?  :)  At least it wouldn’t affect accesiblity.

BTW, Veerle, I love your new wallpaper.  I’ve had many compliments on it from friends who use my computer.  I’ve been trying my best to re-create it.  Those blacks are tough to work with.  Different transparency levels give different hues of black.  Very difficult indeed.


gravatar

14

permalink this comment Josh Peters Mon May 1, 2006 at 11.38 am

Reece, Matt, and Veerle:

One remark about the Firefox focus issue is that it’s really a bad call to change the user experince too much.  On some levels, design is all about creating a customized interface and user experience, but when you go mucking about with default browser behaviors you risk breaking expected user behavior, which could lead them to think either your site is broken, or their browser is.

In general I believe that customers are okay with custom links (so long as they retain some of the regular link behavior like the pointy cursor and some visual distinction like color, bold, or underline) but once you go changing too many defaults people get lost.

On the other hand, for personal sites and to some extent blogs, you can do whatever you want :)


gravatar

15

permalink this comment Jackie Mon May 1, 2006 at 12.28 pm

Hi Veerle,

  I thought your navigation was really clever when I first saw it, and thank you for this thorough explanation and tutorial on the underlying CSS.  It makes a lot of sense to do it the way you have, and the CSS is becoming much more understandable after reading this, (plus a few other tutorials like Douglas Bowman’s Sliding Doors technique on A List Apart).  I have tried using a background hover image on my navigation, and have had an issue where they look fine on the PC in both IE and Firefox, but apparently extend way out beyond the margins of the actual nav link, on the MAC OS10.  I think it may be because I didn’t specify an exact pixel placement with the background image position, or a “block” display, as you have done here with yours.  Or it could be that I need to specify overflow: hidden as Reece mentioned, above.

  Anyway, thanks for shedding light on how this is done, and sharing your code with people, too. Some of the background positioning is still beyond me, as to how you know exactly how many pixels to specify, but hopefully I will figure it out. 

  Thanks again for all the insight into your blog construction, even though I don’t use EE,it is still fascinating to learn about it.  Also, I thought your pictures of the Botanical Gardens in D.C. were beautiful!


gravatar

16

permalink this comment Jenny Mon May 1, 2006 at 01.18 pm

I’m kinda confused, but I shall go back and read more deeply. It looks like something I could really use for my site. *is jealous of your skills* xD


gravatar

17

permalink this comment Pascal Tue May 2, 2006 at 02.36 am

Thank you for this (another great) tutorial. On my site I’ve styled each button individually!! I’ll try to apply your tutorial and re-do my navigation bar.


gravatar

18

permalink this comment sup Tue May 2, 2006 at 06.23 am

Love this design and the code walk-throughs are great.  One suggestion I have is to change the home anchor url from “index.php” to “/”.  This way your Home link resolves to the exact same URL as http://veerle.duoh.com.


gravatar

19

permalink this comment Ulf Tue May 2, 2006 at 09.38 am

Did you notice that in IE “archive” and “contact” are shaking on mousover? Like the hover-picture seems to be not 100% on the right spot? I use Win-XP, IE6.
By the way, I like your Redesign.
Ulf


gravatar

20

permalink this comment Veerle Tue May 2, 2006 at 11.35 am

Ulf said:

Did you notice that in IE archive and contact are shaking on mousover?

Hm… that’s very weird. I just checked again and things look fine, no shaky effect or what so ever and things match prefectly. I looked on Windows XP with Internet Explorer 6.


gravatar

21

permalink this comment Michaël Guitton Tue May 2, 2006 at 01.35 pm

Adding a few lines to your Apache configuration should help fix the flickering that Ulf noticed:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif           A2592000
ExpiresByType image/jpeg           A2592000
ExpiresByType image/png           A2592000
</IfModule>


gravatar

22

permalink this comment micha Wed May 3, 2006 at 09.42 am

you can see the flickering if you set your caching settings to “never” (ie/win).

a clever fix can be found on wellstyled.com. works like a charm!


gravatar

23

permalink this comment Reece Wed May 3, 2006 at 04.45 pm

I’m using Windows XP IE 6 with settings set to “never” for cache and I don’t see the shaking.  Could this be a SP1/SP2 issue?


gravatar

24

permalink this comment Hyun Thu May 4, 2006 at 01.25 am

Thanks for sharing your new website’s building process. I am a Expression Engine newbie. Looking forward to see the underline of your EE’s build processes! Here is my first EE site for my band Downsizers ( http://downsizersband.com ). You will notice it needs some help! Look forward to your next part so I can finish my site! ;)
Keep up the great work!


gravatar

25

permalink this comment Ulf Thu May 4, 2006 at 08.26 am

Hey guys, thanks for your feedback - it’s right I surf with caching options “never” because I’m also a developer and people complained about that problem often so I try to get my sites with no flickering.

I’m well aware of that flickering problem, but this is not the case with Veerles Menu. Thanks also to micha who posted the link - but still this is not the most reliable option especially when you have to use a CMS.

Because I know how hard it is to explain errors I made a small video to see what I tried to explain: http://web1.finest-webspace.de/veerle/veerle.html

By the way…I use WinXP Pro with SP2, but I guess that has nothing to do with it.


gravatar

26

permalink this comment Bob Digital Mon May 8, 2006 at 05.18 pm

Cool menu. Pretty accessible too, except for the fact that people with images turned off wont see your menu at all. I wish CSS had more conditional capabilities than @import (ie: if noImages then load xyz.css)

Oh well, like I always say:

“Screw the losers who surf without images”


gravatar

27

permalink this comment René Kleizen Thu May 11, 2006 at 01.02 am

nice article, good explanation


gravatar

28

permalink this comment Mike Smullin Fri May 12, 2006 at 01.01 am

About that comment earlier on hiding the annoying focus/active dotted outline…

It is an outline NOT a border and it is terrible practice to hide tab focus from the Section 508 crowd.

But it is totally cool if you plan on presenting an EVEN BETTER visual cue.

In my case, I decided that rather than a silly dotted outline it should look more like highlighted/selected text; that just seems to make more sense, and it looks great… especially when you combine it with Mozilla’s ability to customize the background and color attributes of highlighted text:

a:focus,
a:active {
  -moz-outline:none;
  background:#cff;
  color:#06c;
}
::-moz-selection {
  background:#cff;
  color:#06c;
}


gravatar

29

permalink this comment Matt Keogh Mon May 15, 2006 at 09.18 am

Nice idea and I really like the re-design.Shame about the images off problem though. There is a bit of a solution here though but as always it invloves extra spans.

http://neal.venditto.org/articles/12/bir/


gravatar

30

permalink this comment Olav Mon May 22, 2006 at 02.15 pm

Thanks! Was just pondering how to do a clients navigation when I remembered your article. Now it looks much better. :)


gravatar

31

permalink this comment matt keogh Fri May 26, 2006 at 08.45 am

Thanks for the write up.

However, this breaks on IE 5.5 (haven’t tried IE 5).

This browser doesn’t like the -999em text indent used to hide the text. It seems that wrongly it moves the link too so you can’t click on it.

A solution (which also solves the images off problem) is to surround the actual text in the link with a span (I know that’s not good!). Then on the span use:

position:relative;
z-index:1;

and take off the text indent. This puts the text behind the image so with images off you can still see it and seems OK with IE 5 and all the main browsers.

I’ve also used a overflow hidden on the UL so that the text never shows outside the image.

Maybe with a bit of extra work it might be possible to put the bg image on the span instead of the href which would also solve the image flicker problem.


gravatar

32

permalink this comment Kaoro Mon May 29, 2006 at 08.39 am

I was wondering how you start creating a layout such as this one, Veerle? Do you sketch it on paper, then create each individual graphic in some program like Photoshop?

I just kinda code / make graphics as I go. It worked pretty well for me this time around but as I add more things to the site there’s a little discord in the appearance of some things. (I just do this stuff in my spare time, not a professional).


gravatar

33

permalink this comment Veerle Wed May 31, 2006 at 05.36 am

Kaoro said:

I was wondering how you start creating a layout such as this one, Veerle? Do you sketch it on paper, then create each individual graphic in some program like Photoshop?

Call me a weirdo, but I almost never sketch websites on paper, that just don’t work for me. The rare times I do sketch it on paper is just to get some idea of the grid, the placement of things. Most of the time I just fire up Photoshop and start from there, experimenting a bit and one thing leads to another, I get new ideas while I’m designing. The basic idea is already in my head, but that’s not always the case, sometimes I need some browsing around to get inspired. It’s very hard to describe this “pre-design finding inspiration” process. Sometimes just taking a small break helps to get me going again.


gravatar

34

permalink this comment Anamaria Wed Jun 21, 2006 at 02.53 pm

Hi Veerle,
I just wanted to thank you for your clear explanation of this technique. After several failed attempts at building my own navigation matrix menu, I came across your site and thanks to your step-by-step example, I was able to figure it out! I only have a header so far, but hopefully I will get the rest of the template finished soon. Then I will still have to learn how to use it with EE! I guess I have a lot of work ahead of me ;) Thanks again for all your help.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist