Klik hier hier voor een Nederlandse versie. Naar Nederlandse pagina to Dutch version

CSS Tricks

This article is NOT meant as a tutorial. I would like to make one, but just haven't got the time to do a solid step by step article. But on my web site I use quite a lot of css-tricks I gathered from the web, from books and magazines. Though I'm just an amateur and some of my code lines will hurt the eyes of pro's, I want want to share with you some of the nice and even exiting things I have found (and the frustrations of their implementation in the leading browsers).

Now, before we continue, I expect a certain experience from you, the reader. You are familiar with the use of <divs> and <spans> and know what to do with them. Still here? Then let's plunge right into the most complicated page of my site where almost any css-trick I learned is present! Please take a peek at the source of the page, to see the names of the style sheets used. The first one is galstyle.css (has itself sneaky promoted from a style sheet for my picture galleries to the site's main style sheet). The first task of this style sheet is to set the basic page lay-out, which was originally frame based, the frames were used for the album page borders. These borders are now positioned with <div>'s and that should have no secrets for you. However: less obvious is that the left border is made by the <body> background picture. If you are curious: see these example pages. The stylesheets part we're dealing with here is the #linktab definition. This forms the navigation tabs. The second stylesheet used here, subgalstyle.css was made for subgalleries, as the name implies. For the chosen example page it doesn't do much more than formatting the top left "INDEX" tabs.

Please take a look at all the navigation tabs at the top of the lesser boatman page we are studying (the "INDEX" one and the " 1 2 3 4 .." sequence) . These tabs are an adapted version of the tabs in the main picture gallery pages, of which you see here a shortened example, with black borders added:

(Note: I gave the tabs shown here a black border on top and sides, for a better understanding of how the tab pictures work).

The tabs I transformed from a former table based version, to this left floating list version using a great idea: the sliding doors of css of Douglas Bouwman. I am not going into detail on this technique, because Douglas can it explain it far better than I can. But in the section below you can read on, if you are still curious.

The sliding doors idea is basically a picture styled anchor tag, sliding over a picture styled list tag. In this way the tabs will set their width on basis of their text content. I used only a very narrow picture for the anchor tag, as you will see below. The rest of the background of each tab is a picture that is the same as the page background picture, only a tad darker, because I wanted the illusion that the tabs are at a lower level than the page. The tabs can be animated, by changing (for example) the background picture, the textcolor or style of the anchor tag when it enters the a:hover state. I used the following tricks for the tab animation.
First: two pictures, shaded and unshaded vertical borders (ltablinks.gif and ltabrechts.gif) for the left border of each tab:

For the anchor tab in rest the shaded one:    tabborder    and for the hover state the non shaded one:    tabborder   giving the illusion of the tab moving up, towards the viewer.
(Please mark: even though the .gifs lay over the left side of each tab, the thin brown line gives the illusion of being the right border of the "paper" left of each tab, and of that paper casting a shadow over the left side of the tab itself!)

Second: the padding of the text of the anchor tag in rest is 5px 5px 2px 15px, in the hover state it is 4px 6px 3px 14px. In this way the text is moved a little higher and more to the left: again helping the illusion of the tab moving upwards to the viewer.

Last: the bottom border is 1px on the anchor tag in rest, but in the hover state, with 2px a bit thicker, giving the illusion that the tab then casts a shadow below the tab on the page because, again, it moves up to the viewer. You can check the three illusions on the tabs in the section above.

As I wrote, the background of the tab is a somewhat darker version of the background .jpg - and the illusion might be better if the tab background also changed to the page background in the hover state. But I didn't know how. However, when you click the tab, then the tab background will change to the background of the page, because then the tab <LI> background is transparent. The anchor tab of this clicked tab (#nolink), has on its left side the non shaded .gif, shown above. This, combined with the bottom border set to 0 px ( = no border) and the text colour black, gives the illusion that you selected the page of which the tab was part. You may try it out on the gallery pages, to understand the effect.

I will spare you the details of the end of the menu tabs, you can work that out yourself.

But anyway, here's the .gif for that border, used to simulate the start of the page itself: tabborder

Now for those of you that still bear with me, the trick for the changing picture(s) and text menu on the example page I have chosen.
I found this handy CSS construction, that does not need Javascript, somewhere on the web years ago - but forgot the url. To see it working, you can hover your mouse cursor over the menu items ("HELP, general, head, thorax,..."), then you will see pictures and text changing. How is this done ?

Well you can find that in the "style type CDATA" part of the page source. First, div#topcorn is the one that's forming the darkbrown image part. Next to that <div>, the container div#plinks is laid on the right, it is the light coloured block in which the anchors with there menu item textlines are placed with their div#plinks a style.

In the container, again the anchor tags are doing the trick. When hovering over, the background of the anchor text is made white by div#plinks a:hover, no big deal. But then it comes: div#plinks a:hover img positions its image, not under the anchor text, not even in the div#plinks container, but elsewhere on the page at an absolute position, which is in the top part of the darkbrown part! And it doesn't stop there: a second image is positioned below the first, with div#plinks a:hover img.p2 - it is the larger picture of the anatomy parts of the Lesser Waterboatman. Then, finally, div#plinks a:hover span smashes a block of appropriate text on the page, on the right of the menu block. It wouldn't surprise me if even more is possible....

By looking at the <div id="plinks"> part of the page source, you can see how each menu item is build up. But I am astonished that you have read this far, and so I thank you !



© G.H. Visser 29-01-2006
rev. 28-03-2022

Valid XHTML 1.0!