hai,

 

How to add image(seperators) in the horizontal menus in div design

Like as

Home | about us | contact us

 

Pipe symbol is a image

 

 

 

my code:

 

#menubar{
float:left;
width:970px;
background-image:url(../images/header_bg.png);
background-repeat:repeat-x;
height:38px;

}
#menubar ul{
float:left;
margin:0 auto;
width:970px;
}
#menubar li{
float:left;
font:Arial;
font-size:12px;
font-weight:bold;
color:#000000;
list-style:none;
padding:10px 10px 10px 20px;
}

 

 

 

<div id="menubar"><ul>
<li>Home<img src="images/divder.png" /></div></li>
<li>Departments</li>
<li>Photo Gallary</li>
<li>Admissions</li>
<li>Alumni</li>
<li>Academic</li><li>Contact us</li>

</ul></div>

Edited September 9, 201114 yr by Renaissance-Design

Firstly, use the code button on the editor, it makes your code much easier to read.

 

To add an image between your list items, give them all left padding and add it as a background-image. Add a class of "first" to your first menu item and unset the left padding and background image on that.

or give them a right border if you just want a line?

thanks for your replay.

Am a beginner in web designing. Could you show me the sample code

 

 

 

Firstly, use the code button on the editor, it makes your code much easier to read.

 

To add an image between your list items, give them all left padding and add it as a background-image. Add a class of "first" to your first menu item and unset the left padding and background image on that.

Edited September 9, 201114 yr by ramesht

Firstly, use the code button on the editor, it makes your code much easier to read.

 

To add an image between your list items, give them all left padding and add it as a background-image. Add a class of "first" to your first menu item and unset the left padding and background image on that.

 

Could also use :first-child

It isn't helping that you have a stray </div> tag immediately behind the <img> tag.

 

<div id="menubar"><ul>
<li>Home<img src="images/divder.png" /></div></li>

Edited September 15, 201114 yr by nfc212

Could also use :first-child

 

 

Absolutely. I tend to fall back on the method I quoted out of habit as much as anything else, but :first-child is pretty well supported these days.

#menubar ul li {
   float:left;                   /* Make list items sit on one line */
   padding:0 10px;               /* Apply 10px of padding to the left and right of all list items */
   border-left:1px black solid;  /* Add a 1px black border the the left of every item */
   }
#menubar ul li:first-child {
   padding:0 10px 0 0;           /* Remove the left padding from the first list item */
   border-left:none;             /* Remove the border from the first list item */
   }

This is the bare bones code you would need to create the effect your after. Obviously you'll need to add any additional code to create the look you want. I've used the :first-child pseudo element. It has fairly good support but if you'd prefer you could add a class of .first to the first li and change the selector #menubar ul li:first-child to #menubar ul li.first.