www.RickLaFleur.com

Favorites:

In this above AJAX example, the more a link is used, the higher on the list it will appear on the list - updated with each click! Mouse over for details on link and it's current 'score'. Also note the time displayed on the last bullet; it's there for demo purposes only and will update anytime you click within the box.

This picture was the theme for this site.

Rick overlooking central park Having recently moved to the heart of New York City from Portsmouth NH, I found myself longing for a little more green.So when I received a requirement to create a web site, I decited that it was time to overhaul the existing www.ricklafleur.com web site.

The key objective is to make the site, which is currently based on Blogger content, more colorful, dynamic, and functional. The new style for this site is based on the attached picture of me over looking central park; the hedge will act as a background image providing much needed texture to the page.The key functional enhancement for the project is to add a page of my favorite links which will appear much like a search engine result. This list will be backed by a database and editable via an admin page on the site.

In addition, this site is designed to use a fluid layout. The text will flow with the changing of the browser window. Likewise the size of the text can be changed by the user (browser, view, font size). This means there is less control over how the page will look, but more flexibility for users on having different monitor width or who may tile their windows.



A "rollover" menu without using JavaScript

Using JavaScrip to add roll over effects is very common. Only problem is if JavaScript is not enabled. An alternative is to use Cascading Style Sheets (CSS) to provide the roll over effect. The following illustrates how this can be done:

The menu HTML is free of any markup other than the id. Also, note that it is an unordered list rather than, say, a table with buttons. It will be converted into a 


<div id="menu">
<ul>
    <li><a href="/about.php" >About</a></li>
    <li><a href="/blog.php"  class="selected" >Blog</a></li>
    <li><a href="/links.php" >Links</a></li>
    <li><a href="/pictures.php" >Pictures</a></li>
    <li><a href="/login.php" >Login</a></li>
</ul>
</div>

The first step is in creating a horizontal menu from the unordered list. This can be done using the 'float: left' CSS attribute to include the items inline.

#menu
{
    background-color: #000000;
    color: #ffffdd;
    padding: 0.33em;
    border: 1px solid #000000;
    font-weight: bolder;
    height: 1.75em;
}

#menu ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#menu li
{
    float: left;
    margin: 0 0;

}

The next step is to add the roll over effect. This can be done using the a:hover pseudo class. 

#menu li a
{
    color: White;
    height: 1em;
    line-height: 1em;
    float: left;
    width: 5em;
    display: block;
    border: 1px solid Black;
    text-decoration: none;
    text-align: center;
    padding: 0.33em;
    margin: 0 0.33em;
}

#menu li a:hover
{
    border-color: #CCCCCC #333333 #333333 #CCCCCC;
    background-color: Gray;
    background-position: top left;
    background-image: url("/images/bg-dot-red.bmp");
    background-repeat: no-repeat;


}

#menu li a:active
{
    background-color: Gray;
    color: Red;
    border-color: #333333 #CCCCCC #CCCCCC #333333;
}

#menu li .selected
{
    border-style: solid;
    border-width: 1px;
    border: 1px solid Black;
    background-color: Gray;
}

The end result appears as follows:

example menu