Member Avatar for Cat-Eyes

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

  • 5 Contributors
  • 5 Replies
  • 90 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ferman786
Member Avatar for wickedsunny

ok buddy here u go. what required was that u needed to use a float style tag in the side bar style. im posting the whole code check it out and ur thread is solved :)

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 {
        width: 10em;
		height:auto;
		float:left;
       
      }
      #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; width:100px }
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 }

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="Copy of style.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>
Member Avatar for tefflox

Also works, place the #main div above the #sidebar and set "float: right" for the main on the right, sidebar on the left.

I recommend viewing the http://w3schools.com tutorials to learn styling. It's worth it.

Member Avatar for Cat-Eyes

Thanks for your help. The float in the sidebar has fixed it in Dreamweaver, but not in IE or firefox. Now in the browsers the sidebar sits under the header, and the main section is below without a black background and with no restrictions. I've tried floating the wrapper (it put everything on the left in Dreamweaver and the side bar on the left in firefox); as well as the header (nothing); and floating the main bit right (nothing). It looks perfectly fine in Dreamweaver, but doesn't work in IE or firefox.

Any more ideas?

Thanks again for your help!

Member Avatar for MidiMagic

W3C and Firefox don't accept styles with units of measure attached to 0 values. So instead of 0px, just put 0. This causes some of your styles to be thrown away.

There is no way to center content vertically on the screen that works on all browsers and screen resolutions.

Go to the W3C site and validate your code.

Member Avatar for ferman786 
#wrapper {
        width:780px;
        margin-left:auto;
        margin-right:auto;
        margin-top:10px;
        padding:0px;
        text-align:left;
        background-color: black;
}

in margin you can also short down the code

you can code like this

margin: 0 auto:
width: 780;

it will center your main div

Edited by Dani because: Formatting fixed
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.