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
*/
