#topnav { width: 1000px; height: 19px; background-image: url(images/nav_set1_back.gif); background-repeat: no-repeat; } /* position: absolute needed to place rollovers */ #topnav a { position: absolute; text-decoration: none; visibility: visible; } #topnav a i { visibility: hidden; } a#propertydescription_link { left: 204px; width:154px; height:19px; } a#amenities_link { left: 358px; width: 91px; height:19px; } a#leasing_link { left: 449px; width:75px; height:19px; } a#contact_link { left: 524px; width:149px; height:19px; } a#tenant_link { left: 673px; width: 122px; height: 20px; } /* --------------------------------------- these are the images for the rollovers --------------------------------------- */ a#propertydescription_link:hover { background-image:url(images/top_nav_propertydescript_o.gif); background-repeat: no-repeat; border: none; } a#amenities_link:hover { background-image: url(images/top_nav_amenities_o.gif); background-repeat: no-repeat; border: none; } a#leasing_link:hover { background-image: url(images/top_nav_leasing_o.gif); background-repeat: no-repeat; border: none; } a#contact_link:hover { background-image: url(images/top_nav_contact_o.gif); background-repeat: no-repeat; border: none; } a#tenant_link:hover { background-image: url(images/top_nav_tenant_o.gif); background-repeat: no-repeat; border: none; } /* -------------------------------------------------------------------------------------- this is the code so that when you are on a certain page it highlights the link. you have to put this code into the body tag of the page too, it's diff for each page -------------------------------------------------------------------------------------- */ body#propertydescription_link a#propertydescription_link { background-image:url(images/top_nav_propertydescript_o.gif); background-repeat: no-repeat; border: none; } body#amenities_link a#amenities_link { background-image: url(images/top_nav_amenities_o.gif); background-repeat: no-repeat; border: none; } body#leasing_link a#leasing_link { background-image: url(images/top_nav_leasing_o.gif); background-repeat: no-repeat; border: none; } body#contact_link a#contact_link { background-image: url(images/top_nav_contact_o.gif); background-repeat: no-repeat; border: none; } body#tenant_link a#tenant_link { background-image: url(images/top_nav_tenant_o.gif); background-repeat: no-repeat; border: none; }