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
Post a Comment