html - How to align the header menu from left? i see a unexpected margin on left. Help please -
i creating header menu using css. can see on above url. html code
<!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>let's foodie | homemade restaurant style food</title> <link href="style/main_css.css" rel="stylesheet" type="text/css" /> </head> <div id="header"> <ul> <li><a href="#" title="home"><span>home</span></a></li> <li><a href="#" title="recipes"><span>recipes</span></a></li> <li><a href="#" title="recipe finder"><span>recipe finder</span></a></li> <li><a href="#" title="foodie blog"><span>foodie blog</span></a></li> <li><a href="#" title="foodie forum"><span>foodie forum</span></a></li> <li><a href="#" title="tips & tricks"><span>tips & tricks</span></a></li> </ul> </div><!--header class ends here--> <body> </body> </html>
my css is
#header { float: left; width: 900px; /* font-size:93%;*/ line-height: 45px; background-color: #f00; } #header ul { width: 100%; list-style: none; background-color: #03c; margin:auto; } #header li { display:inline; margin:0; padding:0; text-align:center; font-family:jokerman; font-size:18px } #header { float:left; background:url("green.png") no-repeat left top; margin:0; width:150px; text-decoration:none; } #header span { display:block; background:url("green.png") no-repeat right top; color:#f00; float:none; } #header a:hover span { color:#fff; background:url("orange.png") no-repeat right top; } #header a:hover { background:url("orange.png") no-repeat right top; }
how can rid of margin on left?
url see issue : http://cooking.comyr.com/
the body tag has default margin property. use following css code rid of default margin:
body { margin:0; }
Comments
Post a Comment