CODEWITHSUNDEEP
htmlcss
Kronen
Kronen

Reputation: 466

Adding an horizontal line joining <li>'s in a menu

I have a Menu with an image for the list items, and I want to join those images with an horizontal line.

<ul>
    <li>
        <a href="#" title="Item1"><img src="foo/bar.png"></a>
    </li>
    <li>
        <a href="#" title="Item2"><img src="foo/bar2.png"></a>
    </li>   
</ul>

To explain it better I show 2 images:

I want to convert

this menu

into

this menu with lines

I don't know the css needed to position a 'line.png' like that or to make it in pure css.

Upvotes: 0

Views: 203

Answers (3)

Karthik N
Karthik N

Reputation: 535

Kronen,

Hope this link will helps...

[http://jsfiddle.net/Karthik_Dev/mwjzcnqe/][1]

Make sure the line image will be in size of 1 X 4 in px.

Comments are welcome

Upvotes: 1

Deep
Deep

Reputation: 2512

<div>
  <a href="#" title="Item1"><img src="foo/bar.png"></a>
  <a href="#" title="Item2"><img src="foo/bar.png"></a>
</div>

div {
  height: 20px;
  border-bottom: 4px #ddd;
}

div a {
  display: block;
  float: left; // or display: inline-block and centered on parent div
  margin: 0 10px;
  width: 44px;
  height: 44px;
}

Upvotes: 0

Devin
Devin

Reputation: 7720

There are many ways to achieve this, but using your approach, just try this:

ul{background:url(images/line.png) repeat-x 50%; display:block;}
li{display:inline-block}

where line.png is a line just as in your image

Upvotes: 0

Related Questions