Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Creating and linking external CSS files
by Ades Tynyshov
Advanced CSS (linking to an external style sheet)
by Adam Priestley
CSS Menu Style 1
by Nick La
CSS Menu Style 2
by Nick La
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Create a Simple Menu in CSS
rss

Create a Simple Menu in CSS

Author: PiticStyle More by this author

Added: June 19, 2008 Rating:  Average Rating: 2.83 Votes: 18 Position: 9881 of 13056Average Rating: 2.83 Votes: 18 Position: 9881 of 13056Average Rating: 2.83 Votes: 18 Position: 9881 of 13056Average Rating: 2.83 Votes: 18 Position: 9881 of 13056Average Rating: 2.83 Votes: 18 Position: 9881 of 13056 Level: Beginner Software:  Dreamweaver

Today we create a simple MENU in CSS.

1. Let's to create the CSS:

<style type="text/css">
body {
text-align: left;
background-image: url("bg.gif");
}
div {
width: 100px;
height: 20px;
background-color: #338ce8;
}
div:hover
{
background-color: #085ea6;
}
a {
color: white;
font-size: 18px;
text-decoration: none;
}
</style>

Note: text-decoration: none; I put this expression to remove the line under the link!

2. Now we need to create the HTML code:

<html>
<body>
<head>
<title>Create a simple Menu in CSS</title>
/* Here is the CSS code */
</head>
<body><center><h1><u>Create a simple Menu in CSS</u></h1>
<br><br>
<div><a href="#" mce_href="#">HOME</a></div>
<div><a href="#" mce_href="#">SERVICES</a></div>
<div><a href="#" mce_href="#">CONTACT</a></div></center>
</body>
</html>

The entire code:

<html>
<body>
<head>
<title>Create a simple Menu in CSS</title>
<style type="text/css">
body {
text-align: left;
background-image: url("bg.gif");
}
div {
width: 100px;
height: 20px;
background-color: #338ce8;
}
div:hover
{
background-color: #085ea6;
}
a {
color: white;
font-size: 18px;
text-decoration: none;
}
</style>
</head>
<body><center><h1><u>Create a simple Menu in CSS</u></h1>
<br><br>
<div><a href="#" mce_href="#">HOME</a></div>
<div><a href="#" mce_href="#">SERVICES</a></div>
<div><a href="#" mce_href="#">CONTACT</a></div></center>
</body>
</html>

That's it! Here is the final result!



Author's URL: www.piticstyle.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Create a Simple Menu in CSS"