...

View Full Version : How can I center the items that appear in the ul.



jimanji
12-15-2010, 06:13 PM
Hi, I have this css on my web site. How can I center the items that appear in the ul. The code below has my item menu floating to left and right. How can I put them in the center.



h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}

hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}

#stylefour{
position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #656b61;
}

#stylefour ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
}

#stylefour ul li{
display:block;
float:left;
margin:0;
}

#stylefour ul li2{
display:block;
float:right;
margin:0;
}


#stylefour ul li a,#stylefour ul li2 a{
display:block;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(bgDIVIDER.gif) no-repeat top right;
}

#stylefour ul li a:hover,#stylefour ul li a.current,#stylefour ul li2 a:hover,#stylefour ul li2 a.current{
color:#656b61;
background:#ffff99 url(bgON.gif) no-repeat top right;
}


Thank you, jimanji.

Excavator
12-15-2010, 07:32 PM
Hello jimanji,

The easiest way would be to give your ul a width and center it with margins.
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

abduraooft
12-16-2010, 09:46 AM
Have a look http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

jimanji
12-16-2010, 01:58 PM
Thank you both very much. I didn't knew it will be that easy. But I have about 2-3 months when I started using css. It's a beautiful language.

cineweekly.com
12-16-2010, 09:55 PM
Seems like you got it but I'm always looking into CSS menu techniques too. If you want, you could look into my menu that I believe is doing what you want. The CSS can be found here cineweekly.com/core-style.css (http://www.cineweekly.com/core-style.css) and the menu parts are on the bottom labeled /* START Menu */ and the submenus are labeled as well. I think it's easy for a beginner to understand and an example may help you out. At least I'm a visual learner.

jimanji
12-16-2010, 10:12 PM
I think it's easy for a beginner to understand and an example may help you out. At least I'm a visual learner.

You are right, you example is very useful. It also has a nice dropdown css code.
Thank you!

cineweekly.com
12-17-2010, 01:43 AM
No problem. It's been great for me and took a while to find all the pieces I needed to put it together but know that the submenus look slightly off in Opera, but other than that no problems. I might look into fixing it but it's not really a problem at all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum