Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

How to Create a Centered UL with Blocks of LI Links

Whether you are working with a CMS or creating a static page (which is logically the step before your custom CMS theme), you are often left to ponder the best way to display a navigational menu or pagination links so that they are centered and in blocks of equal size. You’d be surprised how easy that is, this short tutorial is to get you to create a list that looks as such:

We want blocks of equal sizes, each linking to a given page (without a gap between the edge of the box and start of the link). And we want the code to be perfectly valid, of course.

First, we’ll start with the markup, which is a very basic unordered list:

<ul class="navigation">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

This alone results in a standard list with bullets and links. Now we need to add the CSS that will give us the look that we’re after:

ul.navigation{
	list-style: none;
	text-align: center;
}
ul.navigation li {
	display: inline;
	font-size: 14px;
	margin: 0 10px;
}
ul.navigation li a{
	background-color: #e5f27b;
	border: 1px solid #d9e383;
	color: #666666;
	display: inline-block;
	padding: 2px 8px;
	text-decoration: none;
	width : 75px;
}
ul.navigation li a:hover{
	background-color: #fe8a61;
	border-color: #d78466;
	color: #ffffff;
}

As you can see, it’s very straight-forward and you can easily customize it according to your needs. It’s useful for navigational menus, as well as pagination links to be displayed at the top or bottom of a given page.

Related posts

4 comments

Ahmed Bolica

May 26, 2010

Thanks Tark Keep Going

Tarek Shalaby

May 27, 2010

Thanks a lot for reading Ahmed! It’s great for all of us to share any knowledge we have. That’s what open-source stands for.

Ahmed Bolica

May 27, 2010

Thanks Tarek Ana Start in web design shortly have any advice to me ??

James

August 31, 2011

Thanks from sunny England!

Leave a reply