JPW
10-04-2009, 10:20 AM
I'm getting back into webdesign and have created a layout in Photoshop and now attempting to code it, and having trouble with basic stuff. Nothing's working!
I'm wanting to get the, what should be, easy secondary nav bar working.
My site: www.jonpaulwild.co.uk
Problems:
1) I'm trying to vertically and horizantally align any links that appear in the orange sec nav bar. At the moment when I try anything nothing works. Horizantally it's not perfectly aligned, and nothing works when I try and vertically align the links. The orange bar I'd like to be around 40 or so pixels with the text/links in the middle.
2) There's gaps to the top and bottom of the orange secnav bar, and I don't know why.
3) There's also a gap between the white content area and the footer
I have no idea if it's the html or css, please can anyone help.
<!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="/test.html">Link One</a></li>
<li><a href="/test2.html">Link Two</a></li>
<li><a href="/test3.html">Link Three</a></li>
</ul>
</div>
<div id="content"></div>
<div id="footer"><p><a href="test.co.uk" title="sitemap">Site Map</a>
<p><b>© Copyright 2009test (UK) Ltd - Designed By test</b></p></p></div><!--end footer -->
</div> <!--end wrapper -->
</body>
</html>
@charset "utf-8";
/* CSS Document */
html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
body {background-color: #333333}
#wrapper {margin: 0 auto; position: relative; width: 100%;}
#header {height: 100px; background-color: white;}
#nav {background-color:#006633; height: 60px;}
#secnav {background-color: #FF6600; text-align:center;}
#secnav ul{list-style: none;}
#secnav li{display:inline}
#secnav a {text-decoration: none; margin-left: 20px; font-size: 15px;}
#content{height: 100px; background-color:white;}
#footer {clear: both; background-color: #1d1d1d; height:100px; border-top-color:#CC9900; border-top-style:solid; border-top:4px}
#footer p {text-align: center; color:#999999;}
#footer a {color: #dfdfdf; font-size: 9px; margin-left: 8px; text-decoration: none;}
#footer a:hover {color: #990000}
I'm wanting to get the, what should be, easy secondary nav bar working.
My site: www.jonpaulwild.co.uk
Problems:
1) I'm trying to vertically and horizantally align any links that appear in the orange sec nav bar. At the moment when I try anything nothing works. Horizantally it's not perfectly aligned, and nothing works when I try and vertically align the links. The orange bar I'd like to be around 40 or so pixels with the text/links in the middle.
2) There's gaps to the top and bottom of the orange secnav bar, and I don't know why.
3) There's also a gap between the white content area and the footer
I have no idea if it's the html or css, please can anyone help.
<!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="/test.html">Link One</a></li>
<li><a href="/test2.html">Link Two</a></li>
<li><a href="/test3.html">Link Three</a></li>
</ul>
</div>
<div id="content"></div>
<div id="footer"><p><a href="test.co.uk" title="sitemap">Site Map</a>
<p><b>© Copyright 2009test (UK) Ltd - Designed By test</b></p></p></div><!--end footer -->
</div> <!--end wrapper -->
</body>
</html>
@charset "utf-8";
/* CSS Document */
html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
body {background-color: #333333}
#wrapper {margin: 0 auto; position: relative; width: 100%;}
#header {height: 100px; background-color: white;}
#nav {background-color:#006633; height: 60px;}
#secnav {background-color: #FF6600; text-align:center;}
#secnav ul{list-style: none;}
#secnav li{display:inline}
#secnav a {text-decoration: none; margin-left: 20px; font-size: 15px;}
#content{height: 100px; background-color:white;}
#footer {clear: both; background-color: #1d1d1d; height:100px; border-top-color:#CC9900; border-top-style:solid; border-top:4px}
#footer p {text-align: center; color:#999999;}
#footer a {color: #dfdfdf; font-size: 9px; margin-left: 8px; text-decoration: none;}
#footer a:hover {color: #990000}