html - Can't center menu -
i'm trying center menu after changed menu bar on total length of page. whatever seek won't center menu in middle of page. if seek menu @ right or starts in center not central in page. want h1 menu
my html page
class="snippet-code-css lang-css prettyprint-override"> @charset "utf-8"; html { font: 12pt; font-family: verdana, geneva, sans-serif; } body { margin: 0px; } header h1 { float: left; margin: 11px; } header { background-color: white; font: "palatino linotype", "book antiqua", palatino, serif; color: #f00; float: left; display: block; } nav { background-color: #f00; float: right; height: 60px; width: 900px; display: block; width: auto; } nav { text-decoration: none; list-style: none; color: white; font-size: 20px; padding: 8px; } nav li:hover, a:hover { color: black; } li { display: inline; } img { border-color: #f00 } .page { float: left; } .verticalline { border-left: thick solid #ff0000; } .head { height: 60px; background-color: #f00; width: 100%; min-width: 2000px; } class="snippet-code-html lang-html prettyprint-override"><!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>lierse liga</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="head"> <header> <h1>lierse liga</h1> <nav> <ul class="menu"> <li><a class="button" href="index.html">home</a> </li> <li> <a class="button" href="eersteklasse.html"> <img src="bal.gif" id="img1" />eerste klasse</a> </li> <li><a class="button" href="tweedeklasse.html">tweede klasse</a> </li> <li><a class="button" href="contact.html">contact</a> </li> </ul> </nav> </header> </div>
try , check floated divs :-
demo
header h1{ /*( float:left;*/ margin: 11px; } header{ background-color:white; font:"palatino linotype", "book antiqua", palatino, serif; color:#f00; /*float:left;*/ display:block; } nav{ background-color:#f00; /* float:right;*/ height:60px; width: 900px; display:block; width:auto; } html css
No comments:
Post a Comment