- This topic is empty.
-
AuthorPosts
-
April 13, 2010 at 11:04 pm #28716
xe2
MemberHi 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.
April 13, 2010 at 11:24 pm #74070noahgelman
ParticipantCreate a class with no border, and attach it to the last list item.
Code:.last { border: none;}April 13, 2010 at 11:58 pm #74072xe2
MemberThis 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 =)
April 14, 2010 at 12:29 am #74073noahgelman
ParticipantCreate a class in your stylesheet like I showed you in my previous post and adjust the Contact Us list-item like the following:
Code:April 14, 2010 at 12:41 am #74075xe2
MemberThank 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
April 14, 2010 at 2:23 am #74078noahgelman
ParticipantNo, 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.
April 14, 2010 at 9:17 am #74113xe2
MemberIt 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.
April 14, 2010 at 2:52 pm #74117noahgelman
ParticipantWell you probably have to be more specific. You have #toplinks li styles right? Well change your .last to #toplinks li.last in your stylesheet
April 14, 2010 at 7:31 pm #74157xe2
MemberI’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!
April 14, 2010 at 8:26 pm #74158noahgelman
ParticipantYou did just fine, no worries
:D -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.