Menu
I am making the menu again using the step by step tutorial at [url]http://www.seoconsultants.com/css/menus/vertical/
I have made a lot so far, but am having few problems.
This is my CSS style file. I cant make the images appear for some reason. Please let me know how i can fix that:
[CODE]@charset “utf-8”;
/* For Menu Testing Only */
body, html{margin:0;padding:0;}
body{height:203px;}
.hand{cursor:pointer;}
.help{cursor:help;}
/* CSS Popout Menu */
#menu a{
display:block;
font:bold 11px/16px arial,helvetica,sans-serif;
text-indent:0px;
width:149px;
height: 29px;
}
#menu a{
background:#edeef6 url(/nav/images/tile-silver-3.gif) repeat-x;
text-decoration:none;
}
#menu a, #menu a:visited{
color:#494c59;
}
#menu a:hover{
color:#000;
background:#e2e2ec url(/nav/images/tile-blue-over-3.gif) repeat-x;
}
#menu li{
list-style-type:none;
}
#menu ul li{
position:relative;
}
#menu li ul{
position:absolute;
top:0;
left:149px;
display:none;
}
/* Fix IE. Hide from IE Mac */
* html #menu ul li{float:left;height:1%;}
* html #menu ul li a{height:1%;}
/* End */
div#menu ul, #menu ul ul, div#menu ul ul ul{
margin:0;
padding:0;
list-style-image:none;
width:149px;
}
div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul{
display:none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul{
display:block;
}
/* Styling for Expand */
#menu a.x, #menu a.x:visited{
font-weight:bold;
text-indent:2px;
color:#494c59;
background:#edeef6 url(/nav/images/tile-silver-3-x.gif) repeat-x;
}
#menu a.x:hover{
color:#000;
background:#edeef6 url(/nav/images/tile-blue-over-3.gif) repeat-x;
}
This is my html file:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″></meta>
<title>SEO Consultants Directory – CSS Mother Menu</title>
<!– You will need these next two external files. –>
<!–[if IE]><style type=”text/css” media=”screen”>@import “csshover.htc”;</style><![endif]–>
<style type=”text/css”>@import url(“menu2.css”);</style>
</head>
<body><div id=”menu”>
<ul>
<li><a href=”http://www.seoconsultants.com/” id=”index” accesskey=”s” class=”x”>Home</a></li>
<li><a href=”http://www.seoconsultants.com/articles/” id=”articles” class=”x”>Our Programs </a>
<ul>
<li><a href=”http://www.seoconsultants.com/articles/1102/seovsppc/”>SEO vs PPC ROI</a></li>
<li><a href=”http://www.seoconsultants.com/articles/1102/library/”>Resource Library</a></li>
<li><a href=”http://www.seoconsultants.com/marketing/industrial/”>Industrial Marketing</a></li>
<li><a href=”http://www.seoconsultants.com/windows/isapi/subdomains/”>Subdomains in IIS</a></li>
<li><a href=”http://www.seoconsultants.com/articles/1102/questions/”>Questions to Ask SEO</a></li>
</ul>
</li>
<li><a href=”http://www.seoconsultants.com/seo-resources/” id=”resources” class=”x”>Resources</a></li>
<li><a href=”https://www.seoconsultants.com/users/” id=”login” class=”x”>Events</a>
<ul>
<li><a href=”https://www.seoconsultants.com/users/unpw.asp”>Password Request</a></li>
<li><a href=”http://www.seoconsultants.com/users/help.asp”><span class=”help”>SEO Profile Help</span></a></li>
<li><a href=”http://www.seoconsultants.com/directory/consultants.asp”>Directory Results</a></li>
</ul>
</li>
<li><a href=”http://www.seoconsultants.com/jobs/” id=”jobs” class=”x”>Testimonials</a></li>
<li><a href=”http://www.seoconsultants.com/users/news/” id=”announce”>About Me </a></li>
<li><a href=”http://www.seoconsultants.com/media/ads/” id=”media” class=”x”>Contact Us </a></li>
</ul>
</div>
</body>
</html>
My template file(INDEX.PHP):
[CODE]
<html>
<head>
<title>My Prana</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<!– You will need these next two external files. –>
<!–[if IE]><style type=”text/css” media=”screen”>body{behavior:url(csshover.htc);}</style><![endif]–>
<style type=”text/css”>@import url(“menu.css”);</style>
</head>
<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”959″ height=”860″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”Table_01″>
<tr>
<td colspan=”5″>
<img src=”images/index_01.jpg” width=”959″ height=”214″ alt=””></td>
</tr>
<tr>
<td colspan=”5″>
<img src=”images/index_02.jpg” width=”959″ height=”26″ alt=””></td>
</tr>
<tr>
<td height=”528″ colspan=”2″ background=”images/index_03.jpg”>
<img src=”images/index_03.jpg” width=”2″ height=”486″ alt=””></td>
<td width=”153″ height=”528″ valign=”top” bgcolor=”54b4e5″>[U]WHERE THE PHP INCLUDE COMMAND WILL BE FOR THE MENU[/U]
</td>
<td width=”803″ height=”528″ valign=”top” bgcolor=”b9d7ee”><pre><div id=”content” name=”content”>content</div></pre></td>
<td width=”1″ height=”528″ background=”images/index_06.jpg”>
<img src=”images/index_06.jpg” width=”1″ height=”486″ alt=””></td>
</tr>
<tr>
<td rowspan=”3″>
<img src=”images/index_07.jpg” width=”1″ height=”91″ alt=””></td>
<td colspan=”4″>
<img src=”images/index_08.jpg” width=”958″ height=”16″ alt=””></td>
</tr>
<tr>
<td height=”74″ colspan=”3″ bgcolor=”75c0ea”> <div align=”center” class=”style2″><span class=”style3″>My Prana, Inc., 5 North Street, Newtonville, MA 02460.<br>
www.my-prana.com; Phone: (617) 939-7626; Fax: (617) 558-9846</span></div></td>
<td rowspan=”2″>
<img src=”images/index_10.jpg” width=”1″ height=”75″ alt=””></td>
</tr>
<tr>
<td colspan=”3″>
<img src=”images/index_11.jpg” width=”957″ height=”1″ alt=””></td>
</tr>
<tr>
<td>
<img src=”images/spacer.gif” width=”1″ height=”1″ alt=””></td>
<td>
<img src=”images/spacer.gif” width=”1″ height=”1″ alt=””></td>
<td>
<img src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td>
<img src=”images/spacer.gif” width=”803″ height=”1″ alt=””></td>
<td>
<img src=”images/spacer.gif” width=”1″ height=”1″ alt=””></td>
</tr>
</table>
<!– End ImageReady Slices –>
</body>
</html>
Can someone please help me out in fixing my css menu. I want a background image, and when I rollover it, it should change. However, when I change the background images nothing happens. Also, I am having issues with css menu in IE. Because of this I am using csshover.htc which I got online. Lastly, when I paste the html above in my template, IE refuses to show the submenus for some reason. Also, I will do a php include command for the css menu. please let me know how to fix these problems. I really appreciate all the help I can get.