Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems changing a menu from using div to an unordered list

    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)

    CSS:
    Code:
      /** 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 */
    HTML:
    Code:
           <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>
         </div>
    Attached Thumbnails Attached Thumbnails Problems changing a menu from using div to an unordered list-home.jpg  
    Thanks
    Jim M

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
           <div class="menu">
    <ul>
             <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>
    </ul>
         </div>
    Code:
    .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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts
    harbingerOTV,

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

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •