HTML Forum

**rolda hayes** · 01:58 PM

Hi there,

Please take a look at http://www.h2ox.net

Im updating the site that somebody else orignally wrote. Under the "services" menu, I need to add some page names that are going to be slightly longer that the ones already there. When I privew it, the light blue boxes are not wide enough so the text jumps to the next line.

Can i change the default with of these menus?

I think its located somwhere in www.h2ox.net/menu/udm-style.css

any help or advise would be great!

**vangogh** · 10-26-2006, 04:16 PM

I don't seem to be able to get to the site at the moment, but I'll check again later.

It will depend on how the menu is coded, but you should be able to specify a width just for the services submenu. It will probably be something like adding an id to the containing element of the submenu and then setting the width for just that element.

**rolda hayes** · 04:32 PM

you cant get on because i only put 2 "w's" instead of www. in the link! sorry!
Ive sorted the problem buy adjusting the main .css sheet slightyly to make the text smaller.

OK, LAST QUESTION FOR THIS SITE!

the bottom few pages in teh "services" menu have the footer placed on the left of the page instead of centred like the rest.
its the link that says "legal"

http://www.h2ox.net/oct_06/services/...w_anchors.html

Why have these moved only on the new pages I made?

Wish I had started this from scracth... So much easier!

Cheers!

**rolda hayes** · 10-26-2006, 05:16 PM

Sorted it!

Once too many </div>

Cheers!

**vangogh** · 10-27-2006, 02:01 PM

Glad you figred it out. Sorry if I couldn't help more.

**rolda hayes** · 10-02-2007, 02:02 PM

Ok, so I created this post a year ago and guess what?
I've been asked to add more lines in the services menu!

This time its quite a long one so need to increase the width of the box that appears in the dropdown with the link in... last time i changed the font size but that would make it too small!

its "reinforcement corrosion protection" and i need it to be on one line....

link is http://www.h2ox.net/test.html

css http://www.h2ox.net/h2ox.css
menu css http://www.h2ox.net/menu/udm-style.css

Thanks in advance!

**maxxximus** · 10-02-2007, 03:39 PM

That is a very simple drop down menu which is heavily overscripted. You could accomplish that with a fraction of the css and a bit of javascript to manage IE6.
I've included a simple drop down menu below. If it was me i'd start from scratch

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
    background-color: #999999;
    height: 800px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
#menu { width: 42em; margin: 0 auto; }
#nav, #nav ul { 
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

#nav a {
    display: block;
    /*width: 7.5em;*/
    text-decoration: none; 
    color: black;
    padding: 2px 4px;
}
#nav a:hover { color: white; background-color: gray;  }

#nav li {
    background-color: #EBEBEB;
    float: left;
    width: 8em;
    margin-top: -1px;
    margin-left: -1px;
    border: 1px solid gray;
    font-size: small;
    padding: 0;
    z-index: 1;
}

#nav li ul {
    position: absolute;
    width: 8.5em;
    left: -999em;
    z-index: 1;

}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;

}

-->
</style>
</head>

<body>
<div id="container"><script type="text/javascript" xmlns=""><!--
        sfHover = function() {
            var sfEls = document.getElementById("nav").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                    this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
            }
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);
    --></script><div id="menu"><ul id="nav"><li><a href="s">one</a></li>
<li><a href="f">two</a><ul><li><a href="a">two_one</a></li>
<li><a href="s">two_twotwo</a></li>
</ul></li><li><a href="s">three</a></li>
</ul></div></div>
</body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!