HTML - (resolved) How To Center Horizontal Menu Sub Items?

I thought for sure that after all the helped I've received so far (many thanks, btw) that I'd be able to setup a horizontal menu using UL/LIs with some CSS. I've studied many other sites that use horizontal menues this way and have tried to figure 'em out but no luck so far

Here's my attempted code so far:

CSS
Code:

#headerNavMenuContainer {
	background: url('images/main_nav_bar2.gif');
	float: left;
	border: 1px solid #000;
	height: 42px;
	width: 100%;
	}
	
#headerNavMenu ul {
	font-weight: 800;
	text-align: center;
	}
	
#headerNavMenu ul a {
	border-right: 1px solid #dadada;
	color: #000;
	text-decoration: none;
	}

HTML
Code:

		<div id="headerNavMenuContainer">
			<div id="headerNavMenu">
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Encyclopedia</a></li>
			<li><a href="#">Forum</a></li>
			<li><a href="#">The Truth</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Publications</a></li>
			</ul>
			</div>
		</div>

I am working on a site with a CSS horizontal drop down menu. On my Contact Us page I added an office locations map that uses java script and links to MapsAlive.com. My menu only has one drop down category, but when testing it, the drop down stops where the office location map starts. Is there a way to make it so the menu is always on top? I am using Dreamweaver, so the menu is part of my template. Here is my code for the menu:

<div id="outside">
<ul id="navigation-1">
<li><a href="index.html" title="Home" target="_self" >Home</a>
</li>
<li><a href="" title="Services" target="_self" >Services</a>
<ul class="navigation-2">
<li><a href="air.html" title="Air" target="_self" >Air</a></li>
<li><a href="altenergy.html" title="Alternative Energy" target="_self" >Alternative Energy</a></li>
<li><a href="civil.html" title="Civil Engineering" target="_self" >Civil Engineering</a></li>
<li><a href="environmental.html" title="Environmental" target="_self" >Environmental</a></li>
<li><a href="health.html" title="Health &amp; Safety" target="_self" >Health &amp; Safety</a></li>
<li><a href="solidwaste.html" title="Solid Waste" target="_self" >Solid Waste</a></li>
</ul>
</li>
<li><a href="presentations.html" title="Presentations" target="_self" >Presentations</a>
</li>
<li><a href="aboutus.html" title="About Us" target="_self" >About Us</a>
</li>
<li><a href="careers.html" title="Careers" target="_self" >Careers</a>
</li>
<li><a href="contactus.html" title="Contact Us" target="_self" >Contact Us</a>
</li>
</ul>
</div>

Here is my code for the office locations map:

<div id="mainContent" align="center">
<link rel="stylesheet" type="text/css" href="http://tour.mapsalive.com/3854/page1.css" />
<script type="text/javascript" src="http://tour.mapsalive.com/3854/mapsalive.js"></script>
<script type="text/javascript">maClient.path="http://tour.mapsalive.com/3854/";</script>
<script type="text/javascript" src="http://tour.mapsalive.com/3854/page1.js"></script>
</div>

I have attached a screenshot of how it looks in a browser so you can see what it is doing. I would appreciate any advice from anyone who can give me direction.

Thanks,
Tatter

Hi folks, I have this menu (generated via menumatic), that needs to not wrap should users decrease the width of their browser too far (or if it does wrap..then I need the div to resize to fit the height properly which it currently does not).

Any tips/suggestions welcome

The website url: (click the Available Items which will show the 2nd level menu in question (located in div id='promo')
http://www.borrownet.com/


the CSS is as follows (from mm2.css):
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
display:block;
padding: 8px 10px;
color: #000;
font: 70%/90% arial;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:5;
float:left;
}

/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}

/* All menu links on hover or focus */
#nav a:hover,
#subMenusContainer a:hover
{
background-color:#90B557;
color:#FFF;
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;*/
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#nav li a:hover
{
background-color:#B2D281;
color:#000;

}

/*
.subMenuParentBtn{
background: url(../img/arrow_right.gif) right center no-repeat;
}


.subMenuParentBtnFocused{
background: url(../img/arrow_right_over.gif) right center no-repeat;
}


.mainMenuParentBtn{
background: url(../img/arrow_down.gif) right center no-repeat;
}


.mainMenuParentBtnFocused{
background: url(../img/arrow_down_over.gif) right center no-repeat;
}
*/
/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0px 4px;
margin:0 0 0 -2px;
}


/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#90B557;
border: 2px solid #C3D46A;
top: 0px;
left:0;
z-index:8;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}

#subMenusContainer li{
list-style: none;
}

/* main menu ul or ol elment */
#nav{
display:block;
position: absolute;
list-style:none;
margin:0 0 0 0;
z-index: 5;
text-align: center;
display:block;
}

#subMenusContainer{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000;
}


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }

#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}

#nav li ul { /* second-level lists */
position: absolute;
width: 11em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul margin-left: -1000em; }

/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}

#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

Hello,

I am using some inline css menu but I can't figure out what to change in order to automatically center the menu on our page.

The code is he

http://www.greekconcierge.com/weddings.php

many thanks in advance,
Andy

Help!!!!

I have been looking at this for almost 6 hours and I still can't explain why my horizontal menu wrapped using Firefox and not IE. I have firefox 3 installed and some of the categories (on the same tree) wrapped and some doesn't. But if i refresh it a few times, it become normal again. This make no sense.

Maybe I need to get some fresh air because i am starting to see spots on the screen.

http://208.84.114.15

I am designing a page w/ a horizontal menu and CSS (added in header).

For some reason, IE7 dislikes what I am doing (the HOVER doesn't seem to be working...) but it works fine in Opera, FF and Safari . .

Perhaps one of the pros here can take a look under the hood? I've been at it for hours and can't seem to find the bug(s)...

http://www.huntandfishnj.com/Sterling-G/

Thanks and Best wishes,

Xex

thanks for helping me

Hi!

I was wondering whether someone could enlighten me (or do it for me), as to how I use URL Parameters. I don't understand javascript, or much html for that matter. I have a page, 'http://goldenlightsoft.org'. I want to set it up so if someone types in 'http://goldenlightsoft.org/index.htm?page=downloads.htm', they would see the normal page, except that the iFrame in the middle ('I1'), would be pointing to downloads.htm of the site, not the normal home.html.

I would prefer this system to work without compatibility issues with other browsers, and also I am not sure of the hosts capabilities. I know html and javascript work fine.

Can someone help me with this?
Thanks,
dawmail333

Someone on another forum figured it out for me, thanks, please delete this.

When the hotspots on my image map are moused over a box of text appears.

I need a word (close, in this case) to give the impression of a link, i.e I need the finger pointer to appear. I have written an onClick script that will close the box of text when this "phantom link" is clicked.

Any help?


I was able to resolve this on my own! Thanks for reading.

Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another...

The code for the rollover itself is:
Code:

<a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>

The bad javascript for the image swap is:
Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

And finally the even worse coding for the sound is:
Code:

<SCRIPT LANGUAGE="JavaScript"><!--


var aySound = new Array();

aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";


IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>

I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve.
Thank you for your time.

ok im trying to get the frames to work on my index page. and they are showing up perfectly when i load the page but when i click one of my links to another page instead of the second column changing to that page, the table of contents column does.

Quote:
<HTML>
<HEAD>
<TITLE>World of Warcraft Obsession</TITLE>
</HEAD>
<!Create two columnwise frames>
<Frameset COLS="140,*">
<!define left frame>
<FRAME NAME=TOC
SRC=TOC.html
MARGINWIDTH="5"
MARGINHEIGHT="5"
SCROLLING=YES>
<!define right frame>
<FRAME NAME=MAIN
SRC=main.html
MARGINWIDTH="10"
MARGINHEIGHT="10"
SCROLLING=YES>
</Frameset>
</HTML>

So i decided the other day to redo my website. I hopped on to Notepad++ and got the home page done. However, when i went to test it, all i got were the top four links. Can anyone spot any errors, or tell me why it isn't working?
Thanks

<html>
<body>
<style type="text/css">
b
{
background-color:black;

text-color:green;
}
p
{
text-color:red;
}
</style>
<a href="home.htm">Home</a>
<a href="blogish.htm>Blogish</a>
<a href="links.htm">Links</a>
<a href="currentguns.htm>Currunt Guns</a>
<br/>
<br/>
<br/>
<br/>
<br/>
Hello, welcome to my extreamly lame webpage...
<br/>
<br/>
Here i will tell you what guns i currently have, and equiptment for them (hoppers, tanks, tank covers, upgrades, etc.).
<br/>
I will also have a mini blog were i will post updates after every major event at Hell Survivors Inc. I will also put up my war stories.
<br/>
<br/>
<br/>
<br/>
<br/>
<p>
WARNING!!! DO NOT PLAY PAINTBALL, You WILL be addicted immediatly, and won't be able to stop. It will drain your funds, and you will
<br/>
come home every day bleeding and in pain.
<br/>
<br/>
<br/>
In other words, its a good thing pballers are crazy and think that the pain is fun, and can go for weeks without eating so they
<br/>
can afford there 1200 dollar markers...
</p>
<br/>
<br/>
<a href="home.htm">Back to Top</a>
</body>
</html>

I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid.
Any ideas?
Heres the site
http://techoftheweekpodcast.com/index.php