fixed width css only layout - can't get verticle menu left

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:57

fixed width css only layout - can't get verticle menu left

Poster: harmony
Dated: Tuesday August 22 2006 - 4:56:41 BST

Dear Milonic,

Thank you for any help on this.

I have a fixed width css only (no tables) layout. To center the entire layout of the page, I've used:

div#container {
display: block;
position: relative;
margin:0 auto;
width: 770px;
}

I'm trying to get the menu to appear on the left side of the layout (when adjusting browser window size) - within the page, not simply hugging the far left side of the screen.

I've added the menu just fine, but it hugs the far left side of the window. If I use screenposition="center"; - the menu sits in the middle of the layout and moves with my layout (when adjusting windows size), but not nicely on the left side and moving with my layout (what I want).

If I put the menu in a div, the menu appears in the correct position on the left side of the layout, but the submenus appear a distance to the right depending on how wide I make the browser window (because the margins are set to auto in the parent "container" div).

Is there anyway to make the menu sit nicely on the left side of my centered page and move correctly when resizing the browser window?

Thanks a million!

Poster: Andy
Dated: Tuesday August 22 2006 - 12:24:35 BST

Hi,

Do you have a URL that we can see.

It helps us a lot to be able to see the problem so that we can provide a more accurate answer

Regards,
Andy

Poster: harmony
Dated: Tuesday August 22 2006 - 17:00:58 BST

Hi Andy,

Thanks for the reply. You can see the problem here:

http://theharmonyproject.com/test/

By the way, the menu appears correctly in Windows IE 6, but not in Mac Safari, Mac/Win Firefox, or any other browser.

Also, if it's quick, do you know how to make the entire submenu have a border but not the main menu?

Any help on this would be appreciated

Poster: harmony
Dated: Saturday August 26 2006 - 18:01:07 BST

Is the only answer to put the menu in a table? If so, will Milonic support CSS only layout in the future?

Thanks for any help.

Poster: harmony
Dated: Thursday August 31 2006 - 0:23:16 BST

Any thoughts on this one. Are there any more details I can provide?

Thanks

Poster: Ruth
Dated: Thursday August 31 2006 - 2:53:50 BST

Hello,

I've been trying to figure out what happens to your layout when you increase the resolution. Does that column2 remain at 182 pixels from the left of the browser? If so then just set the menu's left position to 182-whatever the menu width is, so if the menu is 100px wide, then set left=82; Since you don't have a left= position the menu aligns by default all the way to the left side of the browser minus whatever margins are set.

Ruth

Poster: steviec
Dated: Thursday August 31 2006 - 12:39:09 BST

Have you tried placing"<script type="text/javascript" src="menu_data.js"></script>" directly inside one of the page's divisions?

Worked for me here:
http://www.womenshealthcareforum.com/home.cfm

Poster: harmony
Dated: Thursday August 31 2006 - 15:58:26 BST

Thanks for the replies!

StevieC, that did it. I tried to put the code in a div before, but gave attributes to the div that messed up the submenus. I put it in a blank div and it worked great.

Ruth, I'm not sure exactly what you proposed to do, but changing the left attribute of the menu made the menu just stick exactly in that position, no matter what size the browser window was.

Thanks again.

Poster: Ruth
Dated: Friday September 1 2006 - 1:25:24 BST

Hi,

The only problem with putting the menu data file into a div is in that manner is that that is not the correct way to do it and you can have problems on some browsers especially with where the submenus open.

The directions for putting the menu into a div or table by putting the calls for all the file there are to add buildAfterLoad=true; to the top area of the data file up where the open delay stuff is, set the main menu to position="relative"; and to call all the menu files in the div. The buildAfterLoad=true; means the menu is not available until the page is fully loaded and then the menu will build.

The second method of placing it in a div would be to cut the main menu from the menu_data.js file, put it into it's own file adding a drawMenus(); at the end and save it as main_data.js, for example. You would then call all the menu files as the first item after the body tag except the main_data.js file which you would call in script tags in the div where you want the menu to appear.

As to the left=; Yes, that's where it would go. When I changed resolutions from 800x600 to 1028x768 your layout didn't move so I just assumed it was always going to be in that position and used the absolutely positioned menu at what was more or less the center of that empty left space.

What exactly is your layout, is it going to center? if so you might try using screenposition="center"; and left="offset=-x"; -x would be the amount of pixels you want it to be back from the center.

Relatively positioning is the best method to get it to be exactly where you want it and have it remain in that same configuration as resolution changes. It would move with the layout.

Ruth

Poster: Ruth
Dated: Friday September 1 2006 - 6:14:32 BST

Hi,

The reason I was having a problem is that your layout does not center in IE using the css as you have it. Something to do with IE, text-align, centering and auto margins. So after a bit of testing, and some research, I tried the following and that made it center. Once it centered I could set up the menu not using a relative position, using screenposition="center"; and a negative left offset.

Try this as your css, I just saved it as test.css and called that file in order to test everything. [Take out the border stuff, I need that to help me see what everything is doing as I make changes]

Code:

/* margins,paddings default zero */ 
* { 
margin: 0; 
padding: 0; 
} 

body 
{ 
/* for IE */ 
text-align:center; 
font-family: Verdana, Helvetica, sans-serif; 
font: 10px/144% Verdana, Arial, sans-serif;; 
WIDTH: 100%; COLOR: #000000; PADDING-TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #ffffff

} 



DIV#container { 
position: relative; 
text-align:left; 
width: 691px; 
margin: 0 auto; 

} 

A:link {
   COLOR: #ffffff; TEXT-DECORATION: none
}
A:visited {
   COLOR: #ffffff; TEXT-DECORATION: none
}
A:hover {
   COLOR: #c22038; TEXT-DECORATION: underline
}
A:active {
   COLOR: #ff0000
}
H2 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 14px Verdana, Arial, sans-serif; COLOR: #959595; PADDING-TOP: 0px
}
HR {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #c2c2c2; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 98%; PADDING-TOP: 0px
}
DIV#headerleft {
   border:1px solid aqua;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 530px; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 258px
}
DIV#headerleft SPAN {
   DISPLAY: none
}
DIV#headerright {
   border:1px solid lime;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 530px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 245px; PADDING-TOP: 0px; POSITION: absolute; TOP: 90px; HEIGHT: 168px
}
DIV#headerright SPAN {
   DISPLAY: none
}
DIV#column2 {
   border:1px solid #FFCC66;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 182px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 378px; PADDING-TOP: 0px; POSITION: absolute; TOP: 282px; TEXT-ALIGN: left
}
DIV#column3 {
   border:1px solid #CC99FF;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 582px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 190px; PADDING-TOP: 0px; POSITION: absolute; TOP: 282px; TEXT-ALIGN: left
}
DIV#searchbox {
   border:1px solid #9900FF;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 588px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 182px; LINE-HEIGHT: 160%; PADDING-TOP: 0px; POSITION: absolute; TOP: 16px; HEIGHT: 108px
}
.weather {
   border:1px solid #999999;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #acacac; PADDING-TOP: 0px; TEXT-ALIGN: left
}
.search {
   border:1px solid #FF66CC;BORDER-RIGHT: #acacac 1px solid; PADDING-RIGHT: 118px; BORDER-TOP: #acacac 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; BORDER-LEFT: #acacac 1px solid; COLOR: #000000; MARGIN-RIGHT: 4px; PADDING-TOP: 2px; BORDER-BOTTOM: #acacac 1px solid; TEXT-ALIGN: left
}
.go {
   BORDER-RIGHT: #acacac 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #acacac 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; BORDER-LEFT: #acacac 1px solid; COLOR: #7d7d7d; PADDING-TOP: 2px; BORDER-BOTTOM: #acacac 1px solid; TEXT-ALIGN: left
}
.contacthaas {
   FONT-SIZE: 10px; COLOR: #acacac; TEXT-ALIGN: left
}
#blurb1 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; LINE-HEIGHT: 120%; PADDING-TOP: 0px; HEIGHT: 86px
}
#blurb2 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; LINE-HEIGHT: 120%; PADDING-TOP: 0px; HEIGHT: 86px
}
#blurb3 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; LINE-HEIGHT: 120%; PADDING-TOP: 0px; HEIGHT: 86px
}
.blurbimage {
   BORDER-RIGHT: medium none; BORDER-TOP: medium none; FLOAT: left; MARGIN: 0px 16px 0px 0px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none
}
.blurbtitle1 {
   FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #9c9577
}
.blurbtitle2 {
   FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #9c9577
}
.blurbtitle3 {
   FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #9c9577
}
.rssimage {
   BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px 200px 0px 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px; BORDER-BOTTOM: medium none
}
.learnmore {
   FONT-WEIGHT: bold; FONT-SIZE: 9px
}
.p1 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; LINE-HEIGHT: 120%; PADDING-TOP: 8px
}
.p2 {
   PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; PADDING-TOP: 16px
}
.bolder {
   FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #7d7d7d; TEXT-DECORATION: underline
}
.quickform {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 180%; PADDING-TOP: 12px
}
.editquick {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #7d7d7d; LINE-HEIGHT: 120%; PADDING-TOP: 0px; TEXT-DECORATION: underline
}
DIV#footer {
   border:1px solid #990099;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 12px; BACKGROUND-IMAGE: url(images/rule.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 759px; PADDING-TOP: 0px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 600px; HEIGHT: 60px; TEXT-ALIGN: left
}
.underline {
   TEXT-DECORATION: underline
}
.milonic {
   DISPLAY: none
}

Then for your main menu, and this is just an estimate you might want to work with it and get it exactly as you like:

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="vertical";
style=menuStyle;
top=282;
screenposition="center";
left="offset=-300";

What that does is center the menu and then shifts it 300 px to the left of center. Now, you'll have to work on that offset position based on your real menu since this is based on the menu being x pixels wide using the word test in each item.

I didn't try higher than 1028x768 because it messes up all my desktop files when I change it higher.

Hope this helps.

Ruth

Poster: harmony
Dated: Friday September 1 2006 - 15:36:21 BST

Hi Ruth,

Thanks for the info. I'm not quite sure what version of IE you are using, but every version I've tested centers just fine with my css and works with the vertical menu inside the div (no problems with the submenus either).

I've tested with Windows IE, Firefox, and Netscape; Macintosh Safari, Firefox, and IE 5. That's all I cared about so didn't test further.

Thanks again.

Poster: Ruth
Dated: Friday September 1 2006 - 21:10:34 BST

Hi,

It's IE5.5 which is the only one that had problems. But if it works like you want in the browsers you want that's all that's necessary

Ruth

Industrial Strength JavaScript and DHTML Menus

fixed width css only layout - can't get verticle menu left

Any help on this would be appreciated