Building a horizontal menu using <ul> <li> css?

Hello,

I wondered if anyone would be-able to advise, I trying to build a horizontal menu in the header div on my page using the <li> tag.

My code below displays the menu as a horizontal list, but I was trying to replace the border-right:1px solid #443526; which is displayed between each menu item with a gif available here:

http://www.members.aol.com/antoniryszard/header_divide.gif

Would anyone be-able to advise if this can be achieved, and how I might approach the use of the gif?

Thank you


<div id="menu">
    <ul>
          <li>
              about    
          </li>
           <li>
               jewellery
           </li>
            <li>
               how to buy
            </li>
             <li>
                links
             </li>
              <li>
                contact
              </li>
      </ul>
</div>

div#menu {

            float:left;

            margin-top:45px;

}



div#header {
            height:144px;
            background-image: url(images/title-slice.jpg);
            background-repeat: repeat-x;
}

div#menu ul {
            float:left;
            margin-top:65px;
}


div#menu ul li {
            display:inline;
            padding:0px 15px;
            border-right:1px solid #443526;
}


div#menu ul li.final {
            padding-right:0px;
            border-right:none;
}


div#menu ul li {
            font-family:Verdana;
            font-size:11px;
            font-weight:bold;
            color:#91D0ED;
}
AntoniRyszardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HarriPaavolaCommented:
div#menu ul li {
background-image: url(header_divide.gif);
background-repeat: no-repeat;
background-position: top right;
}
div#menu ul li.final {
background-image: none;
}


You might want to add couple pixels left padding to those li-elements so the divider would be in the middle.
0
AntoniRyszardAuthor Commented:
Thanks, I will try this.

For testing is it possible to place the css body in the html page?
0
AntoniRyszardAuthor Commented:
When I changed the code to below, the menu items were displayed under each other with the header_divide.gif displayed to the right of the text.

The type of layout I was hoping is something like:

http://www.members.aol.com/antoniryszard/layout.jpg using the gif to divide the menu options.

Thank you

<html>
<head>
<title></title>

<style type="text/css">
div#menu ul {
            float:left;
            margin-top:65px;
}


div#menu ul li {
      background-image: url(header_divide.gif);
      background-repeat: no-repeat;
      background-position: top right;
}


div#menu ul li.final {
      background-image: none;
}


div#menu ul li {
            font-family:Verdana;
            font-size:11px;
            font-weight:bold;
            color:#91D0ED;
}
</style>

</head>

<body>


<div id="menu">
    <ul>
          <li>
              about    
        </li>
        <li>
               jewellery
      </li>
      <li>
               how to buy
      </li>
      <li>
               links
      </li>
        <li>
                contact
      </li>
     </ul>
</div>

</body>
</html>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

AntoniRyszardAuthor Commented:
0
HarriPaavolaCommented:
Oh, sorry. Don't remove those display: inline; and padding: 0px 15px; lines.

div#menu ul li {
display:inline;
padding:0px 15px;
background-image: url(header_divide.gif);
background-repeat: no-repeat;
background-position: top right;
}
div#menu ul li.final {
padding-right:0px;
background-image: none;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AntoniRyszardAuthor Commented:
Thank you for replying.

I changed the menu as below, to increase size of the divide gif image.

When I displayed the code in IE 6, the menu was displayed a little way from the left. I wondered if there was any reason why the menu would not display directly on the left?

Thanks again

<html>
<head>
<title></title>

<style type="text/css">
div#menu ul {
float:left;
margin-top:20px;
}


div#menu ul li {
display:inline;
padding:20px 15px;
background-image: url(header_divide.gif);
background-repeat: no-repeat;
background-position: top right;
}

div#menu ul li.final {
padding-right:0px;
background-image: none;
}

</style>


</head>

<body>


<div id="menu">
    <ul>
          <li>
              about    
        </li>
        <li>
               jewellery
      </li>
      <li>
               how to buy
      </li>
      <li>
               links
      </li>
        <li>
                contact
      </li>
     </ul>
</div>

</body>
</html>
0
AntoniRyszardAuthor Commented:
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.