Solved

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

Posted on 2009-05-10
9
3,881 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

0
Comment
Question by:Loginbug
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 

Expert Comment

by:arman_prof
ID: 24348678
Please clarify if you want to center the menu or menu texts within blocks?
0
 
LVL 2

Expert Comment

by:mtgenus
ID: 24348686
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.
0
 

Author Comment

by:Loginbug
ID: 24349046
@arman_prof: I would want an Horizontal menù.

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

See image.
center-UL.jpg
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

by:prokvk
ID: 24350116
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
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 20 total points
ID: 24350144
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24352795
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

0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 80 total points
ID: 24352864
Ok got it working see snippet i have tested it in FF and IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#navigation {
	width:980px;
	border:1px solid #ccc;
}
 
#pages {
	width:700px;
	margin:auto;
	border:1px solid #ff0000;
}
 
#pages ul {
	line-height: 32px;
	list-style: none;
	padding-top: 2px;
	margin:0px;
	text-align:center;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 8px;
}
 
#pages ul li {
	display: inline;
	padding: 0;
}
.clear {
	clear:both;
	}
</style>
</head>
<body>
<div id="navigation">
  <div id="pages">
    <ul>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
      <li>Pages </li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:Loginbug
ID: 24353784
@therealteune: it's perfect.

@all: i will test yours solutions. Thanks

Wait for the points.
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24356893
You're welcome
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question