AntoniRyszard
asked on
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;
}
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;
}
ASKER
Thanks, I will try this.
For testing is it possible to place the css body in the html page?
For testing is it possible to place the css body in the html page?
ASKER
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>
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>
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
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>
ASKER
Hello.
I also posted related question:
https://www.experts-exchange.com/questions/22471312/Building-a-menu-using-ul-li-css.html
I also posted related question:
https://www.experts-exchange.com/questions/22471312/Building-a-menu-using-ul-li-css.html
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.