The result of the CSS and AJAX online courses I took was that I finally had enough knowledge to give my simple HTML shakuhachi website a facelift. Some of the technical experiences I found interesting along the way in developing the site are listed below:
- Centering the Page - It is not as noticeable on older monitors, but many websites are not centered on monitors with wider aspect ratios. The code required to center a page is fairly simple, and it turned out that a lot of the problems I had getting my pages centered was due to a problem in my Facebook “recommend” button code. I found the simple secret to getting the page to center was to use “margin: 0 auto;” in the div for the content wrapper. Not surprisingly, there are older versions of Internet Explorer where this method does not not work. The workaround for those browsers is still fairly simple, this web page has a good explanation of what needs to be done.
- The navigation bar - I spent a lot of time getting the navigation bar to work correctly, but the reason for that is mostly because I was trying to learn CSS before I knew much about it. I have Christopher Ware to thank for the beautiful navigation buttons. It is not a tutorial, but Christopher provided some very good clean examples to look at and use. Thanks Christopher!
- Displaying a tooltip with CSS - The Related Links page is unique in that when the cursor is hovered over the link, a box appears with a brief description of what the viewer can expect when the link is clicked. I got this working by tweaking some demo code I found by Trent Richardson. Thanks Trent!