View Full Version : Problems changing a menu from using div to an unordered list

02-03-2007, 01:37 AM
Having problems changing this to an un-ordered list I've seen alot of list s that use 2 graphics (one for normal state and one for mouse over, but would like to figure out a way to do it with a single graphic. Graphic I'm using is 75px width, 150 height, the top 75 px is one picture, bottom 75 px is another picture (see attached)


/** MENU TYPE 3 -- Picture with Home page listed **/
div.menu {text-align: center; margin-left: 12.5em;}
div.menuitem1 {background: url("user_files/Image/menu/Home.jpg") 0 -75px no-repeat;}
div.menuitem1 a {background: url("user_files/Image/menu/Home.jpg") top left no-repeat;}
div.menuitem2 {background: url("user_files/Image/menu/Services.jpg") 0 -75px no-repeat;}
div.menuitem2 a {background: url("user_files/Image/menu/Services.jpg") top left no-repeat;}
div.menuitem3 {background: url("user_files/Image/menu/Creations.jpg") 0 -75px no-repeat;}
div.menuitem3 a {background: url("user_files/Image/menu/Creations.jpg") top left no-repeat;}
div.menuitem4 {background: url("user_files/Image/menu/Tips.jpg") 0 -75px no-repeat;}
div.menuitem4 a {background: url("user_files/Image/menu/Tips.jpg") top left no-repeat;}
div.menuitem5 {background: url("user_files/Image/menu/Contact.jpg") 0 -75px no-repeat;}
div.menuitem5 a {background: url("user_files/Image/menu/Contact.jpg") top left no-repeat;}
div.menuitem {float: left; width: 80px; height: 75px; margin:0px;}
div.menuitem a {display: block; width:100%; height:100%; overflow:hidden; text-decoration: none;}
div.menuitem span {display: block;}
div.menuitem a:hover {background-image: none;}
/* start header menu rules */

<div class="menu">
<div class="menuitem1 menuitem"><a href="index.php?section=Home&subsection=Home"></a></div>
<div class="menuitem2 menuitem"><a href="index.php?section=Services&subsection=Services"></a></div>
<div class="menuitem3 menuitem"><a href="index.php?section=Creations&subsection=Creations"></a></div>
<div class="menuitem4 menuitem"><a href="index.php?section=Tips&subsection=Tips"></a></div>
<div class="menuitem5 menuitem"><a href="index.php?section=Contact&subsection=Contact"></a></div>

02-03-2007, 04:54 AM
<div class="menu">
<li class="menuitem1 menuitem"><a href="index.php?section=Home&subsection=Home"></a></li>
<li class="menuitem2 menuitem"><a href="index.php?section=Services&subsection=Services"></a></li>
<li class="menuitem3 menuitem"><a href="index.php?section=Creations&subsection=Creations"></a></li>
<li class="menuitem4 menuitem"><a href="index.php?section=Tips&subsection=Tips"></a></li>
<li class="menuitem5 menuitem"><a href="index.php?section=Contact&subsection=Contact"></a></li>

.menu ul { list-style: none; margin: 0; padding: 0;}
.menu ul li ( margin: 0; padding: 0;}
.menu {text-align: center; margin-left: 12.5em;}

.menuitem5 a {background: url("user_files/Image/menu/Contact.jpg") 0 0 no-repeat;}

.menuitem5 a:hover {background-position: -75px 0;}

.menuitem {float: left; width: 80px; height: 75px; margin:0px;}

.menuitem a {display: block; width:100%; height:100%; overflow:hidden; text-decoration: none;}

try somrthing like that. I didnt test it but seems right. I use "sliding doors" a lot. I'm quite fond of it.

google for "sliding doors" as well. alistapart has a good artcle on the technique.

02-03-2007, 07:01 AM

Thanks much, code was right on. Had never heard of sliding doors and did some googleing great help.