css - HTML Navigation Bar, fixed at the top of webpage, horizontal boxes(buttons) -


i trying navbar show @ top of webpage, have horizontal buttons inside of clean box. similar navbar found @ http://www.apple.com/. feel if should know how this, apparently not. appreciated, or points , tips. thank , below code have far. css shown first, , html.

body{    border: solid;    background-color: white;    color: black;    text-align: center;  }    table.slideshow{      }  th.slideshowtitle{    text-align: center;    }    footer{    border-top: solid 10px;      }    /*nav bar*/  .navbar-inverse {    background-color:black;  }
<!doctype html>    <html>    <head>    <link href="c:\users\chester szydlowski\desktop\hof\stylesheet.css" type="text/css" rel= "stylesheet" />  <title>    hall of framers  </title>  </head>  <body>    <nav class ="navbar navbar-inverse navbar-fixed-top">         <div class="container">           <div class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>             </button>           </div>        <div id="navbar" class="collapse navbar-collapse">            <u1 class="nav navbar-nav">              <li class="active"><a href="#">home</a></li>              <li><a href="c:\users\chester szydlowski\desktop\hof\public_html\emaillist.html">email list</a></li>              <li><a href="">custom frames</a></li>              <li><a href="">news</a></li>              <li><a href="">silent auction</a></li>              <li><a href="">upcoming , past events</a><li>             <li><a href="">i dont know</a></li>          </u1>      </div>    </div>  </nav>      <p> products </p>    </table>  </body>

if add display css selector "li" elements, trick

add following css.

  li{      display:inline-block;    } 

this move elements next eachother, , can style further there. luck


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -