Sunday 13 May 2012

CSS stylesheet to create horizontal navigation bar

Description:
The purpose of this article is to show how a horizontal navigation bar achieved using HTML/CSS without the use of tables, images, Javascript, or any other scripting manipulation. The following example validates according to W3C standards, and is compatible with all modern browsers. 




Html page 
___________________________________________________________________________


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOMETHING</title>


<link href="css/Navbar.css" rel="stylesheet" type="text/css" />
</head>


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="Image/Background.jpg">
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="Image/Background.jpg">
<tr>
<td>
<img src="Image/Capture.JPG" width="70%" align="center" height="150" />
</td>
</tr>
<tr>
<td>
<div id="navbar" style="margin-top:10px;margin-bottom:20px">
<ul>
<li><a href ="CMS.html" title="View home Page">Home</a></li>
<li><a href ="Login.html" title="Go to Login page">Login</a></li>
<li><a href ="register.html" title="Register Yourself">Register</a></li>
<li><a href ="Help.html" onmouseover="Show()" onmouseout="Hide()">Help</a></li>
<li><a href ="Contact.html" title="Contact technical support">Contact</a></li>
<li><a href ="FAQ.html" title="View Frequently asked questions">FAQ</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div id="welcome" style="widht:100%">
<div style="border: 1px solid gray; margin-top: 20pt; margin-bottom: 10pt; width:100%">


<div id="register" style="width:60%">
<div style="border: 1px solid gray; margin-top: 20pt; margin-bottom: 10pt">
<ul>
<font color="#0066CC"><u>Registeration</u> </font>
<li>
Every participant in a conference served by this site,must maintain a single PIN and password. The same PIN must be used forall conferences
</li>
<li>
Follow the link <a href="Register.html">Register</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
</br>
</br>
<tr align="center" height="100">
<td>
<div id="copyright" style="background-color:#000;width:100%">
<div style="border=1px solid gray; margin-top:170px">
<ul>
<font color="#00FFFF"><b>Copyright </b></font>
</ul>
</div>
</div>
</td>
</tr>
</body>
</html>
------------------------------------------------------------------------------------------------------------
navbar.css
_________________________________________________________________________________




@charset "utf-8";
#navbar {
}
#navbar ul {
        margin: 0;
        padding: 5px;
        list-style-type: none;
        text-align: center;
        background-color:#039;
        }


#navbar ul li {
        display:inline;
        }


#navbar ul li a {
        text-decoration: none;
        padding: .2em 1em;
        color: #fff;
        background-color:#039;
        }


#navbar ul li a:hover {
        color: #000;
        background-color: #fff;
        }
#navbar ul li a#onlink:hover{
background:#FFF;
color:#FFF;
text-shadow:1px 1px 1px #000;
}
#navbar {
}


Breaking down the CSS 



  • As with most modern navigation bars, this code is based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page.
<div id="navbar" style="margin-top:10px;margin-bottom:20px">
<ul>
<li><a href ="CMS.html" title="View home Page">Home</a></li>
<li><a href ="Login.html" title="Go to Login page">Login</a></li>
<li><a href ="register.html" title="Register Yourself">Register</a></li>
<li><a href ="Help.html" onmouseover="Show()" onmouseout="Hide()">Help</a></li>
<li><a href ="Contact.html" title="Contact technical support">Contact</a></li>
<li><a href ="FAQ.html" title="View Frequently asked questions">FAQ</a></li>
</ul>
</div>
  • Making It Horizontal:



#navbar ul li {
        display:inline;
        }

No comments:

Post a Comment