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!
  • Collapsable/Expandable text - As first seen on this page of the shakuhachi site, when the links are clicked the text expands. This is useful because the person viewing the site can see a “bird’s-eye” view of the page before expanding the text. I accomplished this with javascript. Basically what happens is that there is a javascript function that is started when one of the links is clicked. The javascript function checks to see if the text is hidden via the text’s “style.display” property. If the text is hidden the “style.display” property value is changed to “inline” so that the text will be displayed, if not the property is changed to “none” so that the text will be hidden.    
  • 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!

 

[Home] [About] [Tech Corner] [Singularity] [Robotics] [Pocket PC] [Projects] [Blog] [Free Software] [Shakuhachi] [Contact]