css problem with ul.menu li."class"

[acwder]

Hey, Im trying to create a class for my ul.menu li for a menu Im using.

it looks like this: (its the ul.menu li.first)

css:


ul.menu {
list-style-type:none;
width:798px;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li.first {
display:block;
float:left;
margin:0;
padding:0;
border-right:1;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}


/*GREEN*/
ul.menu.green{
background-color:#629600;
}
ul.menu.green li a:hover, .menu.green li.current {
background-color:#7AB900;
}



and on the header.php Im having this:



<center><ul class='menu green'>
<li><a href='http://www.link.com'>link1</a></li>
<li><a href='http://www.link.com'>link2</a></li>
<li><a href='http://www.link.com'>link3</a></li>
<li class='first'><a href='http://www.link.com'>link4</a></li>
<li><a href='http://www.link.com'>link5</a></li>
<li class='first'><a href='http://www.link.com'>link6</a></li><li><a href='http://www.link.com'>link</a></li>

</ul></center>

And what I want to achieve is to create a divider between link 4-5 and 5-6. At first I was using <p>|</p> but didnt like the outcome really.

Any help would be great.

Cheers

(edit: forgot the code function)
(edit: and ofc that two section is not the entire code but just the only thing concerning the menu)
(edit: bah maybe I shouldnt be in such a hurry..the current outcome is that the border isnt showing on the li class)

[phpsales]

Fast Solution:

Add the following under your current CSS:


.dv{
font-size:20px;
}


Add the following after the A element in your LI:


<span class="dv">|</span>

E.g.


<li class='first'><a href='http://www.link.com'>link4</a><span class="dv">|</span></li>


Live Example: http://phpscriptindex.com/dynamicdrive_help/ulmenu.html
Tested in IE 7 and Firefox

[acwder]

thanks I'll do that:)

[Medyman]

Tested in IE 7 and Firefox

A little heads up. It doesn't work in Opera but does work in IE6 and Safari as well.

I would probably use borders instead of the vertical bar. It's a bit cleaner.

[acwder]

here is the outcome btw, http://www.orkfia-portal.com, still got some work to redo the colors, green + orange = not so good:)

Thanks for the help again.

[acwder]

Im really a newbie on css so kinda limited to know whats possible and such

[phpsales]

Example for border:

Add to bottom of CSS:


#dv{
border-right:1px solid black;
}

Add dv class to LI Element:

E.g.


<li class='first' id='dv'><a href='http://www.link.com'>link4</a></li>

View live here: http://www.phpscriptindex.com/dynamicdrive_help/ulmenu2.html

[Medyman]

Example for border:

Add to bottom of CSS:


#dv{
border-right:1px solid black;
}

Add dv class to LI Element:

E.g.


<li class='first' id='dv'><a href='http://www.link.com'>link4</a></li>

View live here: http://www.phpscriptindex.com/dynamicdrive_help/ulmenu2.html

Much better than the vertical bar you suggested before.

[acwder]

yeah Im using that one now instead thx:) replace "black" with "green" tho, hmm oh well thanks again