Log in

View Full Version : Resolved Hover Menu - Problem.


Tye
01-01-2009, 07:46 PM
Hey guys, Im trying to create a hover menu with my new layout, but getting some errors everytime I try something. I'm pretty sure that the CSS is right, but I try to edit the HTML with "<a href="#"><div id="home"></div></a>" or whatever variable besides "home" I need, and it turns out horrid. The images are messed up and everything. Here is both my index code and style.css code...

This is what I want the page to look like: HERE (http://www.animeunloaded.com/augreystyle/index.html)
Except with the hover menu. :-\


<html>
<head>
<title>FinalUnloadedTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (FinalUnloadedTemplate.psd) -->
<table id="Table_01" width="1001" height="1201" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="images/headerbackground.jpg" width="1000" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img src="images/partbackground.jpg" width="37" height="97" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/animeunloaded.jpg" width="233" height="39" alt=""></td>
<td colspan="8">
<img src="images/index_04.jpg" width="730" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/index_05.jpg" width="258" height="47" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/news.jpg" width="421" height="74" alt=""></td>
<td colspan="3" rowspan="5">
<img src="images/partbackground2.jpg" width="51" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_08.jpg" width="233" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_09.jpg" width="3" height="38" alt=""></td>
<td rowspan="2">
<img src="images/home.gif" width="61" height="28" alt=""></td>
<td rowspan="2">
<img src="images/forum.gif" width="74" height="28" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/anime.gif" width="161" height="28" alt=""></td>
<td rowspan="2">
<img src="images/aboutus.gif" width="98" height="28" alt=""></td>
<td rowspan="3">
<img src="images/index_14.jpg" width="94" height="38" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_15.jpg" width="421" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_16.jpg" width="394" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/partbackground3.jpg" width="24" height="949" alt=""></td>
<td colspan="12">
<img src="images/body.jpg" width="956" height="17" alt=""></td>
<td rowspan="5">
<img src="images/partbackground4.jpg" width="20" height="949" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="9" rowspan="2">
<img src="images/body-21.jpg" width="728" height="806" alt=""></td>
<td colspan="2">
<img src="images/chat.gif" width="212" height="32" alt=""></td>
<td rowspan="2">
<img src="images/body-23.jpg" width="16" height="806" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/body-24.jpg" width="212" height="774" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="774" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/footer.jpg" width="956" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/underfooter.jpg" width="956" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="224" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="197" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>


body {
background-image:url(images/bkgr.gif);
background-repeat: repeat-x;
background-color:#333333;
}
a:link {
color:#003366;
text-decoration:none;
}
a:visited {
color:#003366;
text-decoration:none;
}
a:hover {
color:#003399;
text-decoration:none;
}
/* Navigation */
#home {
background-image:url(images/home.gif);
width:61px;
height:28px;
}
#home:hover {
background-image:url(images/home1.gif);
width:61px;
height:28px;
}
#forum {
background-image:url(images/forum.gif);
width:74px;
height:28px;
}
#forum:hover {
background-image:url(images/forum1.gif);
width:74px;
height:28px;
}
#anime {
background-image:url(images/anime.gif);
width:161px;
height:28px;
}
#anime:hover {
background-image:url(images/anime1.gif);
width:161px;
height:28px;
}
#aboutus {
background-image:url(images/aboutus.gif);
width:98px;
height:28px;
}
#aboutus:hover {
background-image:url(images/aboutus1.gif);
width:98px;
height:28px;
}
/* End Navigation */

/*Body Template & Footer Template */
#body {
background-image:url(../AUTheme/images/body.gif);
width:1000px;
}
#footer {
background-image:url(../AUTheme/images/footer.gif);
height:105px;
width:1000px;
}
.footer {
padding: 45px 100px 0px 100px;
}
/* End Body & Footer */

/* Extras */
#news {
border: 1px solid #003366;
padding: 4px;
}
Nile
01-01-2009, 10:22 PM
Don't use images, use normal text for things like this - spiders cannot read images, thus decreasing your rank in search engines.
Tye
01-01-2009, 10:59 PM
I do appreciate the answer, yet I still plan on using images for what I had described. I really want to get this working.
Nile
01-01-2009, 11:01 PM
Text will also be easier to add the effect. :p
Tye
01-01-2009, 11:18 PM
Alright, I have removed the images and replaced it with the gradient. Now, how would you have me add the "text" effect? :p