Solved

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

Posted on 2007-03-22
7
4,132 Views
Last Modified: 2008-02-07
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;
}
0
Comment
Question by:AntoniRyszard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
7 Comments
 
LVL 3

Expert Comment

by:HarriPaavola
ID: 18775371
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
 

Author Comment

by:AntoniRyszard
ID: 18775421
Thanks, I will try this.

For testing is it possible to place the css body in the html page?
0
 

Author Comment

by:AntoniRyszard
ID: 18775588
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Accepted Solution

by:
HarriPaavola earned 80 total points
ID: 18775688
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
 

Author Comment

by:AntoniRyszard
ID: 18785007
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

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question