My sister got married to her Internet-boyfriend on the 5th of September of this year. It was a momentous occasion with many guests from far and near. To remember all this they had rented a photographer who took many lovely pictures. To be able to share all these pictures with people from all over Europe they wanted to use the Internet: a website with the best photos. Veronica asked me to design the site and we sat down to scetch what it would look like. Pretty quick we decided that a tabbed interface would be a very nice. Both for the GUI and as a way to divide the pictures into themes of the different parts of the day. But how to do this?
http://www.dijkman-dulkes.nu/trouwen At my work I've used tabs several times, but only in combination with tables. With Javascript the "normal" CSS-classes of the tablecells where replaced with "active" classes on mouseover, and back again on mouseout. Works nicely and looks nice as well - nothing wrong about that. But being a standards-freak and wanting to be able to do this completely with CSS I roamed the Internet for examples. Pretty soon I found the brilliant CSS-tabs of the guys at Kalsey. Originally their example provided a listmenu designed as tabs with submenus for every tab. Now this was a little overkill for the site of Bart and Veronica, so I played around with design for a while and ended up with what you can see on the picture above. I had to build in a CSS-hack for IE 5, as this browser cannot interpret "clear:both" properly (instead it draws a large, ugly gap, with the backgroundcolor of the body, between the tabbed menu and the content area). I solved it by using a margin-bottom in pixels instead of the "clear".
Furthermore it was quite basic layout with <div>'s for all the objects and for the two columns of pictures in the contentarea and <p>'s for the pictures and picturetexts themselves. I'm proud to say that there have been no use of tables in this website what so ever! Go check it out!
Posted by Sebastiaan Naafs - van Dijk | top
posted:
1... on 04 October 2024 @ 07:31