CSS Super Simple Horizontal Navigation Bar

-

CSS Super Simple Horizontal Navigation Bar

 

<html>
<head>
<title>CSS Super Simple Horizontal Navigation Bar</title>
<style>
   /* Begin Navigation Bar Styling */
   #nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; }
   #nav li {
      float: left; }
   #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
   #nav li a:hover {
      color: #c00;
      background-color: #fff; }
   /* End navigation bar styling. */
   
   /* This is just styling for this specific page. */
   body {
      background-color: #555; 
      font: small/1.3 Arial, Helvetica, sans-serif; }
   #wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
   h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;
      background-color: #069;
      margin: 0; }
   #content {
      padding: 0 50px 50px; }
</style>
</head>

<body>
<div id="wrap">
   <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1>
   
   <!-- Here's all it takes to make this navigation bar. -->
   <ul id="nav">
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
   </ul>
   <!-- That's it! -->
   
   <div id="content">
      <p>It doesn't get much simpler than the navigation bar above. 
For more information on how this works, </p>
   </div>
</div>

</body>
</html>
 
 
 
 
 
 
Best OF Luck

 

Comments

Post a Comment

Popular posts from this blog

-
Image
Top 10 Programming Languages Important To Learn  Financial and enterprise systems need to perform complicated functions and remain highly organized, requiring languages like Java and C#. Media- and design-related webpages and software will require dynamic, versatile and functional languages with minimal code, such as Ruby, PHP, JavaScript and Objective-C. 1. C Language C  is a high-level and general purpose  programming language  that is ideal for developing firmware or portable applications. Originally intended for writing system software,  C  was developed at Bell Labs by Dennis Ritchie for the Unix Operating System (OS) in the early 1970s.  Dennis MacAlistair Ritchie was an American computer scientist. C  is a very powerful and widely  used  language. It is  used  in many scientific programming  situations. It forms (or is the basis for) the core of the modern languages Java and C++. It al...
Read more

A Javascript Program To make (open new window and close that window) button in your web browser.

-
Image
A Javascript Program To make (open new window and close that window) button in your web browser. < html > < head > < script > function openWin() { myWindow=window.open("","","width=200,height=100"); myWindow.document.write(" <p >This is 'myWindow' </ p >"); } function closeWin() { myWindow.close(); } </ script > </ head > < body > < input type =" button " value =" Open 'myWindow' " onclick =" openWin() " / > < input type =" button " value =" Close 'myWindow' " onclick =" closeWin() " / > </ body > </ html >    
Read more