Loading Page
Toolbar
Hello Guest
Google Search
search
categories
css
css
    »   Form Components
    »   Buttons
    »   Transparency
html
html
javascript
javascript
photoshop
photoshop
php
php



Paypal
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
Buttons from cells : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



Vote up
Vote down
Vote this article
Why you'll should create CSS menus?
It is recomended for many reasons:
- does not require any images and loads faster and sometimes images may have problems loading;
- it's easy to built and use;
- use less memory;
- it's easy to modified when need it;
- better indexing for search engines;

home contact about terms faq

If we think a little maybe we can find many more other reasons.

This for the beginning requires the html code being created before of all.
Be aware for specifying the doctype of your page unless you don't want to experience problems. This is important for any CSS styles.

You can create the buttons using a div container, in our case a table (easier to use).

We create a cell for every button followed by other cell for spacing as follow:

<table cellpadding="0" cellspacing="0">
	<tr>
		<td class="buton">home</td>
		<td width="2"></td>
		<td class="buton">contact</td>
		<td width="2"></td>
		<td class="buton">about</td>
		<td width="2"></td>
		<td class="buton">terms</td>
		<td width="2"></td>
		<td class="buton">faq</td>

	</tr>
</table>


Now we need to apply the style for having that effect. Here is the required code:
We need two classes for normal and over effect.


.buton
{
	font-family:Verdana;
	font-size:11px;
	font-weight:900;
	color:#3399FF;
	padding:5px;
	background-color:#eeffff;
	border:1px solid #0099FF;
}
.buton:hover
{
	font-family:Verdana;
	font-size:11px;
	font-weight:900;
	color:#ffffff;
	padding:5px;
	background-color:#3399FF;
	border:1px solid #0099FF;
	cursor:pointer;
}


You can set or not the font styles but is recomended to add them anyway just in case you may modify your base style and your menu may suffer some modifications at that time.
Don't set any width or height to buttons cells, it will adjust automatically because of padding that we set, unless you want to have a fixed size.

The background color sets different colors for both states (normal and over).
The solid border will appear around the cell transforming it into a button.

For avoiding confusion and make users to understand for sure that there we have a button, on over state will set as pointer his cursor.

home contact about terms faq

That's all. Have fun.




U-Trade © All rights reserved 2006-2008