Css Navigation

[turkey]

Hello,

I am trying to build my first css controlled site . Anyways I am fairly new to this new to the building format (divs ect) but i understand what css does. Anyways i have a navigation menu with pipes. How do i get rid of the very first one to the left of the 'home' link?

here is the site

The border is set to the left which is causing it but i dont know how to specify it not to show up on the first link.

Here is my CSS for that menu (it could probably be compressed a bit but im just doing it the way i know how):

.navigation {
background-image: url(images/menupattern.gif);
background-repeat: repeat-x;
height: 23px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-top: 0px;
padding-top: 6px;
text-align: center;
padding-left: 150px;
overflow: hidden;
}

#navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist li
{
float: left;
line-height: 1em;
border-left: 1px solid #fff;
margin-left: -0.5em;
padding-right: 0.5em;
padding-left: 0.5em;
margin-right: 0.5em;
}

#navlist li a:link {
color: #ffffff;
}

#navlist li a:hover{
color: #B7C6A8;
}

Thanks for your help!

[markbrown4]

Hello,

I would just give the first li element a class="first" and then remove the border from the element with that class.
Also, you don't need both 'active' and 'current' id's - one is enough to style.

[turkey]

i think im confused (or maybe its just really late) because the code navlist li is applying the code to the entire div so how could i seperate that one block? could you provide a quick example? i would greatly appretiate it.

[markbrown4]

Sure,

<ul id="#navlist">
  <li class="first">No Border</li>
  <li>Border</li>
</ul>

#navlist li {
border-left: 1px solid #fff;
}
#navlist li.first {
 border-left: none;
}

Because the second selector is more specific - it will override the less specific styles.

Hope it helps

[turkey]

oooooooooh! ok now that makes sense. I almost had it . Thank you very much for your help, it worked great!