Positioning problem with a menu

[Stang02GT]

I have created a menu ( as some of you may have seen in my previous post about adding a third level to a 2 level menu) and now my problem with the menu is that the menu stretches across the whole screen and i would like to position it directly in the center of the screen and fit between a certain area.


Is there a way threw the CSS file or maybe something that i can add into the HTML file that i can move the position of the menu and have i need it to not go past a certain spot on the right on of screen. (the menu will adjust it's self based on the size of the screen, if the screen is shrunk the menu moves the times that would be cut of to a second row)

here is my css file

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(untitled.bmp) center center repeat-x;
color: white;
font: bold 10px Tahoma;
}
	
/*2nd level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*2nd level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* 2nd level menu links style */
.horizontalcssmenu ul li ul li a{
width: 130px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: url(untitled1.bmp) center center repeat-x;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: url(untitled1.bmp) center center repeat-x;
}

.horizontalcssmenu ul li ul li a:hover{
background: url(untitled2.bmp) center center repeat-x;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ 
padding-top: 1em;
}
	
/*3rd level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 0px solid #202020;
position: absolute;
left: 30px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}

/*3rd  menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}


/*3rd  menu links style */
.horizontalcssmenu ul li ul li ul li a{
width:120px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background:  url(untitled.bmp) center center repeat-x;
border-width: 0 1px 1px 1px;
}

[Death Slaught]

Have you tried putting the entire thing into a division, and adding this:

 text-align:center;

If this gives you the desired effect, but doesn't quite fit in the area you wanted, just reduce the width a little.

Hope it helps, Thanks, Death

*EDIT* You could just give it an absolute positioning, and then move it where you want it.

[drhowarddrfine]

The CSS doesn't mean anything without the html.

[Death Slaught]

The CSS doesn't mean anything without the html.

True, however, his problem does not lie within his HTML, or really have much to do with it. His problem is positioning, which is CSS. Although having the HTML so we may see what space we have to work with would have been nice (not to mention make our lives slighty easier). I believe that he provided enough information so we could provide a decent assumption, and therefor provide ways of accomplishing his goal (based entirely upon that assumption of course).

I understand what your saying so just ignore my rant above :)

Thanks, Death