Depiction- Webmaster Resources
Stock Image


Contributors: Advertise Here  |  Advertise Here  |  Advertise Here


Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > Large Button Menu

 

In this article learn how to create large button-like tabs for your navigational purposes with CSS and some clever code.

Starting Out

Note: In the examples I have used black and white backgrounds to show you the effects some css code has.

Before we begin, create your navigation in a div as an Unordered List to keep things simple.

<div id="navigation">
<ul>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
</ul>
</div>

Current Example

Dealing with the List

Our first priority is dealing with the format and structure of the list. Let's clear all the margin and padding that browsers give the list to start with, while removing the list item bullets.

#navigation ul {
	margin: 0; 
	width: 150px;
	font: bold 10px Verdana;
	list-style: none;
}


#navigation ul li {
	margin: 0; 
	padding: 0; 
	text-align: right;
}

Current Example

The Link

Since we want a large area to click on, we will have to make the a element big rather than the list item (li) itself. Making it a block element instead of the default inline allows us to specify height.

#navigation ul li a {
	display: block; 
	width: 150px; 
	height: 25px;
	line-height: 25px;
}

Current Example

Tutorial continues on page 2.


 
 

Affiliates

Lunacore Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources