PDA

View Full Version : Missing Link Hover


Newbieweaver
11-06-2008, 11:51 AM
Hi!
Ok, here is the situation. I am creating a site for a high school. I have no background in HTML or web design, and I am completely lost as to how to fix this. My homepage is perfect. However my other pages (that link to Homepage) have a problem.

When I turn text into a link, the color hover on the CSS panel doesn't exist. ?! If I go to Page Properties, and select the link color as default, THEN hover appears and my link text is blue (which does not match my page at all). If I select the link color (white) then the hover disappears.

Like I said, this is only on a couple pages, and I did copy and paste a table, so I changed the first page I started with, and still nothing.

Here is my code from the beginning to the link. This is keeping hover, and having only default link color (blue). The link name is Athletic Calendar. If anyone can help, I would appreciate it so much!! THANK YOU!




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Athletics</title>
<style type="text/css">
<!--
.TitleSuBPage {color: #FFFFFF;
font-weight: bold;
font-size: 36px;
}
.Headings {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bold;
color: #DBCA6C;
}
.Headings {}
.Headings {}
.Headings {border-top-style: solid;
border-top-color: #F2D377;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.style4 {
}
body {
background-color: #1C0037;
}
a:hover {
text-decoration: underline;
color: #FEED78;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FCC749;
}
a:active {
color: #FEED78;
text-decoration: none;
}
body,td,th {
color: #FFFFFF;
}
.style19 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 42px;
font-weight: bold;
color: #333333;
}
.style21 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #333333;
}
.style31 {color: #333333; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 16px; }
.style35 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
}
.style36 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 0px; margin-top: 0px; font-weight: bold; }
.style38 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 0px; margin-top: 0px; color: #FFFFFF; }
.style39 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: bold;
}
.style40 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 42px; font-weight: bold; color: #000000; }
.style41 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000; }
.style42 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000000; }
.style44 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 16px; }
.style46 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; }
.style48 {font-size: 16; color: #000000; }
.style49 {
font-size: 14;
color: #000000;
}
.style52 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 14; }
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style55 {
}
link {
color: #FEED78;
text-decoration: underline;
}
.hover {
color: #FEED78;
text-decoration: underline;
}
-->
</style>
</head>

<body>
<table width="996" height="145" border="0">
<tr>
<th height="54" scope="row">&nbsp;</th>
<th height="54" scope="row"><div align="left"><span class="TitleSuBPage">St. Joseph Central High School</span></div></th>
<td width="71" align="right" valign="bottom" class="style4">&nbsp;</td>
<td width="235" align="right" valign="middle" abbr=""><table width="202" height="40" border="0" cellpadding="2">
<tr>
<td align="right" valign="middle"><a href="Sport_Calendar.html"><strong>Athletic Calendar</strong></a></td>
</tr>
</table></td>
<td width="67" align="right" valign="middle" class="style55">&nbsp;</td>
</tr>
<tr>

d a v e
11-06-2008, 12:59 PM
you need your links in this order
Link, Visited, Hover, Focus, Active

and it's far easier to put them in all in an external style sheet and then link to that style sheet
see http://www.w3schools.com/css/css_howto.asp

Newbieweaver
11-07-2008, 11:49 AM
Thank you so much! You were absolutely right, creating an external sheet is SO much better!! The only issue I have now is that it changes the links for the entire page. How can I have different sizes for certain links on the same page?

Newbieweaver
11-07-2008, 12:31 PM
Also, on one of my pages, the changes show up in Dreamweaver, but not when I look at it online. What's the deal with that? I thought maybe another code is mixing it up so I attached the code for the entire sheet below. You were so helpful, thanks again!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Athletics</title>
<style type="text/css">
<!--
.TitleSuBPage {color: #FFFFFF;
font-weight: bold;
font-size: 36px;
}
.Headings {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bold;
color: #DBCA6C;
}
.Headings {}
.Headings {}
.Headings {border-top-style: solid;
border-top-color: #F2D377;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.style4 {
}
body {
background-color: #1C0037;
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style19 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 42px;
font-weight: bold;
color: #333333;
}
.style21 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #333333;
}
.style31 {color: #333333; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 16px; }
.style35 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
}
.style36 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 0px; margin-top: 0px; font-weight: bold; }
.style38 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 0px; margin-top: 0px; color: #FFFFFF; }
.style39 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: bold;
}
.style40 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 42px; font-weight: bold; color: #000000; }
.style41 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000; }
.style42 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000000; }
.style44 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 16px; }
.style46 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; }
.style48 {font-size: 16; color: #000000; }
.style49 {
font-size: 14;
color: #000000;
}
.style52 {color: #000000; font-weight: bold; padding-right: 1px; padding-bottom: 1px; padding-top: 1px; padding-left: 1px; font-size: 14; }
a {
font-size: 16px;
}
.style55 {
}
link {
color: #FEED78;
text-decoration: underline;
}
.hover {
color: #FEED78;
text-decoration: underline;
}
.style56 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 0px; margin-top: 0px; font-weight: bold; color: #FFFFFF; }
.style58 {border-top-style: solid; border-top-color: #F2D377; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 60px; font-weight: bold; color: #FEED78; }
-->
</style>
<style type="text/css">
<!--
.style60 {
}

<!--
body,td,th {
color: #FFFFFF;
}
-->
</style>
<link href="LinkStyleSheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="979" height="145" border="0">
<tr>
<th height="54" scope="row">&nbsp;</th>
<th width="588" height="54" scope="row"><div align="left"><span class="TitleSuBPage">St. Joseph Central High School</span></div></th>
<th width="240" align="right" valign="bottom" scope="row"><a href="Sport_Calendar.html">Athletic Calendar</a></th>
<tr>
<th width="137" height="81" bordercolor="#CC9900" scope="row"><div align="center"></div></th>
<th colspan="5" bordercolor="#CC9900" scope="row"><div align="left"><span class="style58">Athletics</span></div></th>
</tr>
</table>
<table width="982" height="315" cellpadding="2">
<tr>
<td width="101" rowspan="3">&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td width="159" height="60" rowspan="3">&nbsp;</td>
<td colspan="2" align="center" valign="bottom" bgcolor="#1C0037" class="style19">&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#F9EAFF" class="style40">WOMEN</td>
<td colspan="2" align="center" valign="bottom" bgcolor="#FEF5B8" class="style40">MEN</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#1C0037" class="style19">&nbsp;</td>
<td colspan="2" align="center" valign="bottom" bgcolor="#1C0037" class="style19">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" align="center" bgcolor="#F9EAFF" class="style41">Winter</td>
<td height="45">&nbsp;</td>
<td colspan="2" align="center" valign="middle" bgcolor="#FEF5B8"><span class="style41">Winter</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="176" bgcolor="#F9EAFF" class="style42">Swimming</td>
<td width="172" align="right" valign="bottom" bgcolor="#F9EAFF" class="style31"><span class="style44">Walt McGovern</span></td>
<td height="27">&nbsp;</td>
<td width="168" align="left" valign="bottom" bgcolor="#FEF5B8" class="style42">Swimming</td>
<td width="166" align="right" valign="bottom" bgcolor="#FEF5B8" class="style46"> Walt McGovern</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Basketball</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style44">Jennifer Lemberg</td>
<td>&nbsp;</td>
<td align="left" valign="bottom" bgcolor="#FEF5B8"><span class="style42">Basketball</span></td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style46">Paul Brindle</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Alpine Skiing</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style31"><span class="style46">John Donovan</span></td>
<td>&nbsp;</td>
<td align="left" valign="bottom" bgcolor="#FEF5B8"><span class="style42">Hockey</span></td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style46">Darrin Lane</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Cheerleading</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style44">Gayle Norton</td>
<td height="26">&nbsp;</td>
<td align="left" valign="bottom" bgcolor="#FEF5B8"><span class="style42">Alpine Skiing</span></td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style46">John Donovan</td>
</tr>
</table>
<table width="981" height="282" border="0" cellpadding="2">
<tr>
<td width="104" height="103">&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td width="174">&nbsp;</td>
<td colspan="2" align="left" valign="top"><p class="style36">Assistant Coaches</p>
<p class="style35">Hockey: Tim Kelley</p>
<p class="style35">Basketball JV: Randy Kinnas</p></td>
</tr>
<tr>
<td height="49">&nbsp;</td>
<td colspan="2" align="center" bgcolor="#F9EAFF" class="style41">Spring</td>
<td>&nbsp;</td>
<td colspan="2" align="center" bgcolor="#FEF5B8" class="style41">Spring</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="160" bgcolor="#F9EAFF" class="style21"><span class="style48">Softball</span></td>
<td width="177" align="right" valign="bottom" bgcolor="#F9EAFF" class="style44">Jessica Bazinet</td>
<td>&nbsp;</td>
<td width="141" bgcolor="#FEF5B8" class="style42">Baseball</td>
<td width="187" align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Chris Barbarotta</td>
</tr>
<tr>
<td height="26">&nbsp;</td>
<td bgcolor="#F9EAFF" class="style21"><span class="style48">Tennis</span></td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style44">Cooperative w/Taconic HS</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style42">Tennis</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Cooperative w/Taconic HS</td>
</tr>
<tr>
<td height="27">&nbsp;</td>
<td bgcolor="#F9EAFF" class="style21"><span class="style48">Track and Field</span></td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style44">Cooperative w/Taconic HS</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style42">Track and Field</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Cooperative w/Taconic HS</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#F9EAFF" class="style21">&nbsp;</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style31">&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style42">Lacrosse</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Scott Aiken</td>
</tr>
</table>
<table width="981" height="382" border="0" cellpadding="2">
<tr>
<td width="104" height="103">&nbsp;</td>
<td colspan="2" align="left" valign="top"><p class="style36">Assistant Coaches</p>
<p class="style35">Softball: Leslie Hogue</p>
<p class="style35">&nbsp;</p></td>
<td width="174">&nbsp;</td>
<td colspan="2" align="left" valign="top"><p class="style36">Assistant Coaches</p>
<p class="style35">Baseball: Dennis Murphy</p>
<p class="style35">&nbsp;</p></td>
</tr>
<tr>
<td height="49">&nbsp;</td>
<td colspan="2" align="center" bgcolor="#F9EAFF" class="style41">Fall</td>
<td>&nbsp;</td>
<td colspan="2" align="center" bgcolor="#FEF5B8" class="style41">Fall</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="160" bgcolor="#F9EAFF" class="style42"><span class="style49">Soccer</span></td>
<td width="177" align="right" valign="bottom" bgcolor="#F9EAFF" class="style52">Fran Marinaro</td>
<td>&nbsp;</td>
<td width="161" bgcolor="#FEF5B8" class="style42">Soccer</td>
<td width="167" align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Leo Pannisco</td>
</tr>
<tr>
<td height="26">&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Cross Country</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style52">Michael Ortega</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style42">Cross Country</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Michael Ortega</td>
</tr>
<tr>
<td height="27">&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Golf</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style52">Fran Brilliant</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style42">Golf</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style44">Fran Brilliant</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#F9EAFF" class="style42">Cheerleading</td>
<td align="right" valign="bottom" bgcolor="#F9EAFF" class="style52">Gayle Norton</td>
<td>&nbsp;</td>
<td bgcolor="#FEF5B8" class="style21">Football</td>
<td align="right" valign="bottom" bgcolor="#FEF5B8" class="style31">Gary Bianchi</td>
</tr>
<tr>
<td height="117" bgcolor="#1C0037">&nbsp;</td>
<td align="left" valign="top" bgcolor="#1C0037" class="style21"><p class="style56">Assistant Coaches</p>
<p class="style38">Soccer: Mickie Turner</p></td>
<td align="right" valign="bottom" bgcolor="#1C0037" class="style31">&nbsp;</td>
<td bgcolor="#1C0037">&nbsp;</td>
<td align="left" valign="top" bgcolor="#1C0037" class="style35"><p class="style39">Assistant Coaches</p>
<p class="style38">Football: Jacki Quinn and Vincent Barbarotta</p>
<p class="style38">&nbsp; </p></td>
<td align="right" valign="bottom" bgcolor="#1C0037">&nbsp;</td>
</tr>
</table>
</body>
</html>

coloeagle
11-07-2008, 04:30 PM
You will need to create another class in your css for the links that you want to be different sizes. Then be sure to add this class to the corresponding links.

Rob_Che
11-07-2008, 08:42 PM
Hey NewbieWeaver... check Ed's guide here:
http://www.dreamweaverclub.com/forum/showthread.php?t=28749

Newbieweaver
11-10-2008, 10:42 PM
Thank you guys so much! I cannot believe how quick the responses are, truly saving my life! I know how to add a class (new rule) to the CSS. I did add one actually, but it didn't do anything... I'm not sure how it can define which rule to follow. What am I doing wrong? I just want the same exact format of my links, but different sizes... 12pt,14pt... My new rule is link 14 at the bottom:



a:link {
color: #FFFFFF;
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:visited {
color: #FCC749;
font-size: 16px;
}

a:hover {
color: #FEED78;
text-decoration: underline;
}

a:active {
color: #FFFFFF;
}

a.hidden {
color: #000000;
}

a.hidden:visited {
color: #000000;
}

a.hidden:hover {
color: #FEED78;
}

a.hidden:active {
color: #000000;
}

a.nav:link {
color: #FFFFFF;
padding: 2px;
font-size: 16px;
}

a.nav:visited {
color: #FCC749;
padding: 2px;
}

a.nav:hover {
color: #FEED78;
background-color: #1C0037;
padding: 2px;
}

a.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
}

a.menu:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
letter-spacing: 1px;
}

a.box {
padding: 3px;
background-color: #FFFFFF;
text-decoration: none;
border: medium solid #CCCCCC;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.box:hover {
color: #FEED78;
padding: 3px;
text-decoration: none;
background-color: #1C0037;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Link14 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #1C0037;
}

coloeagle
11-11-2008, 11:37 AM
Did you declare the class in your link?
<a href="linked page.html" class="link14">