We help IT Professionals succeed at work.

How to center <ul> <li> menù with CSS?

Loginbug
Loginbug asked
on
3,950 Views
Last Modified: 2012-05-06
Hi, i would want center in my page a <ul> menù provided by <?php wp_list_pages (.... )>

#PHP code:
<div id="pages">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
#CSS
 
         /* Backgroud  */
 
#pages {
width: 100%;
float: left;
height: 41px;
background-image: url(images/Blue.gif);
}
 
         /* Begin Menù  */
 
#pages ul { 
width: 650px;
list-style-type: none; 
list-style-image: none; 
float: left; 
padding: 0px 0px 0px 6px; 
margin: 0px;
}
 
#pages ul li { 
float: left; 
display: block; 
height: 41px;
padding: 0px;
}
 
#pages ul li a:link,#pages ul li a:visited, #pages ul li a:active {
float: left; 
color: #FFDF81;
display: block;
height: 32px;
font-size: 12px;
padding: 9px 20px 0px 20px;
margin: 0px;
font-weight: bold;
}
 
#pages ul li a:hover {
background-color: #0097C2;
text-decoration: none;
height: 31px;
margin-top: 1px;
padding-top: 8px;
color: #FFF;
}

Open in new window

Comment
Watch Question

Please clarify if you want to center the menu or menu texts within blocks?

Commented:
Changing the margin setting on the ul, like this:

#pages ul {
width: 650px;
list-style-type: none;
list-style-image: none;
float: left;
padding: 0px 0px 0px 6px;
margin: 0px auto;
}

Should work.

Author

Commented:
@arman_prof: I would want an Horizontal menù.

@mtgenus: Thanks, but it won't work.

See image.
center-UL.jpg

Commented:
You cant center floated box ...

1, Remove the float: left from your UL CSS definition

2, Add the: text-align: center; to your #pages CSS

3, Add the margin: 0 auto; to your #pages ul CSS
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Tony van SchaikFront-end Developer
CERTIFIED EXPERT

Commented:
Maybe this is useful for you i'm using this on my website www.bmwvideopost.com, in order to center the UL you need to put it in a surrounding div and the UL needs a width of you want to center it with margin: auto;.
Something like this:
<div id="pages"> width: 800px;
<ul> width: 500px; and margin: auto
<li>pages</li>
</ul>
</div>
Hope this helps you out.

CSS
 
/* navigation */
#navigation {
	font: bold 11px Arial, Helvetica;
	text-transform: uppercase;
	margin: auto;
	padding-left: 0px;
	padding-top:0px;
	display: block;
	height: 56px;
	width: 860px;
	letter-spacing: 2px;
	background-image: url(images/navigation-bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#navigation ul {
	float: left;
	line-height: 32px;
	list-style: none;
	margin: 0px;
	padding-top: 2px;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 8px;
}
#navigation ul li {
	display: inline;
	padding: 0;
}
#navigation ul li img {
	padding-right: 5px;
	vertical-align: middle;
	border: none;
}
#navigation ul li a {
	color: #fff; /* need because it will use default link color */
	float: left;
	padding: 0 0px 0 0px; /* left 3 px because of left.png image */
	text-decoration: none;
	background: url(images/left.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a span {
	display: block;
	float: none;
	padding: 0 10px 0 7px;
	background: url(images/right.png) no-repeat right center;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:hover {
	background: url(images/left-hover.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:hover span {
	background: url(images/right-hover.png) no-repeat right center;
	color: #fff;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:active {
	background: url(images/left-selected.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:active span {
	background: url(images/right-selected.png) no-repeat right center;
	color: #fff;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:focus {
	background: url(images/left-selected.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation ul li a:focus span {
	background: url(images/right-selected.png) no-repeat right center;
	color: #fff;
	outline: none; /* Removed dotted lines around links */
}
#navigation .current_page_item a {
	background: url(images/left-selected.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation .current_page_item a span {
	background: url(images/right-selected.png) no-repeat right center;
	color: #fff;
	outline: none; /* Removed dotted lines around links */
}
#navigation .current-cat a {
	background: url(images/left-selected.png) no-repeat left center;
	outline: none; /* Removed dotted lines around links */
}
#navigation .current-cat a span {
	background: url(images/right-selected.png) no-repeat right center;
	color: #fff;
	outline: none; /* Removed dotted lines around links */
}
 
HTML/PHP
 
<!-- NAVIGATION -->
<div id="navigation">
  <ul>
    <li><a href="<?php echo get_option('home'); ?>/" title="Home"><span>Home</span></a></li>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&include=226&title_li=&depth=1')); ?>
    <?php $menu = array(
 
    'depth'       => 1,
 
    'show_date'   => '',
 
    'date_format' => get_option('date_format'),
 
    'child_of'    => 0,
 
    'exclude'     => '',
 
    'title_li'    => __(''),
 
    'echo'        => 1,
 
    'authors'     => '',
 
    'sort_column' => 'menu_order, post_title',
 
    'link_before' => '<span>',
 
    'link_after'  => '</span>',
 
    'exclude_tree'=> '' );
 
 
 
	wp_list_pages($menu);
 
	?>
  </ul>
  <div class="listcategories">
    <?php wp_dropdown_categories('show_option_none=Select category'); ?>
    <script type="text/javascript">
 
    var dropdown = document.getElementById("cat");
 
    function onCatChange() {
 
		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
 
			location.href = "<?php echo get_option('home');
 
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
 
		}
 
    }
 
    dropdown.onchange = onCatChange;
 
</script>
  </div>
</div>
<!-- /NAVIGATION -->

Open in new window

Front-end Developer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
@therealteune: it's perfect.

@all: i will test yours solutions. Thanks

Wait for the points.
Tony van SchaikFront-end Developer
CERTIFIED EXPERT

Commented:
You're welcome
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.