CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: Hover Menu - Problem.

  1. 01-01-2009, 07:46 PM #1
    Tye
    Tye is offline Junior Coders
    Join Date
    Dec 2008
    Location
    Chicago, IL
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Hover Menu - Problem.

    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
    Except with the hover menu. :-\

    Code:
    <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>
    Code:
    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;
}
    Last edited by Tye; 01-02-2009 at 02:07 AM.
    Reply With Quote Reply With Quote
  2. 01-01-2009, 10:22 PM #2
    Nile's Avatar
    Nile
    Nile is offline Elite Coders
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Don't use images, use normal text for things like this - spiders cannot read images, thus decreasing your rank in search engines.
    Jeremy | jfein.net
    Reply With Quote Reply With Quote
  3. 01-01-2009, 10:59 PM #3
    Tye
    Tye is offline Junior Coders
    Join Date
    Dec 2008
    Location
    Chicago, IL
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I do appreciate the answer, yet I still plan on using images for what I had described. I really want to get this working.
    Reply With Quote Reply With Quote
  4. 01-01-2009, 11:01 PM #4
    Nile's Avatar
    Nile
    Nile is offline Elite Coders
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Text will also be easier to add the effect.
    Jeremy | jfein.net
    Reply With Quote Reply With Quote
  5. 01-01-2009, 11:18 PM #5
    Tye
    Tye is offline Junior Coders
    Join Date
    Dec 2008
    Location
    Chicago, IL
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Alright, I have removed the images and replaced it with the gradient. Now, how would you have me add the "text" effect?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules