Help with menu please

[sharkbite]

Hi,

Is there any way I can get this menu to run across the whole page?

http://leighdon.ca/

Thanks.

[spcherub]

This is not a CMSMS issue - it has to do with your HTML/CSS. The actually answer depends on what exactly you want to accomplish.

Do you want to keep the individual menu items their current widths but simply center the entire menu?
Then give div#menu_horiz ul a width (like 450px) and set the left and right margins to auto.

Do you want to space the items out across the width of the page?
One option is to adding extra padding (left & right) to the div#menu_horiz ul li or div#menu_horiz ul li a.

In both cases there may be other solutions - I just wanted to point out some quick options.

Hope this helps.
S

[tophers]

There's a fairly simple way to accomplish this with the css you have currently. Edit the css for the horizontal menu with the following:

Code: Select all

div#menu_horiz ul {
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #C0C0C0;
   /*border-left:  1px solid #C0C0C0; This is commented out to remove the border on the left so that the math will work*/
   height:2.2em;
}


/* menu list items */
div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0;
   border-right: 1px solid #C0C0C0;
   width: 169px; /* page width of 850px divided by 5, minus 1 for the border */
}

In addition, you have a couple of small issues on the Home page. There's an extra tag right before the address table that may cause you problems. And the background image isn't stretching to full width (on my machine set to 1900 x 1200px). You can fix that with:

Code: Select all

body {
   background: url(background.jpg) repeat-x 0 0px; 
}