Link menu with right border

[xe2]

Hi all, first post here, this is a great community!

I have little annoying problem I can’t get rid of. (I’m extremely new to css)

I have a link menu and each link has a right border of 1px with some padding so the border doesn’t touch the link.
it is a right border so the link on the right has a border on both sides (because the link to the left of it has a right border). I am trying to get the border from the last link to go away
so that the ‘dividers’ are only inside the links, not on the outside.

How do I make it so only 1 of those links doesn’t have a border? I got rid of the <li> tag and that did the trick, except my html doesn’t validate like that.

Thank you so much for the help, It will be great to browse around here, I found this site a few days ago and love it.

[noahgelman]

Create a class with no border, and attach it to the last list item.

Code:

.last { border: none;}

[xe2]

This seems so simple, I just can’t get it to work. Here is the html for the list

<div id="toplinks">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact Us</a> </li>
</ul>
</div>

How do I attach it? I’ve tried doing it like all the other font styles and it doesn’t work.

I can attach a style to everything else on my layout, just not 1 link, in that list. I’ve managed to do absolutely everything I wanted with css for my layout except this, which is funny because it’s so simple. I’ve googled it, searched forums, etc, and still can’t find how to do it.

edit2:— here is the layout. I haven’t cleaned up the html or css so please don’t laugh too much. Still working on it, will make everything nice and neat once I’m done =)

[noahgelman]

Create a class in your stylesheet like I showed you in my previous post and adjust the Contact Us list-item like the following:

Code:

[xe2]

Thank you again for your reply,

I made the changes and it does not change anything – — check out the source code. here is what i have inside the css file

Code:

.last { border: none;}

what am I missing?

Nothing changes the style of that link. I’ve tried setting up a different background color / font size to that class and it does nothing

[noahgelman]

No, you didn’t do anything wrong in particular. Browsers read the style sheet from top to bottom. You put the .first class in your style sheet. So it applies the border:none to the list item. And then it reads your #toplinks li after which then gives it a border. Place the .first class after the #toplinks li in your style sheet and that should sort everything out.

[xe2]

It still doesn’t apply the class. I tried doing it before and after every toplink class ( ul, li, a, a:hover…) :|

edit2: Ah, I think I know. The styling for those links are all ID’s , and the .last is a class =)

edit3: Nope, changed all the styling to classes and the .last to #last . I also tried putting the #last before and after each of the toplink classes, with no changes.

[noahgelman]

Well you probably have to be more specific. You have #toplinks li styles right? Well change your .last to #toplinks li.last in your stylesheet

[xe2]

I’m sorry for not being more specific, I always try to be but being a complete n00b at this I really didn’t know what else to say. Changing it to li.last worked perfectly, thank you so much, you’ve been awesome help.

Thanks again!

[noahgelman]

You did just fine, no worries
:D

[Author]

Posts