h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

Basically as far as I can tell, the first div tag you have defined in the css styles is by default top, and left. You can change this though, either by absolute positioning or relative positioning, or... another kind which is better at tehn dealing with differnt resolutions screen sizes etc.

I have some trubble working oute the layout of course myself as JAWS rearranges things somewhat on teh screen ...

::
#container
{
width: 90%;
margin: 10px auto;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#header {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#header h1
{
padding: 0;
margin: 0;
}

#header h2
{
padding: 0;
margin: 0;
}

#leftnavigation {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content {
margin: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}


Is wehre my CSS lurks at the moment....

The idea of the 'container div tag, is that you can define any attributes in this section, like font, colour etc., which will then be carried forward, cascade, into subsiquent divs, unless you redefine the same attritube in a later div....

The
navigation div is for a left navigation bar; with the html having a list of the links for hthere, and I think* if you put a set of links in the HTML after the the header DIV then this would be like a list going accross the screen at the top....

Ta. I am slowly getting there and and have learned a hell of a lot today, through trial and error.

This is my style sheet at the moment. They don't half grow quick!

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}


body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-color: black;
}

td {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-color: black;

}

th {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-color: black;
}


ul-line
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

banner {
position : static;
height : 175px;
top : 01%;
width : 90%;
margin : 0px 0px 0px 10px;
color : #000000;
padding : 3px;
overflow : auto;
left: 50%;
border-color: #CC0000;
border-width: 2px;
}

.banner a
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
float:inherit;
width:6em;
text-decoration:none;
color:white;
background-color:#CC3333;
padding:0.2em 0.6em;
border-right:1px solid white;
padding-top: 0.3em;
padding-right: 0.6em;
padding-bottom: 0.3em;
padding-left: 0.6em;
}
a:hover {background-color:#cccccc}
li {display:inline}

.leftborder a
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
float:left;
width:11em;
text-decoration:none;
text-align:center;
color:white;
background-color:#CC3333;
border-bottom:2px #CCCCCC;
border-right:1px #CCCCCC;
margin-top: 2px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 1px;
padding-top: 0.3em;
padding-right: 0.6em;
padding-bottom: 0.3em;
padding-left: 0.6em;
}

.leftborder a:hover
{
background-color:#cccccc;
border-bottom:1px white;
border-right:1px white;
}

#fpbodyleft {
position : absolute;
height : 400px;
top : 341px;
left : 5%;
width : 40%;
margin : 5px 0px 0px 10px;
color : #000000;
padding : 3px;
overflow : auto;
right: auto;
}

#fpbodyright {
position : absolute;
height : 400px;
top : 341px;
right : 5%;
width : 40%;
margin : 5px 0px 0px 10px;
color : #000000;
padding : 3px;
overflow : auto;
left: auto;
}

.rss a
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-color: black;

}
.bannerdiv {
height: 222px;
left: 28px;
top: 0px;
}

.content {
align: justify;
overflow:auto;
padding-right: 10px;
}

#frontpagetext {
width: 70%;
margin: 0px 0px 0px 10px;
color: #000000;
float: none;
position: absolute;
top: 179px;
left: 15%;
align: justify;
height: 175px;
}

#forumfeed {
width: 90%;
margin: 0px 0px 0px 10px;
color: #000000;
float: none;
position: absolute;
top: 700px;
left: 48px;
align: justify;

}

I really should be quite worried that until a few days ago that would have been utterly meaningless... and now it all makes some* kind of sense

Still not really sure what all the padding stuf fis about... but then I don't relaly get* visual layout of webpages