Hello all. My current website, <!-- w --><a class="postlink" href="http://www.classicverse.com">www.classicverse.com</a><!-- w --> is not using css. I have openned it in browsers other than explorer and notice that the header is askew. I am now attempting to redesign using css. I also would like to create dynamic menus when users mouseover the merchandise link, three menus appear [mens | womens | accessories]. I started the code but the menus are appearing above the navigation bar. Not sure how to adjust this. I also would like for the menu to be aligned center with the header. Currently the header is aligned left. Lastly I would like for MENU 1, MENU 2, and MENU 3 appear to the right of the nav bar as opposed to the left. Please find the code below:
**********************************CSS CODE*******************
#bar { position:absolute; left:10px; top:130px; color:black; width:1024px; height: 20px; background-color: Gray; font-family:verdana; font-size:10pt; border-color: white; border-width:1px }
.menu { position:absolute; width:60px; height:50px; background-color: Gray; top:71px; visibility:hidden; font-family:verdana; font-size:10pt; border-color: white; border-width:1px }
#sub
{
position : absolute;
top : 80px;
left : 10px;
height : 10px;
color : white;
font-family : verdana,serif;
font-size : 8pt;
}
****************************************END CSS CODE****************
****************************************JAVASCRIPT******************
// Netscape/Mozilla capture events instruction
if(navigator.appName == "Netscape")window.captureEvents(Event.MOUSEMOVE);
// specify the onmousemove event-handler
document.onmousemove=track;
// get the menu layer objects
var m1 = document.getElementById("menu_1");
var m2 = document.getElementById("menu_2");
var m3 = document.getElementById("menu_3");
// a function to react to the MOUSEMOVE event
// and dynamically hide menu layers
function track(e)
{
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
// hide menu 1 if out of bounds
if( x<1 || x>60 || y<53 || y>123) m1.style.visibility="hidden";
// hide menu 2 if out of bounds
if( x<70 || x>130 || y<53 || y>123) m2.style.visibility="hidden";
// hide menu 3 if out of bounds
if( x<140 || x>200 || y<53 || y>123) m3.style.visibility="hidden";
}
// a function to reveal a menu layer
function reveal(menu)
{
if(menu == 1) m1.style.visibility = "visible";
if(menu == 2) m2.style.visibility = "visible";
if(menu == 3) m3.style.visibility = "visible";
}
*********************END JAVASCRIPT**********************************
*********************HTML CODE***************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="CSS With Imaged Header">
<title>Classic Verse Home >> Official Site <<</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"menus.css"/>
</style>
</head>
<body bgcolor="#ffffff">
<div align="left">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.classicverse.com/images/new_cv_home.gif" alt="" height="117" width="1024" border="0"></td>
</tr>
</table>
</div>
<div id="bar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(1)"> Menu 1</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(2)"> Menu 2</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(3)"> Menu 3</a>
</div>
<div id="menu_1" class="menu" style="left:0px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target1.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target2.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target3.html"> Item 3 </a>
</div>
<div id="menu_2" class="menu" style="left:70px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target4.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target5.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target6.html"> Item 3 </a>
</div>
<div id="menu_3" class="menu" style="left:140px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target7.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target8.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target9.html"> Item 3 </a>
</div>
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"menus.js"></script>
</body>
</html>Ok I pulled your stuff into one page and you've got 2 primary problems; setting up the menu references and using mousemove over the whole page for your event handler. Some recommendations.
// specify the onmousemove event-handler
//document.onmousemove=track;
// get the menu layer objects
var m1, m2, m3;
function setmenu()
{
m1 = document.getElementById("menu_1");
m2 = document.getElementById("menu_2");
m3 = document.getElementById("menu_3");
}
Then in your menu divs add an onmouseout handler to hide the menu ala your onmouseover. Also this is more a Javascript/DOM question than a CSS question.The link to your website isn't working....did you remove it temporarily?Originally posted by gumbystation
The link to your website isn't working....did you remove it temporarily? There is a comma after the url.Sorry about the comma I took it out. <!-- w --><a class="postlink" href="http://www.classicverse.comray326">www.classicverse.comray326</a><!-- w -->, thanks for the post. I see by commenting out the xxxx=track section of the javascript the sub menus remain visible. How do I add the onmouseout event to my divs? Not sure where I would place it. Also what controls the sub menus appearing above the nav bar? I actually want it to appear below. Ultimately I want to center the header image. What in my css would center the bar with the header with a width of 1024? Thanks again.I love that banner! I would leave that and now focus on your content. Great job!!!
I glad you like the banner that means alot to me. Thank you. However I need to make some small modifications for the following two reasons:
1. when viewed in firefox the banner is spaced out, where the slices are.
2. As I add more merchandise, I'll need a way to seperate mens and womens wear as well as accessories. I find using the vertical menu is the best approach. Just need further assistance with creating them.
I am also working on the wording, if that is what you mean by content. If you have any input please advise with the dynamic menu. To recap I would like to have the sub menus appear below the nav bar as well as align the three menus to the right as opposed to the left as it is now.I understand! But are you going to leave the banner there? Or are you going to change alot of it?How do I add the onmouseout event to my divs?
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="reveal(1)" onmouseout="hide(1)"> Menu 1</a>
what controls the sub menus appearing above the nav bar
I believe that would be the #bar style.
What in my css would center the bar with the header with a width of 1024?
The general strategy is to wrap the bar in a narrower div and set that div's margins to 'auto'. Since your links are still inline, you could try text-align:center on the #bar div. (This is just WAG.)
**********************************CSS CODE*******************
#bar { position:absolute; left:10px; top:130px; color:black; width:1024px; height: 20px; background-color: Gray; font-family:verdana; font-size:10pt; border-color: white; border-width:1px }
.menu { position:absolute; width:60px; height:50px; background-color: Gray; top:71px; visibility:hidden; font-family:verdana; font-size:10pt; border-color: white; border-width:1px }
#sub
{
position : absolute;
top : 80px;
left : 10px;
height : 10px;
color : white;
font-family : verdana,serif;
font-size : 8pt;
}
****************************************END CSS CODE****************
****************************************JAVASCRIPT******************
// Netscape/Mozilla capture events instruction
if(navigator.appName == "Netscape")window.captureEvents(Event.MOUSEMOVE);
// specify the onmousemove event-handler
document.onmousemove=track;
// get the menu layer objects
var m1 = document.getElementById("menu_1");
var m2 = document.getElementById("menu_2");
var m3 = document.getElementById("menu_3");
// a function to react to the MOUSEMOVE event
// and dynamically hide menu layers
function track(e)
{
var x = (document.all) ? event.x : e.pageX;
var y = (document.all) ? event.y : e.pageY;
// hide menu 1 if out of bounds
if( x<1 || x>60 || y<53 || y>123) m1.style.visibility="hidden";
// hide menu 2 if out of bounds
if( x<70 || x>130 || y<53 || y>123) m2.style.visibility="hidden";
// hide menu 3 if out of bounds
if( x<140 || x>200 || y<53 || y>123) m3.style.visibility="hidden";
}
// a function to reveal a menu layer
function reveal(menu)
{
if(menu == 1) m1.style.visibility = "visible";
if(menu == 2) m2.style.visibility = "visible";
if(menu == 3) m3.style.visibility = "visible";
}
*********************END JAVASCRIPT**********************************
*********************HTML CODE***************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="CSS With Imaged Header">
<title>Classic Verse Home >> Official Site <<</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"menus.css"/>
</style>
</head>
<body bgcolor="#ffffff">
<div align="left">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.classicverse.com/images/new_cv_home.gif" alt="" height="117" width="1024" border="0"></td>
</tr>
</table>
</div>
<div id="bar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(1)"> Menu 1</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(2)"> Menu 2</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript://" onmouseover="reveal(3)"> Menu 3</a>
</div>
<div id="menu_1" class="menu" style="left:0px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target1.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target2.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target3.html"> Item 3 </a>
</div>
<div id="menu_2" class="menu" style="left:70px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target4.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target5.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target6.html"> Item 3 </a>
</div>
<div id="menu_3" class="menu" style="left:140px">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target7.html"> Item 1 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target8.html"> Item 2 </a><br/>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"target9.html"> Item 3 </a>
</div>
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"menus.js"></script>
</body>
</html>Ok I pulled your stuff into one page and you've got 2 primary problems; setting up the menu references and using mousemove over the whole page for your event handler. Some recommendations.
// specify the onmousemove event-handler
//document.onmousemove=track;
// get the menu layer objects
var m1, m2, m3;
function setmenu()
{
m1 = document.getElementById("menu_1");
m2 = document.getElementById("menu_2");
m3 = document.getElementById("menu_3");
}
Then in your menu divs add an onmouseout handler to hide the menu ala your onmouseover. Also this is more a Javascript/DOM question than a CSS question.The link to your website isn't working....did you remove it temporarily?Originally posted by gumbystation
The link to your website isn't working....did you remove it temporarily? There is a comma after the url.Sorry about the comma I took it out. <!-- w --><a class="postlink" href="http://www.classicverse.comray326">www.classicverse.comray326</a><!-- w -->, thanks for the post. I see by commenting out the xxxx=track section of the javascript the sub menus remain visible. How do I add the onmouseout event to my divs? Not sure where I would place it. Also what controls the sub menus appearing above the nav bar? I actually want it to appear below. Ultimately I want to center the header image. What in my css would center the bar with the header with a width of 1024? Thanks again.I love that banner! I would leave that and now focus on your content. Great job!!!
I glad you like the banner that means alot to me. Thank you. However I need to make some small modifications for the following two reasons:1. when viewed in firefox the banner is spaced out, where the slices are.
2. As I add more merchandise, I'll need a way to seperate mens and womens wear as well as accessories. I find using the vertical menu is the best approach. Just need further assistance with creating them.
I am also working on the wording, if that is what you mean by content. If you have any input please advise with the dynamic menu. To recap I would like to have the sub menus appear below the nav bar as well as align the three menus to the right as opposed to the left as it is now.I understand! But are you going to leave the banner there? Or are you going to change alot of it?How do I add the onmouseout event to my divs?
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onmouseover="reveal(1)" onmouseout="hide(1)"> Menu 1</a>
what controls the sub menus appearing above the nav bar
I believe that would be the #bar style.
What in my css would center the bar with the header with a width of 1024?
The general strategy is to wrap the bar in a narrower div and set that div's margins to 'auto'. Since your links are still inline, you could try text-align:center on the #bar div. (This is just WAG.)