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).

First a somewhat annoying detail: because I promised myself NOT to use javascript, and xHTML forbids the use of the _target = attribute, you will have to use the back back button of your browser to come back here after looking at some of the example pages you are linked to below. How I started the website by using a cheap WYSIWYG editor and more you can read on my history page.

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! Look 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.

Then look at the INDEX tabs at the top left of the lesser boatman page we are studying. This is one of the tabs in the main picture gallery's, here is a shortened example:

(not all tabs shown here)

These 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, because Firefox, when enlarging the fonts, would mess up these tables, it didn't respect my fixed font-size in these - (how dare they!). I am not going into detail on this technique because Douglas can it explain it far better than I can. I only recollect here it is basically a picture styled anchor tag sliding over a picture styled list tag. For the tabs in the gallery's I use mostly one tabborder .gif, which is the left?right? shade of the tab. For the background I use a darker colored version of the background .jpg.



© G.H. Visser 29-01-2006

Valid XHTML 1.0!