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

CSS Tricks

On my web site I use quite a lot of css-tricks I gathered from the web and 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 the implementation in the leading browsers). Now, first an 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. I started the website by using a cheap WYSIWYG editor, but after reading the excellent tutorials and articles that were on the WEBMONKEY'S site those days I felt a sudden strong wanting to control things myself and avoiding unnecessary code lines. It has cost me a lot of time and creative pain since then! Thanks guys ;-) You can see some older pages I created with NotePad and a "gallery generator" that I wrote in the ancient Qbasic 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 know 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 the basic page lay-out, which was originally frame based, the frames being used for the book page borders. These borders are now positioned with div's and they should have no secrets for you, but less obvious is that the basic page lay-out looks like this example, so the left border fills the entire page. Why? Because I know no other way of getting the left border height right. You do?! Let me know! I use the .pg div to tile the page full with the background .jpg. Now look at the INDEX tabs at the top left of the lesser boatman page we already looked at. This is one of the tabs in the main picture gallery's, take a look at one. These tabs are transformed from a table based version to this left floating list version using the great sliding doors of css-technique 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 .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!