Member Avatar for waluigi

Hi,
my problem is that I've got menu and want to have separators beetwen every <li>

ul#nav li {
		display: inline;
		font-size: 1.3em;
		background: url(img/2/separator.jpg) right  no-repeat;
		
		padding: 10px;
		
	}

but when I add

ul#nav li:first-child  {
		background: url(img/2/separator.jpg) left   no-repeat;
	}

it shows separator only on the left, not right and left in first item.
is it possible to do that through css?

cheers

  • 3 Contributors
  • 2 Replies
  • 83 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

was on the right track but hit a common pitfall: using the background shorthand replaces any previously set background values, so a second rule that sets a left image will overwrite the right image rather than add to it. Inline-level <li>s also only paint the inline box, which affects how a separator image appears. asked for a screenshot and suggested putting a background on the ul — that can work for fixed-position graphics, but it is less flexible for true between-item separators.

A robust, modern approach is to draw the separator between items with the adjacent-sibling selector and a pseudo-element. This places the separator between each pair of items and avoids trying to stack two backgrounds on one element:

ul#nav li {
  display: inline-block;
  padding: 0.5em 1em;
  vertical-align: middle;
}

ul#nav li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background-color: #ccc; /* or use an image via background-image */
  margin-right: 0.6em;
  margin-left: -0.6em;
  vertical-align: middle;
}

If both left and right images on a single element are required, CSS3 multiple backgrounds can be used (see MDN), but note older browsers (pre-IE9) lack support. For details about shorthand behavior and pseudo-elements, see the MDN pages on the background shorthand and on ::before/::after for exact behavior and browser support: background (MDN) and ::before (MDN).

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

Do you have a screenshot we can see? It makes things a lot easier when we can see what you are trying to do.

Member Avatar for ko ko

Put both horizontal and vertical value. Perhaps, try this:

ul#nav {
    background: url(img/2/separator.jpg) left center no-repeat;
}

With this above statement, ensure that your ul and li tags have proper height value, especially the same value will looks better.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.