About this site
Absolutely NO JavaScript, tables or framesSite Evolution
I originally started this site as a place to park photographs so that they were accessible to family and friends. It was both difficult and time consuming (for me and them) to email picture files, often sending the wrong ones from lack of total communication, and consuming much slow modem bandwidth in the process.
Over a couple of years it has evolved in fits and spurts, both as I had time, and as I learned more about trying to code what I pictured. Some of the previous code was really ugly, which offended me as a programmer who likes simple, elegant solutions.
The first iteration was brute force code — way too many unneeded elements and no separation of content and design. The second iteration used Cascading Style Sheets, with most style elements in a separate style sheet, but far too many cluttering up the main html document content. This iteration finally cleans things up — hopefully — and fully separates content and style in two fully validated documents.
Unfortunately, the site is still heavy on the photo album part, which is fairly easy to construct, and lighter in places on the real content that I would like it to have, which takes far more time to design and construct. Someday — perhaps when I have more time or have invented a clone — this site will be more filled with selected photos highlighting commentary on family, friends, and the many places I have visited. So keep coming back, and someday you might be surprised.
Cascading Style Sheets
The pages of this site demonstrate a little of what can be accomplished with W3C's Cascading Style Sheets language CSS1 and a little teeny piece of CSS2 (specifically, the hover effects on hyperlinks). Remember, there is no Javascript in any of the effects, nor any proprietary extensions to CSS or any other language.
Any browser that does a good job of supporting positioning will get most of the stuff I did on these pages correct. It's all done using straight W3C-recommended markup and styling, all validated. Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 will get this right.
Mucking things up even more is ME not getting things right, or not finding the fine line of which code hacks to include for which buggy browser. I repeat the mantra "I hate Internet Exploder's buggy CSS implementations" far too many times for my own good, although unfortuantely, there are others with problems as well.
Anyway, again I say it: NO Javascript was used in the making of this page.
What the...? You lie!
I do not. Here is one example of how part of it is done.
The "buttons" in the top navigation links are span
elements
inside the actual hyperlinks, which themselves are inside a horizontal
list. Here's one example from the source of this document:
<li><a href="html/Resume.html"><span> Resume</span></a></li>
Notice how the hyperlinks light up when you're hovering over them. That's done with nothing more complicated than the style sheet definition to change the color and style during the hover:
#header {background:#369;}
#header ul span {text-transform:uppercase;font-weight:bold;color:#9cf;}
#header ul a:hover {background:#036;color:#fff;}
Code Validation
Beautiful CSS Demo
More about CSS
- Introduction to CSS
- Layout Tips, Tricks & Techniques
- CSS Positioning Tutorial
- Site Navigation
- Rollovers Tutorial
- More On Rollovers
- WDG CSS References