Tapan
1
Hello,
I have simple <a href links in a div like this:
<div>
<a href=“somelink1.html”>Link 1</a> |
<a href=“somelink2.html”>Link 2</a> |
<a href=“somelink3.html”>Link 3</a>
</div>
How to make it using <ul> and <li> so that | comes automatically using css ?
Thanks.
Hi, you mean something like this?
#navcontainer
{
margin-left: 30px;
margin-bottom: 1em;
overflow: hidden;
width: 460px;
}
#navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist li
{
border-left: 1px solid #000;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
Tapan
3
Hi,
Perfect! Thanks, after some alteration i got it what i wanted.
Thanks.