[Dougj]

I am attempting to use the CSS horizontal menu seen here

http://www.sperling.com/examples/menuh/

It is difficult to properly place on the page as it depends on screen resolution as to how it sits based on the positioning style. Also if I get it placed properly and then resize the browser the menu overlaps on itself and becomes cumbersome.

Is there a way to place the menu so it stays the same width as the rest of the content no matter what resolution or browser size?

Doug

[cristobal03]

Well, as far as the overlapping goes, you can use a fixed width for the container, or a min-width in the browsers that support it. I didn't actually look at the CSS, but if you want to be sure the menu's never collapsed, just apply a width to its DIV.

chris.

[awatson]

As cris said - put the menu in its own fixed-width or min-width div, so that its containing element never gets narrow enough that it has to wrap.

[Dougj]

so do you mean <div width="740">nav bar content here</div> in the HTML or can I do that in the container within the CSS sheet?

Doug

[tomdkat]

Originally Posted by Dougj

so do you mean <div width="740">nav bar content here</div> in the HTML or can I do that in the container within the CSS sheet?

Yep, that's the jist of it. In either case, you'll need to put a DIV in the HTML page. You can put the stying of the DIV in the HTML page or in a CSS stylesheet.

Peace...

[Dougj]

Ok that sort of worked. I changed the style sheet ID=menu-container that was placing the menu position:absolute to position:static and set width:740px to match my other table widths. The menu now maintains its width when the browser is resized.

However in normal browser size the menu bar sits to the left of my other tables, so I put it in a table with a <div align="center"> around the table, as I ususally do to my tables to position them in the page center. This works great to position the menu...BUT... my sub menus now try to position themselves to page center instead of under the parent menu item as they have before.

So, is there a way to either set the menu in the centered table and then override the center option for the submenus, OR not use the <div align="center"> around the menu bar but still have it sit in the middle of the page where my other content sits?

D.

[Dougj]

yo can go here to see the page code

http://www.cusegama.ca/test.html

and here is the menu style sheet:

/* Begin CSS Drop Down Menu */


#menuh-container /* positions menu on page */
{
position: static; /* forces menu to be placed where i programmed it in code */
width: 740px; /* forces menu bar to fixed width so it will not overlap on itself when browser is resized */
}

#menuh
{
font-size: small;
font-family: tahoma, arial, sans-serif;
width:100%;
float:left;
margin:0em;
margin-top: 0em;
}

#menuh a
{
text-align: center;
display:block;
border: 0px solid #000;
white-space:nowrap;
margin:0;
padding: 0.15em; /* sets nav bar height */
}

#menuh a, #menuh a:visited /* menu at rest */
{
color: white;
background-color: #ab1113;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color: cornflowerblue;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url("../images/navdown_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url("../images/nav_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:13.9em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

[tomdkat]

Originally Posted by Dougj

However in normal browser size the menu bar sits to the left of my other tables, so I put it in a table with a <div align="center"> around the table, as I ususally do to my tables to position them in the page center. This works great to position the menu...BUT... my sub menus now try to position themselves to page center instead of under the parent menu item as they have before.

So, is there a way to either set the menu in the centered table and then override the center option for the submenus, OR not use the <div align="center"> around the menu bar but still have it sit in the middle of the page where my other content sits?

Which browser and browser version are you testing with? Attached is what I see in Firefox 3 beta 3 on Windows XP. The drop-down menu seems to be behaving correctly.

Peace...

[Dougj]

I am testing in IE 6 & 7

d.

[Dougj]

I got it fixed. just removed the <div align="center"> from around the table and put the palign="center" within the table and all seesm OK in both IE and firefox. Thanks for the help

doug