Hi all,
I'm a complete newbie to CSS and HTML, so this could be a very obvious solution.
I've pulled most of this from different tutorials I've found online. I'm trying to get the website to be 780 pixels wide and in the centre of the page, and also to get the four boxes of layout to work within that. Even when I began on Dreamweaver the main box doesn't sit where it's supposed to (next to the sidebar and below the header, instead it sits below the sidebar) but it's worked before on IE and Firefox. Now once I started trying to make the whole lot smaller I've got it working in Dreamweaver (except the main box is still below the sidebar), but in IE and firefox it isn't centred or small or black.
Here's the CSS:
BODY { background-color: #999999;
font-family: Georgia, "Times New Roman",
Times, serif;
color: white;
font-size: larger;
}
#wrapper {
width:780px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:0px;
text-align:left;
background-color: black;
}
#header {
position: fixed;
width: auto;
height: 241px;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 241px;
right: auto;
bottom: 2em;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 300px;
right: 0;
bottom: 2em;
left: 10em;
}
#footer {
position: fixed;
height: 2em;
top: auto;
right: 0;
bottom: 0;
left: 0;
font-size:smaller;
}
ul.navbar li {
background: #FF3399;
margin: 0.5em 0;
padding: 0.3em;
text-decoration: none }
ul.navbar
a:link {
color: #33CCFF; text-decoration: none }
a:visited {
color: #660066; text-decoration: none }
a:hover { color: #000099 }
h1 {font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
color: #FF00CC}
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; padding:1em }
And here's the HTML:
<!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>Lasseter Rover Crew</title>
<link rel="stylesheet" type="text/css" href="lasseter2.css" />
</head>
<body>
<div id="wrapper">
<div id="header"><center><img src="LRC.jpg" width="780" height="241" />
</center></div>
<div id="sidebar">
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a heref="rovers.html">Rovers Explained</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
<div id="main">
<center><h1>Hello</h1></center>
<p>Some stuff about the Crew</p>
<br />
<p>And more stuff. </p>
</div>
<div id="footer">
<p>Last updated 18/10/08</p></div>
</div>
</body>
</html>
It's not exactly a fascinating website yet, I know :P
Thanks for all your help!
Cheers
Cat