HTML CSS examples for CSS Widget:Menu
Center menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!-- w ww . j av a2s.c o m--> font:13pt; font-family:Verdana, Geneva, sans-serif; width:100%; } body { margin:0px; } header h1 { display:inline-block; float:left; } header { background-color:Chartreuse; color:yellow; display:block; float:none; margin:auto; text-align:center; width:100%; } nav { background-color:blue; display:inline-block; float:none; height:61px; margin:auto; width:auto; } nav a { text-decoration:none; list-style:none; color:pink; font-size:21px; padding:9px; } nav li:hover,a:hover { color:OrangeRed; } li { display:inline; } img { border-color:grey; } .page { float:left; } .verticalline { border-left:solid BlueViolet; } .head { background:red; height:61px; width:100%; min-width:2001px; } </style> </head> <body> <div class="head"> <header> <h1>Lorem ipsum</h1> <nav> <ul class="menu"> <li> <a class="button" href="index.html">Lore</a> </li> <li> <a class="button" href="eersteklasse.html"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" id="img1">Lorem ipsum dol</a> </li> <li> <a class="button" href="tweedeklasse.html">Lorem ipsum d</a> </li> <li> <a class="button" href="contact.html">Lorem i</a> </li> </ul> </nav> </header> </div> </body> </html>