HTML Help

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

I managed to get the a:hover correct I think, but when I put a:visited before it (above) it changes the link color before I've even clicked on the links...

Without a:visited
Code: #navigation {
   position: absolute;
   left: 0;
}
#navigation a:hover {
color: rgb(106,90,205);
}
#content {
text-align: top;
   margin-left: 10em;
}
#content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset;
}

With a:visited
Code: #navigation {
   position: absolute;
   left: 0;
}
#navigation a:visited {
color: rgb(153,50,204);
}
a:hover {
color: rgb(106,90,205);
}
#content {
text-align: top;
   margin-left: 10em;
}
#content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset;
}

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Link codes MUST go in the correct order:

Code: a:link { }
a:visited { }
a:hover { }
a:active { }

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

Isn't this correct then?

With a:visited
Code: #navigation {
position: absolute;
left: 0;
}
#navigation a:visited {color: rgb(153,50,204);}
a:hover {color: rgb(106,90,205);}
#content {
text-align: top;
margin-left: 10em;
}
#content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset;
}

sticks464 · Joined: 31 Dec 2006 Posts: 2629

That is correct assuming you want the 'a' link to be the default of black. The hover rule is not link specific and will apply to all links on the psge.

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

sticks464 wrote: That is correct assuming you want the 'a' link to be the default of black. The hover rule is not link specific and will apply to all links on the psge.

This is the whole CSS file:
Code: h1 {
color: rgb(150,150,150);
text-align: center;
font-family: georgia;
}
h2 {
color: rgb(150,150,150);
text-align: left;
}
h3 {
color: rgb(150,150,150);
text-align: left;
}
h4 {
color: rgb(150,150,150);
text-align: center;
}
body {
background-color: rgb(0,0,0)
}
a {
font-size: 1.25em;
font-family: georgia;
color: rgb(72,61,139);
font-weight: bold;
background-color: transparent;
}
p {
color: rgb(150,150,150);
font-size: 1.25em;
}
#navigation {
   position: absolute;
   left: 0;
}
#navigation a:hover {color: rgb(106,90,205);}
#content {
text-align: top;
   margin-left: 10em;
}
#content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset;
}

The links are coloured in the a { section above and the hover colour works.

I changed to this:
Code: h1 {
color: rgb(150,150,150);
text-align: center;
font-family: georgia;
}
h2 {
color: rgb(150,150,150);
text-align: left;
}
h3 {
color: rgb(150,150,150);
text-align: left;
}
h4 {
color: rgb(150,150,150);
text-align: center;
}
body {
background-color: rgb(0,0,0)
}
a {
font-size: 1.25em;
font-family: georgia;
font-weight: bold;
background-color: transparent;
}
p {
color: rgb(150,150,150);
font-size: 1.25em;
}
#navigation {
   position: absolute;
   left: 0;
}
#navigation a:link {color: rgb(72,61,139);}
a:visited {color: rgb(153,50,204);}
a:hover {color: rgb(106,90,205);}
#content {
text-align: top;
   margin-left: 10em;
}
#content img.thumbs {
width: 100px;
height: 100px;
border: 2px inset;
}

But the links change to the visited colour with no hover?

sticks464 · Joined: 31 Dec 2006 Posts: 2629

That will work.
A few errors you may want to correct;
There is no attribute 'top' for text-align.

By default all elements are left aligned and a style attribute does not have to be used unless alignment is changed.

Since all static text has a color applied (color: rgb(150,150,150);) it can be deleted from each individual element and used only once in the body rule. All elements will inherit text-color from the body.
Code: h1 {
text-align: center;
font-family: georgia;
}
h2 {
text-align: left;
}
h3 {
text-align: left;
}
h4 {
text-align: center;
}
body {
background-color: rgb(0,0,0)
color: rgb(150,150,150);
}
p {
font-size: 1.25em;
}

Cheese · Joined: 24 Oct 2009 Posts: 11 Location: Sydney, Australia

The link visited colour isn't working with the 2nd lot of code I posted above...? :(

Also, when I took the colour out of each element and left it only in the body, it changed all the colours around.

I think I can see why, here's one of the pages:

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>About Us</title>
</head>
<link rel="stylesheet" type="text/css" href="wss.css" />
<h1 style="color: rgb(72,61,139)" style="font-family: georgia, arial, verdana, tahoma">ABOUT US</h1>
<body>
<div id="navigation">
<table>
<tr>
   <td><a href="index.html">Home</a></td>
</tr>
<tr>
   <td><a href="aboutus.html">About us</a></td>
</tr>
<tr>
   <td><a href="teachers.html">Teachers</a></td>
</tr>
<tr>
   <td><a href="enrolment.html">Enrolment</a></td>
</tr>
<tr>
   <td><a href="timetable.html">Timetable</a></td>
</tr>
<tr>
   <td><a href="uniforms.html">Uniforms</a></td>
</tr>
<tr>
   <td><a href="studiohire.html">Studio Hire</a></td>
</tr>
<tr>
   <td><a href="shop.html">Shop</a></td>
</tr
<tr>
   <td><a href="gallery.html">Gallery</a></td>
</tr>
<tr>
   <td><a href="contactus.html">Contact us</a></td>
</tr>
<tr>
   <td><a href="location.html">Location</a></td>
</tr>
<tr>
   <td><a href="newsletters.html">Newsletters</a></td>
</tr>
</table>
</div>
<div id="content">
<p>Wilhelmi Stage School first opened in Bondi in 1970 and relocated to Ashfield in the late 1980's.<br /><br />
We are a small dance studio that focuses on nurturing and encouraging your child's love of dance
through a fun and buoyant environment.<br /><br />Many of our students have furthered their own careers and are
now working in the entertainment industry.</p>
<h2>At Wilhelmi Stage School we specialize in the following areas:</h2>
<h2 style="background-color: rgb(25,12,56)">Classical Ballet</h2><p>Classical Ballet is based on the rules and vocabulary recognised around the 1700’s in France. It develops good posture and forms the foundation of basic dance technique.<br /></p>
<h2 style="background-color: rgb(25,12,56)">Jazz</h2><p>Lively and Energetic. Jazz teaches coordination, strength, and flexibility while maintaining a healthy level of fitness and fun.<br /></p>
<h2 style="background-color: rgb(25,12,56)">Tap</h2><p>A stage dance in which rhythmic patterns are sounded by the toes and heels (to which metal plates or ‘taps’ are fitted) striking the floor. It developed in the 19th century from such dances as the jig and clog dance. A related dance is the ‘soft shoe’, performed without taps on the shoes.</p>
<h2 style="background-color: rgb(25,12,56)">Tiny Tots</h2><p>A fun class that introduces young children from the age of 3 to basic dance technique.<br /></p>
<h2 style="background-color: rgb(25,12,56)">Acrobatics</h2><p>The specialized art of jumping, tumbling, and balancing, requiring agility and skilful control of the body.</p>
<h2 style="background-color: rgb(25,12,56)">Modern</h2><p>A style of theatrical dance that rejects the limitations of classical ballet and favors movement derived from the expression of inner feeling.</p>
</body>
</html>
I need to take a lot of the inline CSS out, right?

still unable to get a:visited working either :x

sticks464 · Joined: 31 Dec 2006 Posts: 2629

A visited link color hardly ever works in anything but IE.
Inline styles over ride embedded and external stylesheets. Embedded styles over ride external style sheets. It is best to use only external stylesheets.

leahmarie · Joined: 04 Aug 2009 Posts: 60

in my opinion, if you doing hovers, you can optionally remove the a:active and a: visited attributes. Because your only wanting to see hovers right?. That's what I've been doing in my works