Windows
- Firefox and Mozilla 1
- Internet Explorer 5 and 6
- Opera 8.5 and 9
Macintosh
- Firefox and Mozilla 1
- Internet Explorer 5
- Netscape 7
- Safari 1
- Blue - #859CFE
- Pink - #FE859C
- Green - #9CFE85
These are not browser-safe colors, so there might be some dithering on older monitors, but I'm willing to risk that.
I used a series of fonts in my order of preference for the headers of this layout:
- Balthazar
- "Blackadder ITC"
- "Comic Sans MS"
- "Arial Rounded MT Bold"
- Arial
- sans-serif
Note that the last font listed is a generic font type.
I based the layout on a photo of an iris from my backyard. Plus, I created a small icon using the letter "a" in the Wingdings2 font. I didn't want to trust that everyone viewing this page would have this font, so I created an image rather than using text.
- top header with 15px pink lower border, 100px high
- left column topped with image of iris 150x139px
- "button" links in left navigation are created with CSS and anchor tags: green background color, blue bottom border, and blue font color with pink hover color
- main column takes up remaining space, and is positioned using margins
- Copy the CSS into a document named styles.css
- Copy the HTML into another document in the same directory
- Download the iris image and the icon and place them in the same directory
- Change the text to your content
- Publish all four documents
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
