tushar707
05-17-2007, 05:23 AM
I am making the menu again using the step by step tutorial at 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:
@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:
<!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):
<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">WHERE THE PHP INCLUDE COMMAND WILL BE FOR THE MENU
</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.
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:
@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:
<!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):
<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">WHERE THE PHP INCLUDE COMMAND WILL BE FOR THE MENU
</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.