how can i center this?

djcritch · #1 (**permalink**) Feb 24th, 2008, 20:53

hi i have this menu but want to center it but want it to stay relitive to the screen size can anyone help me on this?

the code i have so far is:

Code: Select all

<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="

Jack Franklin · #2 (**permalink**) Feb 24th, 2008, 20:54

Code: Select all

#wrapper {
margin: 0 auto;
}

Centers it

djcritch · #3 (**permalink**) Feb 24th, 2008, 20:55

sorry the working example can be see at http://www.poker-bingo.net/menu.html cheers.

djcritch · #4 (**permalink**) Feb 24th, 2008, 20:56

hmm that didnt seem to do it ??

Ed · #5 (**permalink**) Feb 24th, 2008, 23:05

First of all, Validate your website.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A lot of problems can be solved by this.

Jack, you cannot use margin: 0 auto on a div with no width.
Also, make sure you actually implement the suggested changes.

With my suggested changes, your code should look like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
<style type="text/css">
  
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

#wrapper {
    width: 850px;
    text-align: center;
    margin: o auto;
}

.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;
    list-style: none;

}

.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>

</head>

<body>

<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>

</body>

</html>

I have also gotten rid of the nasty bullet points appearing in your navigation.

You may want to read up on HTML and CSS Practices before you get ahead of yourself.

Please post to let us know the outcome.

Thanks,
Ed

djcritch · #6 (**permalink**) Feb 24th, 2008, 23:57

yea i know all about web standers i just put that together as a quick online example for people to help me with.

couple of issues with your modifications:

1. the bar isnt going all the way accross the page anymore

2. its still not in the center of the bar

heres what i got now:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<style type="text/css">
 
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
#wrapper {
width: 100%;
text-align: center;
margin: 0 auto;
}
.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;
list-style: none;
}
.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>
</head>
<body>
 
<div id="wrapper">
<ul class="glossymenu">
<li class="current"><a href="

Monie · #7 (**permalink**) Feb 25th, 2008, 07:06

I wish I have the Mod ability to wrap all the code inside the tag

Make your wrapper width to something smaller so they can be positioned center.
Something like {width: 50%;}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Div bg images..will not center?	jahphill	Web Page Design	5	Jun 2nd, 2008 09:03
center	alexgeek	Web Page Design	1	Aug 2nd, 2007 03:30
Why Cant i center	Innes	Web Page Design	7	Jun 20th, 2007 20:37
Center a Swf Help??	nutbolt	Web Page Design	20	Apr 9th, 2007 10:21
just want to center this	ragingmon	Web Page Design	9	Dec 29th, 2006 18:07

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
how can i center this?