Solved

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

Posted on 2009-05-10
9
3,868 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
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
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).

820 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