 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Cheese
Joined: 24 Oct 2009
Posts: 11
Location: Sydney, Australia
|
 Posted: Mon Oct 26, 2009 3:04 am Code to put in external CSS file re a:visited |
 |
|
|
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: 4883
Location: MS
|
| Posted: Mon Oct 26, 2009 3:11 am |
|
|
|
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
|
| Posted: Mon Oct 26, 2009 3:19 am |
|
|
|
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: 2906
|
| Posted: Mon Oct 26, 2009 3:32 am |
|
|
|
| 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
|
| Posted: Mon Oct 26, 2009 3:59 am |
|
|
|
| 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: 2906
|
| Posted: Mon Oct 26, 2009 4:18 am |
|
|
|
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
|
| Posted: Mon Oct 26, 2009 4:53 am |
|
|
|
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  |
|
sticks464
Joined: 31 Dec 2006
Posts: 2906
|
| Posted: Mon Oct 26, 2009 1:03 pm |
|
|
|
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: 76
|
| Posted: Sun Nov 08, 2009 11:59 pm |
|
|
|
| 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 |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
