Center css navigation bar and expand whole screen - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav bar alignment

Description

Center css navigation bar and expand whole screen

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
ul {<!--from w ww.ja v  a2s.  co  m-->
   list-style-type:none;
   padding:0;
   font:0/0 a;
   text-align:center;
}

a:link,a:visited {
   margin:0 auto;
   display:inline-block;
   width:121px;
   font-weight:bold;
   color:Chartreuse;
   text-align:center;
   padding:5px;
   text-decoration:none;
   text-transform:uppercase;
   font:15px/normal sans-serif;
}

a:hover, a:active {
   background-color:yellow;
}

li {
   display:inline-block;
}

#menu {
   background-color:blue;
}
</style> 
 </head> 
 <body> 
  <div id="menu"> 
   <header> 
    <ul> 
     <li> <a href="Home.aspx">Lore</a> </li> 
     <li> <a href="News.aspx">Lore</a> </li> 
     <li> <a href="Articles.aspx">Lorem ip</a> </li> 
     <li> <a href="Forum.aspx">Lorem</a> </li> 
     <li> <a href="Contact.aspx">Lorem i</a> </li> 
     <li> <a href="About.aspx">Lorem</a> </li> 
    </ul> 
   </header> 
  </div>  
 </body>
</html>

Related Tutorials