Solved

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

Posted on 2009-05-10
9
3,867 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
The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

 
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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Capture logon name 13 73
Slider Moving to right hand side CSS? 2 23
WordPress Master Slider 4 21
Flex container exceeding stated width in IE11 4 6
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

810 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