Site: www.jonpaulwild.co.uk

 

I've just started my site and test it as I go along. At the moment I'm just starting on the secondarynav bar (the orange bar) on my site. However, the text links wont go perfectly centre in a horizontal way. It needs to be perfectly central.

 

I've ready thing about a CSS reset file, but would like to know what anyone here thinks. Of course, there must be a simple solution to this as I spose it's a very basic issue.

 

 

Thanks for any help.

 

xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Test</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="secnav">
<ul><li><a href="test1.com">Test 1</a></li> <li><a href="test.com">Test 2</a></li> <li><a href="test2.com">Test 2</a></li></ul></div>

<div id="content"></div>
<div id="footer"></div><!--end footer -->
</div> <!--end wrapper -->
</body>
</html>

 

Css:

@charset "utf-8";

/* CSS Document */

* { margin: 0; padding: 0; }

html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
body {background-color: #333333}
p {line-height: 20px}
#wrapper {margin: 0 auto; position: relative; width: 100%;}
#header {height: 100px; background-color: white;}
#nav {background-color:#006633; height: 60px;}
#secnav {background-color: #FF6600;}
#secnav ul {margin: 0 auto; width: 500px; text-align: center; height: 25px; background-color: black; padding-top: 6px}
#secnav li {display:inline; padding-left: 30px}
#secnav li a {text-decoration: none; font-weight: bold; color: white}
#secnav li a hover {color: red}
#content{height: 100px; background-color:white;}
#footer {background-color: #1d1d1d; height:100px; border-top-color:#CC9900; border-top-style:solid; border-top:4px}

Is it the

#secnav li {display:inline; padding-left: 30px} ?

 

If each list item has a 30px padding on the left, the whole list will appear to be 30px offset as it will include that on its left hand side but not the right. Could you do it as 15px left and right instead?

That was so simple.

 

Thank you very much.