remove right border at end of navigation

I tried first using just the css stylesheet but added the embedded style too after it did not work.

well I am learning css and frontpage gives me a layout that I just find too hard to do with css, ie the positioning and the percentages, ems, pixels, floats etc. I can only learn so much at a time when I have mastered css layouts I will use them. Saying wrong is not very helpful.

True, though. And actually very helpful despite what you think. You are really just shooting the messenger.

And by doing that you are just storing up trouble for yourself and eventually you'll have to forget all you "learn" this way and start from scratch.

CSS is built on the foundation of valid and semantic html. Unless you can write valid and semantic html you'll never get anywhere with CSS. I'm sorry, but there is no shortcut to mastery of this topic. You have to start at the beginning and learn the right approach right from the start or you'll be wasting your time.

You'll save yourself much time and trouble by forgetting all you think you know now about web design and going to the HTML dog tutorials and working through them from the begining.

Throw out frontpage and get yourself a good text editor and learn to write for the web the right way.

Or not - it's your life. But the approach you are taking will just waste hours and hours of that valuable life for no real purpose.

RIGHT! now both of you, having got those points out of the way, get back into this thread and explain to the OP why what he is trying to do isn't probably going to work the way that they are going about things. Lets also help the poster with the original question, and this isn't a flipping request :mad: !!

Remember this is a tyros forum section.

thanks for that Hugo, but I still do not have the answer, is this forum for beginners or not as I may need to use another forum. Everyone is so keen on telling me what is right, when I am just learning. I need to get this website done quick for a charity. So I cannot do it with css layouts, it is taking me ages to learn CSS coding itself.

1. contacts
2. referrals
3. about
4. benefits
5. your say
6. site map

shouldn't you actually be adding the ID on the last lit-item? as in:

1. contacts
2. referrals
3. about
4. benefits
5. your say
6. site map

yes, but as it is right aligned, the last becomes the first. This forum just picks holes in peoples comments.

No we don't just pick holes in peoples comments, TPH is trying to help.

In your first post you show CSS rules that describe a class called 'last' yet the markup shows an ID so you ought to look at that. Place the rule last after the other border rules As for left becoming right I don't see where you have floated the li elements to the right :? there are properties setting li elements inline and your parent ul is floated left, perhaps I missed the rules however that shouldn't be an issue.

Edit/ I see you've floated the anchors; not sure why you have floated the anchors and changed the li elements to display:inline, leave the li as normal and set the anchors to display:block.

I realise I had some errors in my work which I have fixed, yet, despite the errors I am still having problems with the nav links. As I have two sets. One horizontal and one vertical. The vertical links do not lay one after the other but jumbled up, and I cannot seem to remove the margin, I believe that I need to add some code to remove the default margin for lists but as yet I cannot remember it or find it. I enclose a screen shot. And the codes

css

ol { list-style-type:none; } li { display:inline; text-size: .63em; list-style-type: none; }

#navlinks {
padding-top: 0.3em;
padding-bottom: 0.3em;
border-right: 0;
text-align: left;
margin: 0;
width: 20%;
display: block; }

.first { border-right: 0; }

a {
text-decoration:none;
padding:0.3em 0.6em;
color:#FFFFFF;
background-color:#6600CC;
border-right: 1px solid;
font-weight: bold; }

a:hover {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px solid; }

a:active {
color:#FFFFFF;
background-color:#E60073;
border-right: 1px solid; }

maybe someone can let me know what the code is to remove default margin for lists, and should I add more padding?

I have fixed everything except one small problem now with the header showing the links color at one side of the margin.

Here is the code I just need to find a way of removing the hyperlink coding for the header.
CSS

body { font-family: Verdana, sans-serif;
font-size: 0.75em;
color: #000000;
text-decoration: none;
background-color: #E60073;
text-align: center; }

header#img {
border : 0;
width : 750px;
height : 110px; }

.centred { margin: 0 auto; }

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

li { display:inline;
text-size: .63em;
list-style-type: none; }

.first { border-right: 0; }

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

#navigation li {
margin-bottom: 2px; }

#navigation a {
background: #6600CC;
color: #fff;
display: block;
width: 120px;
border-left: 1px solid;
padding-left: 10px; }

#navigation a:hover {
background: #E60073;
color: fff;
text-decoration: none;
border-left: 1px solid; }

a {
text-decoration:none;
padding-right: 8px;
padding-left: 8px;
color:#fff;
background: #6600CC;
border: 1px solid; }

a:hover {
color:#fff;
background-color:#E60073;
border: 1px solid; }

a:active {
color:#fff;
background-color:#E60073;
border: 1px solid; }

and the HTML








To set different styling you use one of two techniques: you either set a class on one of the elements or you use descendent styling selectors which apply styles based on a parent ID or class name i.e:

a {color:black;}

#nav a {color:red;}

Quartzy would you please have a read of the posting guidelines for instruction on how to format code for posting.

Yes I did read the messages but was not sure what to insert for what I needed to show. Also I will in future enclose my code in code tags, if thats what you need. I realise I need to add a class or selector but I am not sure on where to add it, to the a and hover css or the image css. I suppose I could enclose the image in a div and then add a selector. Would this be the best way? Appreciate your help

Are you wanting to style the two sets of links differently?

If so try and use what's already there, eg:



1. contacts
2. referrals
3. about
4. benefits
5. your say
6. site map

the second set of links (the horizontal one) isn;t wrapped in anything useful but the first set are. For that reason, you'd use:

ol { color: pink; }

etc for the second list (on the right), then use the ID of the first links to overwrite it, eg:

#navigation ol { color: blue; }

Quartzy The above is an example of what I have already mentioned by way of descendent styling, check posts carefully if you don't understand the responses just ask.

You do not have to add a class or ID that is one of the choices, but preference should always go to descendent styling selectors i.e look for a unique identifier that already exists and that is grouping the styles that you wish to modify, then apply your rulesets such that the selectors read 'if an anchor has a parent or ancestor called ... then apply these rules' as demonstrated in my post and TPH's.

merry christmas to you. I have done it now, I added the other navigation in its own div, and so bypassed the list and ol option. Thanks for your help if you want me to put the code of what I done just let me know. It looks a lot of css but it works