Hi, I'm currently working on a new site for myself, I have done CSS in the past, but have been away from it for a while, so I thought I would try something new and work with the container div class.
I set up my container and basic page formatting, which was fine, and then added some inline navigation to the top of the container, which seemed to work fine, but some of the tags don't seem to be working at all, for example, adding padding to the navigation has no effect.
Anyway, my question is this, have I screwed something up in my CSS file, or maybe the HTML?
Any help would be much appreciated, many thanks in advance!
CODE
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>:: My Website ::</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div class="container">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Blog</a></li>
<li><a href="index.html">Forum</a></li>
</ul>
</div>
<div id="content">
This is some content.
</div>
<div id="footer">
Site coded and designed by Dean Hollstrom © 2007.
</div>
</div>
</body>
</html>
CODE
/* CSS Document */
/* Main font and color for page*/
p
{
font-family: calibri;
}
background
{
}
/* list styles for the navigation menu and links */
a:link
{
text-decoration: none;
color: #000000;
font-family: calibri;
}
a:visited
{
text-decoration:;
}
a:hover
{
text-decoration: underline;
}
a:active
{
}
ul
{
background: #99CCCC;
list-style-type: none;
width: auto;
height: inherit;
margin: 0px;
padding: 0px;
}
li
{
text-align: center;
font-size: 15px;
width: auto;
margin: 0px;
padding: 0px;
display: inline;
}
/* Main div elment and class styles */
.container
{
width: 800px;
height: 1000px;
padding: 0px;
border: 1px solid #000000;
margin: 0px auto;
}
nav
{
border-bottom: 1px solid #000000;
height: 200px;
margin: 0px auto;
padding: 3px;
}
content
{
float:right;
overflow: auto;
height: 100%;
width: 200px;
padding: 5px;
}
footer
{
background: #FFFFFF;
clear: both;
text-align: center;
width: auto;
height: 30px;
border-top: 1px solid #000000;
}
| 