Having two styles of link in same stylesheet

[Sally Thompson]

I've been working on a website for my brother (yeah, I'm no expert but
I'm free!) and have "borrowed" one of Brucie's samples for the menu,
which is absolutely fine. However, I'm having trouble providing other
links elsewhere which do not have a border. I can change the colour
of the text and, can underline it, no problem, but cannot get rid of
the box effect and just don't know what I'm doing wrong. I have
followed the instructions in the CSS tutorial in
<http://www.pmob.co.uk/faqcss/tutorial1.htm>, trying both the version
setting a class for the style definition for the links, and also using
a separate <div> tag, but whatever I do I still have the box - and
very often completely screw up the original menu as well (I think
depending on where I put the code in my style sheet). I have, by the
way, included {border: none;}. so that the code reads (eg):

a.different:link {
color: #00008B;
background-color: transparent;
text-decoration: underline;
border: none;
border-width: 0; }

Then putting in the body:
<p><a class="different" href="mailto:[email protected]">
(e-mail address removed)</a></p>

I have taken out all these trials for now since none of them worked,
but you can see the test page at
<http://stonybrook.users.btopenworld.com/johntest.html>
and the CSS at
<http://stonybrook.users.btopenworld.com/johntest.css>.
Only one of the links works at present - the one entitled "Degassing
System".

As well as displaying the email address more conventionally, I want to
put some small text links along the bottom of the page, but this is
driving me mad!

 

[spaghetti]

As well as displaying the email address more conventionally, I want to
put some small text links along the bottom of the page, but this is
driving me mad!

Sounds like you're having some troubles understanding how CSS "selectors"
work. Currently you use this selector for the rules to put the border
around the links:

a, a:visited

What you're saying here is "apply this to ALL the <a> elements on the
page, and all the <a> elements that have been visited."

We want it to say "apply this to all the <a> elements that are inside a
specific element." So put an id="menu" or some other unique identifier in
the <div> around your menu links, and then change your rule to something
like this:

#menu a, #menu a:visited

This says "apply this to all <a> elements that are a child of an element
that has an ID of 'menu'."

And that's it. Take a quick look at
<http://www.w3.org/TR/REC-CSS2/selector.html> to get the full story on CSS
selectors, but keep in mind that quite a few of those selector styles
don't work in IE.

 

[Sally Thompson]

Sounds like you're having some troubles understanding how CSS "selectors"
work. Currently you use this selector for the rules to put the border
around the links:

a, a:visited

What you're saying here is "apply this to ALL the <a> elements on the
page, and all the <a> elements that have been visited."

We want it to say "apply this to all the <a> elements that are inside a
specific element." So put an id="menu" or some other unique identifier in
the <div> around your menu links, and then change your rule to something
like this:

#menu a, #menu a:visited

This says "apply this to all <a> elements that are a child of an element
that has an ID of 'menu'."

And that's it. Take a quick look at
<http://www.w3.org/TR/REC-CSS2/selector.html> to get the full story on CSS
selectors, but keep in mind that quite a few of those selector styles
don't work in IE.

Thank you so much for the clear explanation. I'll try this change
later, and you are quite right - I don't fully understand! All my CSS
has been learnt from online tutorials, this and other newsgroups, and
a small amount from the Elizabeth Castro book, but I think I really
need a good reference book as well.

 

[Barry Pearson]

As well as displaying the email address more conventionally, I want
to put some small text links along the bottom of the page, but this
is driving me mad!

[snip]
We want it to say "apply this to all the <a> elements that are inside
a specific element." So put an id="menu" or some other unique
identifier in the <div> around your menu links, and then change your
rule to something like this:

#menu a, #menu a:visited

This says "apply this to all <a> elements that are a child of an
element that has an ID of 'menu'."

[snip]

Descendent (or contextual). But you are right to suggest it for this case,
because it is probably more appropriate than child.

Child would be
#menu > a ....