Can this be aligned to center?

[djcritch]

hi just been playing around with the Glossy Horizontal Menu that is avalible on the CSS section on the site but cant seem to center this menu with out it messing up when you put it in a differnt windowsize/screen rez?

is there some way you can set it so that its always centered?

please help!


<style type="text/css">

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: fixed;
padding: 0 0 0 0s;
margin: 0 -10 0 -10;
background: url(images/menub_bg.gif) repeat-x; /*tab background image path*/
height: 46px;

}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menub_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>
</ul>

[BLiZZaRD]

You will need a relative positioned container div with a defined width to place it in. :)

[djcritch]

um ok how do i do that!?

[BLiZZaRD]

by viewing this thread (http://www.dynamicdrive.com/forums/showthread.php?t=29778)

[djcritch]

ok i have placed it within a div and set to div to center but it still on the left and still have the problem of wanting it to be centered and relitive when viewed with differnt screen sizes???

heres what i got:


<style type="text/css">

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

#wrapper {
position: relative;
text-align: Center;
}

.glossymenu{
position:relative;
padding: 0 0 0 0;
margin: 0 -10 0 -10;
background: url(images/menub_bg.gif) repeat-x; /*tab background image path*/
height: 46px;

}

.glossymenu li{

float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menub_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

<div id="wrapper">
<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>
</ul>
</div>

[djcritch]

can anyone assist me any further as im still stuck with this cheers.

[BLiZZaRD]

You have to define a width size to the wrapper, even if it is 100% or 900px or 50em... something.

Also, the elements inside wrapper will need to be positioned absolute, not relative, as wrapper is relative.