Solved

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

Posted on 2009-05-10
9
3,863 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…

863 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

26 Experts available now in Live!

Get 1:1 Help Now