That was everything you have to do with the HTML. Now it's time to process our menu in CSS
Put the following code in CSS file:
Example:
"exact phrase" include -exclude
will give you more specific results
will give you more specific results
How to make upper CSS Menu [2/2]
#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}
Now i will explain how it works.We named the DIV in witch we surrounded our menu "nav".
Our next set from CSS tells the browser how to make links in our div.The links are copied on CSS as "a".
We will add a frame and a color for a background for our links.We can also change the font.
Our last set in CSS will tell the browser how to show our links when we go over them with the mouse.We will make the frame darker and will change the color of the font and the background.
Our CSS menu is ready !Now you can change the colors to be suitable for your site and you can also change the settings.
For all lazy people out there here is the combined HTML and CSS code:
Example:
Our next set from CSS tells the browser how to make links in our div.The links are copied on CSS as "a".
We will add a frame and a color for a background for our links.We can also change the font.
Our last set in CSS will tell the browser how to show our links when we go over them with the mouse.We will make the frame darker and will change the color of the font and the background.
Our CSS menu is ready !Now you can change the colors to be suitable for your site and you can also change the settings.
For all lazy people out there here is the combined HTML and CSS code:
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}
</style>
</head>
<body>
<div id="nav">
<a href="">Link</a>
<a href="">Home</a>
<a href="">Tutorials</a>
<a href="">Nothing</a></div>
</body>
</html>
|
- How to make upper CSS Menu [2/2] - | |
RECOMENDED TUTORIALS
Need a specific tutorial? Do not hesitate and submit a request!
Home | Articles | Sitemap | Terms & Privacy © ONLINEHOWTO.net 2006 - 2008