HTML CSS examples for CSS Widget:Nav Bar
Same page navigations and sliders
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .nav {<!--from w w w . j a v a2s. c o m--> width:100%; font-family:Arial; font-size:16pt; text-align:center; margin-bottom:21px; } .container { font-family:Arial; font-size:31pt; width:100%; background:black; height:401px; position:relative; overflow-x:hidden; } .container1 { text-align:center; position:absolute; color:Chartreuse; height:401px; display:inline-block; width:100%; } .container2 { text-align:center; left:100%; position:absolute; color:yellow; height:401px; display:inline-block; width:100%; } .container3 { text-align:center; left:201%; position:absolute; color:blue; height:401px; display:inline-block; width:100%; } .container4 { text-align:center; left:301%; position:absolute; color:pink; height:401px; display:inline-block; width:100%; } </style> </head> <body> <div class="nav"> <a href="#1">L</a>Lor <a href="#2">L</a>Lor <a href="#3">L</a>Lor <a href="#4">L</a> </div> <div class="container"> <div class="container1" id="1"> Lorem ipsum d </div> <div class="container2" id="2"> Lorem ipsum d </div> <div class="container3" id="3"> Lorem ipsum d </div> <div class="container4" id="4"> Lorem ipsum d </div> </div> </body> </html>