Jump to content

Positioning query in menu


SmokingMan
 Share

Recommended Posts

I'm working through a W3C example of a drop down menu, and I have a question on the positioning of the hidden (or drop down) menu. The style uses absolute positioning, and when displayed, offsets to the right from the parent menu. I've tried relative positioning and using margin-left with negative numbers along with the absolute positioning, and still can't get the sub menu to move to the left. The menu works as is, but I would like to know how to adjust the positioning of the hidden drop down in case the page would require it.Here's the code I'm playing with:

<style>body	{	font-family:arial;	}table	{	font-size:80%;	background:black;	width: 75%;	margin-left: 12.5%;	}td.menu	{	background:lightblue;	width: 150px;	}table.menu	{ 	 font-size:90%;	width: 150px; 	 position:absolute;  visibility:hidden;	}a	{	color:black;	text-decoration:none;	font:bold;	}a:hover	{	color:#606060;	}</style><script type="text/javascript">function showmenu(elmnt)	{	document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt)	{	document.getElementById(elmnt).style.visibility="hidden"}</script></head><body><h3>Drop down menu</h3><table> <tr bgcolor="#FF8080">  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">   <a href="/default.asp">Tutorials</a><br />   <table class="menu" id="tutorials">   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>   <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>   </table>  </td>  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">   <a href="/default.asp">Scripting</a><br />   <table class="menu" id="scripting">   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>   <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>   </table>  </td>  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">   <a href="/site/site_validate.asp">Validation</a><br />   <table class="menu" id="validation">   <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>   <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>   <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>   </table>  </td> </tr></table></body></html>

Any suggestions?I should clarify, displays different in IE than in FF (what a surprise)!

Edited by SmokingMan
Link to comment
Share on other sites

how about this?

<style>body {font-family:arial;}table {font-size:80%;background:black;width: 75%;margin-left: 0%;}td.menu {background:lightblue;width: 150px;}table.menu {  font-size:90%;  width: 150px;  position:absolute; visibility:hidden;}a {color:black;text-decoration:none;font:bold;}a:hover {color:#606060;}</style><script type="text/javascript">function showmenu(elmnt) {document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt) {document.getElementById(elmnt).style.visibility="hidden"}</script></head><body><h3>Drop down menu</h3><table style="position:relative;left:107px;"><tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">  <a href="/default.asp">Tutorials</a><br />  <table class="menu" id="tutorials">  <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>  <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>  <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>  <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>  <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>  </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">  <a href="/default.asp">Scripting</a><br />  <table class="menu" id="scripting">  <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>  <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>  <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>  <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>  <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>  </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">  <a href="/site/site_validate.asp">Validation</a><br />  <table class="menu" id="validation">  <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>  <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>  <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>  </table> </td></tr></table></body></html>

Link to comment
Share on other sites

Okay, I have the menu working really nice in FF & Opera, but...well...then there's IE. The sub menus don't display in the right place, they're offset too far to the right, and the images I use for backgrounds in the sub menu take time to display, if they do at all. Sometimes they don't and all you get is the black background. Other than requiring everyone visiting my site to use anything but IE, how do I fix this?Here's the link to the page, and here's the link to the CSS for the menu bar. :)

Link to comment
Share on other sites

What changes have you made to the menu? it was working ok in IE yesterday :) I didn't find any probs with the pics, they took about the same amount of time to load in both browsers, after that they worked ok.

Link to comment
Share on other sites

The only difference is that I am now using a PHP "require" to insert the menu. I plan on using this same menu across all pages of the site and wanted to use PHP to insert it in each page. That way I only have one file to modify instead of several when a change needs to be made. I may just have to go ahead and hard code it into each page and then modify every page when I need to change something :)

Link to comment
Share on other sites

Yeah that makes sense but I don't think using php would have changed the output.Have you maybe changed something when adding the images to the menu?Use the code that i posted yesterday as a test, include that in your pages with php and see what happens...If it works correctly then there's a problem with the new menuIf it doesn't there's a problem with php

Link to comment
Share on other sites

Okay, I changed all of the CSS back to the way it was without the images, and now it works fine...kinda. In IE the bar's cell sizes are unequal on the top level but in FF they're fine. Also, when you go to the only live link that is in the menu so far, the <br />'s and sub menu don't show up. I think that has something to do with PHP though. But I don't know PHP so I'll need someone to help me with that. Does the file being included with PHP need to be in the same directory? But then why would part of the formatting work and not all of it?

Link to comment
Share on other sites

Yes, save them both in the same folder or you will have to specify the path.Ok here's one i just made. It works fine when included on the page. Save them both into the same folder and have a look.menu.php

<?php ini_set ('display_errors', 1);error_reporting (E_ALL & ~E_NOTICE);	print '<html><head><style>body {font-family:arial;}table {font-size:80%;background:black;width: 75%;margin-left: 0%;}td.menu {background:lightblue;width: 150px;}table.menu {font-size:90%;width: 150px;position:absolute;visibility:hidden;}a {color:black;text-decoration:none;font:bold;}a:hover {color:#606060;}</style><script type="text/javascript">function showmenu(elmnt) {document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt) {document.getElementById(elmnt).style.visibility="hidden"}</script></head><body><h3>Drop down menu</h3><table style="position:relative;left:107px;"><tr bgcolor="#FF8080"><td onmouseover="showmenu(\'tutorials\')" onmouseout="hidemenu(\'tutorials\')"><a href="/default.asp">Tutorials</a><br /><table class="menu" id="tutorials"><tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr><tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr><tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr><tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr><tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr></table></td><td onmouseover="showmenu(\'scripting\')" onmouseout="hidemenu(\'scripting\')"><a href="/default.asp">Scripting</a><br /><table class="menu" id="scripting"><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr></table></td><td onmouseover="showmenu(\'validation\')" onmouseout="hidemenu(\'validation\')"><a href="/site/site_validate.asp">Validation</a><br /><table class="menu" id="validation"><tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr><tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr><tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr><tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr><tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr></table></td></tr></table></body></html>';?>

page.php

<?php ini_set ('display_errors', 1);error_reporting (E_ALL & ~E_NOTICE);print 'Hi, i will include a php menu :)';include('menu.php');?>

Link to comment
Share on other sites

It works fine. I know this isn't the PHP board, but it looks like that's where my problem is. Do I need to save the file to be included with a .php extension? The file it's written to has a .php extension, but the file being included has a .html extension. I also don't have any PHP code on the menu page, only the pages that call it. Could that be my problem?But some of the menu does work, just not the entire thing, and it's formatted differently in IE than in FF. So I'm assuming the path is correct in all of the pages. It's got me scratching my head. :)

Link to comment
Share on other sites

Okay...I've got the PHP link thingy working now across IE & FF. The only real problem now, is in FF the top level cells are of equal size, but not in IE. There has to be something real simple I'm missing and will be embarrassed about once it's pointed out, but right now it's got me stumped.I have the table tag as <table cols="4" border="0">. Like I said, the cells are of equal size in FF, but not in IE. :)

Link to comment
Share on other sites

Got it!!I had to add a width style to the top <td> in the menu so IE knew what to do. Of course FF & Opera understood with the cols attribute in the <table> tag, but it's not like this is a surprise.Thanks Bill for making simple coding like this such an adventure. I'd hate to think how boring and mundane it would be if everyone supported the same standards. :)

Link to comment
Share on other sites

Do I need to save the file to be included with a .php extension?  The file it's written to has a .php extension, but the file being included has a .html extension.  I also don't have any PHP code on the menu page, only the pages that call it.  Could that be my problem?

if you have no php on your included file, you do not need it to be .php.LG
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...