Forum Moderators: not2easy
New to CSS and i am trying to figuring out a couple of a:hover issues. Please see my coding below.
1. This first question I have is regarding my "Promotional Material" text. This I want as a header like the rest, same font and colour but with no hover as this will have no "a href". How to I make it the same font and color?
2. The second question I have is the 3 catergories underneath Promotional Material which are: Poster, Newsletter Article and Animated will have a hovers and are working but I want them to be a smaller font with a bullet and indented somehow to show they are a subcategory to the Promotional Material header.
How do i indent these 3 categories and use a different font and colour, with keeping the hovers working?
Many thanks to anyone that can help!
Here is my coding:
<STYLE TYPE="text/css">
a:link {
COLOR: #0062A0;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a:visited {
COLOR: #0062A0;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a:active {
COLOR: #D36D29;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a:hover {
COLOR: #D36D29;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a.left:link {
COLOR: #663300;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a.left:visited {
COLOR: #663300;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a.left:active {
COLOR: #D36D29;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a.left:hover {
COLOR: #D36D29;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td width="30%" bgcolor="#FFFFFF"><table width="200" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="1" rowspan="7" bgcolor="#FFFFFF"></td>
<td width="200"><br><a href="stepscontest_home" class="left">Contest Rules</a></td>
</tr>
<tr>
<td width="100%">Promotional Material</td>
</tr>
<tr>
<td width="100%"><a href="ERI" class="left">Poster</a></td>
</tr>
<tr>
<td width="100%"><a href="ERI" class="left">Newsletter Article </a></td>
</tr>
<tr>
<td width="100%"><a href="ERI" class="left">Animated Flash </a></td>
</tr>
<tr>
<td width="100%"><a href="capgov_eri" class="left">Waiver of Participation Form </a></td>
</tr>
<tr>
<td width="100%"><a href="steps_whatissteps" class="left">About Steps</a></td>
</tr>
</table></td>
</tr>
</table>
a:hover MUST come after a:link and a:visited in order to be effective!
a:active MUST come after a:hover in order to be effective!
The "mnemonic" many of us first learned to remember this was LoVe HAte (LVHA). Not using the required order may not be causing you trouble now, but it will - and you will go crazy trying to debug why the colors of your links are going haywire. When they do, remember "LoVe HAte".
I also recommend using shorthand for elements that use the same exact style (just separate them with a comma like below}:
a:link, a:visited {
COLOR: #0062A0;
FONT: 10pt Verdana;
TEXT-DECORATION: none;
font-weight: bold;
}
a:hover, a:active {
COLOR: #D36D29;
FONT: 10pt Verdana;
TEXT-DECORATION: underline;
font-weight: bold;
}
Now, What you are looking to do can be (and should be) done using "semantic" markup.
This means put your text within proper text containers: headers (h1 - h6), paragraphs, and lists (ul - unordered list, ol - ordered list and dl - definition list).
Break the habit of slapping naked text into a table cell or, just as bad, a div.
Aside from making search engine bots and screen readers happy, it makes styling for exactly what you are asking so much easier AND it makes finding code to fix a snap:
I am not an advocate of using tables for layout and showing you how clean semantic markup is without a table, I offer the following example (you can always drop the <div class="container"> and its contents right into a table's td cell if you simply cannot live without using tables, but you don't need to, and shouldn't. and should see the advantage immediately)
So here is the whole thing. What you are trying to accomplish (the 3 stages) is by simply using an unordered list nested within an ordered list. Lists are awesome stuff in css and support most of the heavy load for navigation and creative layout. Play around with the margins, paddings, font-size, etc. Just keep the embedding intact. There is a must bookmark for all css beginners call "Listomatic". It is a great site that shows how amazing lists can be - and all the other cool stuff like floats and selects at "css max design com au/listamatic/" Google listomatic and go to the maxdesign result.
Copy and past the following into notepad or any text editor and save it as an html file to see how it works.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>semantic layout and lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {font: small Verdana; margin: 0; padding:0; width: 100%}
.container {width:40%; font-size: .9em; margin-left:2%; padding:.5em ; background: #FFFFFF}
h3 {font-size:14px; margin:1em 0}
ul {margin: .5em 0 .5em .5em; padding:.5em 0 .5em .5em}
ol {margin: .5em 0 .5em .8em; padding:.5em 0 .5em .8em}
ol li {list-style-type: decimal; margin:0; padding:0}
ul li {list-style-type: square; margin:.5em 0 .5em .8em; padding: 0 0 0 .5em; font-size: 10px;}
a:link, a:visited {
color: #0062A0;
text-decoration: underline;
font-weight: bold;
}
a:hover, a:active {
color: #D36D29;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h3><a href="stepscontest_home">Contest Rules</a></h3>
<ol>
<li>Promotional Material
<ul>
<li><a href="ERI">Poster</a></li>
<li><a href="ERI">Newsletter Article </a></li>
<li><a href="ERI">Animated Flash </a></li>
<li><a href="capgov_eri">Waiver of Participation Form </a></li>
<li><a href="steps_whatissteps">About Steps</a></li>
</ul>
</li>
</ol>
</div>
</body>
</html>
Good luck
