Solved

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

Posted on 2009-05-10
9
3,861 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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

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... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

757 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now