By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,195 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

How to change the properties in SOME anchors?

P: n/a
Hi all, newbie here.

Odd sounding subject but I can't describe it any better.

I'm trying to teach myself a little about CSS. In a test site (not
published) I am trying to use CSS to make navigation buttons. I'm
using the tutorial I found at this site as a basis for it.

http://www.mako4css.com/TFonts.htm

In it he adds a subclass to the anchor class and calls it 'nav'. I've
tried using the same tactic but it doesn't work for me. This is a cut
and paste from my external .css file.

a.nav: link{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

a.nav: visited{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

a.nav: hover{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

It's given various properties and called from the HTML using this...

<div class="Navigation"> /* This defines an absolutly positioned box
on the left of the page for a navigation area. */

<div class="navbox" /* this draws a bordered box within the navigation
area for the anchor to fit in and it too works ok */>
<a class="nav" href="page001.htm">page001</a> /* This is the
problem. This anchor gets placed in the navbox OK and says what I
want, but it uses the default properties for links. I can't remove
the underlining or change the colouring as I'd like to define in my
stylesheet. */
</div>

<div class="navbox">Testing, testing</div> /* The colors for this non
anchor text can be set easily */

</div>

I've tried running it through a CSS validator and got this error:

Errors
URI : file://localhost/E:\Thunderin\Style001.css
Line: 64
Parse Error - : link
Line: 69
Parse Error - : visited
Line: 74
Parse Error - : hover

It seems that the properties above aren't recognised. OK, it works on
the tutorial site so what have I done wrong to my version? I CANNOT
see any differences in syntax etc. Can someone please explain why my
a.nav definitions are not seen / valid / correct?

Many thanks.


************************************************** ****************
style001.css
************************************************** ****************

body {
background-color : #ffffff;
background-image: url(bluish.jpg);
background-repeat: repeat-y;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #000099;
margin: 0px;
}

..Navigation {/*The navigation on the left side, positioned
absolutely*/
position: absolute;
top: 100px;
left: 11px;
width: 135px;
height: auto;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000099;
background-color: #ccffff;
line-height : 130%;/*line-height set to 130% in order to*/
} /*have the navigation elements better
separated*/

..Main {/*this is the main content area*/
background: #ffffff;
color: #000099;
margin-left: 160px; /*to position the content area to the right
of the navigation*/
margin-right: 20px; /*breathing space for the text*/
padding: 5px; /*space to separate navigation and content*/
font-family : Verdana, Eyechart, Geneva, Arial, Helvetica,
sans-serif;
width: auto;
text-align: center;
border: 0.1px solid #FFFFFF; /*to insure that NN4.xx renders the
background-color of the content area*/
}

..box01{ /* Footer box */
background: #ffffff;
color: #000099;
font-family: arial, tahoma, verdana, helvicta, sans-serif;
font-size: 12px;
padding: 2px;
margin: 2px;
border-color: #3399ff;
border-style: groove;
border-width: 2px
}

..navbox{/* Navigation boxes */
background: #ff2222;
color: #ffffff;
font-family: arial, tahoma, verdana, helvicta, sans-serif;
font-size: 15px;
text-align: center;
padding: 1px;
margin: 2px;
border-color: #3399ff;
border-style: groove;
border-width: 2px
}

/* These next classes ***should*** provide the properties I want for
the text in the links of the anchors within the navboxes. If you see
what I mean! */

a.nav: link{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

a.nav: visited{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

a.nav: hover{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}

/*
Errors
URI : file://localhost/E:\Thunderin\Style001.css
Line: 64
Parse Error - : link
Line: 69
Parse Error - : visited
Line: 74
Parse Error - : hover
*/



Aug 30 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Mike Barnard <m.****************@thunderin.co.uk> wrote:
a.nav: link{
color: #ff3333;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent
}
[...]

I've tried running it through a CSS validator and got this error:

Errors
URI : file://localhost/E:\Thunderin\Style001.css
Line: 64
Parse Error - : link
[...]

It seems that the properties above aren't recognised. OK, it works on
the tutorial site so what have I done wrong to my version?


You've put whitespace (a tab) between the colon and the name of the
pseudo-class. You need to change the selector from

a.nav: link { ... }

to

a.nav:link { ... }

While you're at it, font sizes in px (or pt) are generally inappropriate on
the WWW. See http://css.nu/faq/ciwas-aFAQ.html#QA02
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Adventure is nothing but a romantic name for trouble." - Louis L'Amour
Aug 30 '05 #2

P: n/a
Mike Barnard wrote:
http://www.mako4css.com/TFonts.htm

In it he adds a subclass to the anchor class and calls it 'nav'. I've
tried using the same tactic but it doesn't work for me. This is a cut
and paste from my external .css file.


Not exactly. You added spaces where there shouldn't be: in between ":"
(colon) and the following word.

:link{ something... } is valid but

: link{ something... } isn't.

Try again this way:

a.nav:link{
blahblah...
}

a.nav:visited{
blahblah...
}

a.nav:hover{
blahblah...
}

Just my 0.02 Euro,

--
==================
Remi Villatel
maxilys_@_tele2.fr
==================
Aug 30 '05 #3

P: n/a
On Tue, 30 Aug 2005 01:20:37 +0100, Mike Barnard
<m.****************@thunderin.co.uk> wrote:
Hi again.

Thanks for the replies. I know I'm new, but I didn't know that
whitespace is forbidden in some places. I was just trying to make my
code more readable by lining stuff up. I'll have to do some more
reading about CSS syntax, methinks! BUT, my test page now works!
Yahoo.

Also, I now know that I shouldn't use font sizes in the way the
'tutorial' describes. Thanks for the pointer.

It'll be a while before I get more research done 'cos of work etc but
I'll be lurking.

Again, thanks.

Aug 30 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.