July 4, 201016 yr Hi, as you can guess from my post title im a complete noob, been learning html for a whole 2 days now. Anyway, ive been looking for an answer to a simple question but cant find it anywhere. Im making a test layout page using css to learn how it all works but I would like to know how to center the navbar. Ive checked google but cant find anything thats not too advanced for my level. Thanks alot in advance HTML: <!-- Put Doctype Here --> <html> <head> <!-- Link To Style Sheet --> <link rel="stylesheet" type="text/css" href="Stylesheet.css" /> </head> <body> <!-- Header --> <center><img src="Header.png" height="100" width="1240"></center> <!-- Navigation Bar --> <li><a href="????.html">Nav Bar 1</a></li> </ul> <!-- Line Break --> <br/> <!-- Main Headline --> <h1>Headline 1</h1> </body> </html> CSS: /* Navigation Bar */ ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { font-family:Arial; font-weight:bold; display:block; width:120px; color:#FFFFFF; background-color:#000000; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#808080; } /* Main Headline */ h1 { font-family:Arial; color:#000000; text-align:center; } PS. please ignore all the labels, its the only way i can remember what things are
July 4, 201016 yr This would be better and it validates when checked here:- http://validator.w3.org/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Page Title</title> <!-- Link To Style Sheet --> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="all" /> <style type="text/css"> /* Navigation Bar */ ul { list-style-type:none; width: 128px; margin:0 auto;; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { font-family:Arial; font-weight:bold; display:block; width:120px; color:#FFFFFF; background-color:#000000; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#808080; } /* Main Headline */ h1 { width: 100%; margin-top: 5px; font-family:Arial; color:#000000; text-align:center; } .center { width: 1240px; height: 100px; background: green; } </style> </head> <body> <!-- Header --> <p class="center" ><img src="Header.png" alt="header image"/></p> <!-- Navigation Bar --> <ul> <li><a href="????.html">Nav Bar 1</a></li> </ul> <!-- Line Break formed with margin-top on h1--> <!-- Main Headline --> <h1>Headline 1</h1> </body> </html> I put all your styles in head section style tags for convenience but you should put them in the separate stylesheet.css (note that I changed S to s as it's better to keep everything lower case to avoid problems with servers which are case sensitive). I added a missing <ul> tag, inserted the doctype, charset and title and deleted the <br /> which wasn't inside a <p> tag and put a margin-top on the h1 tag below instead. I put the first image inside a p tag (it should be inside an element like p or div or several others) and gave the p tag a width and margin: auto so that it centers in the window (except that a width of 1240px is too wide to center in most viewing windows). I gave the ul tag a width and margin: auto to center. Increase the width if you add more li tags (total width = li width plus side margins plus side padding plus side borders if any).
July 4, 201016 yr <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Untitled</title> <style> body {padding: 0; margin: 0;} #main {width: 1240px; margin: 0 auto;} #navbar {text-align: center;} </style> </head> <body> <div id="main"> <img src="Header.png" height="100" width="1240"> <div id="navbar"> <ul> <li><a href="????.html">Nav Bar 1</a></li> </ul> </div> <br/> <h1>Headline 1</h1> </div> </body> </html>
July 4, 201016 yr Author Wow thanks for the fast replys, will try the new code. Out of interest, which is the best doctype to use out of strict and transitional? Thanks
July 4, 201016 yr Author Ok ive tried the code, had to change .center to #center because the nav bar didnt show, not sure why it worked but it did. The nav bar has centered now but i need to center the page in my browser so back to google i suppose. Thanks for the help much appreciated.
July 5, 201016 yr hi RT, dont quote me on this cause i like you am learning html but the reason why your menu didnt show when you used .center is because you menu has been put in a div tag which when styling in your css you specify with a # sign(cant remember what that little symbol is called.....lol) the . symbol is used when you want to use a class. the # symbol is when you want to use div tags. im sure if im wrong in saying this someone will let you know as i say im still learning
July 5, 201016 yr Ok ive tried the code, had to change .center to #center because the nav bar didnt show, not sure why it worked but it did. The nav bar has centered now but i need to center the page in my browser so back to google i suppose. Thanks for the help much appreciated. I tested my reply which worked. I used .center {...} with <p class="center" >...</p> where .center is a class. I could have used #center {...} with <p id="center" >...</p> where #center is an id, but pehaps you mixed a class with an id. You have coded your Header.png image as 1240px wide so it will only look centered in a resolution over 1240px wide and not many people use a window as wide as that.
Create an account or sign in to comment