Advanced Search

Results 1 to 5 of 5

Thread: Hover Menu - Problem.

  1. #1
    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 01:07 AM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 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

  3. #3
    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.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Text will also be easier to add the effect.
    Jeremy | jfein.net

  5. #5
    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?

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
  •