OK I've taken the first small step into CSS by tring to convert my index page of my website into something that looks exactly the same but without any tables and a lot of css.
And I've almost cracked it. I thought that my only problem was to centre the content and make the bgcolour for if #00c, (which I need help with by the way), but as it turns out when I view it in Netscape 7.02 everything is out of place and I don't know why, I specified exact pixel measurements for everything so can anybody help please.
If I've done anything wrong or some code could be improved in someway please tell me.
Here's the source (it's also attached to this message as a text document):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<style>
a{color:#c0c;}
body{background-color:#f00;margin:0;padding:0;}
div{align:middle;}
h1{color:#f90;font:12pt"verdana","ms sans serif";font-weight:bold;text-align:left;position:absolute;left:312px;}
hr{position:absolute;left:5px;width:610px;}
img{border:0;}
</style>
<title>Prejudiced Against Everyone</title>
</head>
<body>
<div style="position:absolute;top:5px;"><img style="position:absolute;left:54px;" src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" /></div>
<div style="position:absolute;top:41px;"><hr></div>
<div style="position:absolute;top:46px;">
<img style="position:absolute;top:2px;left:193px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif" border="0" width="115" height="76" title="Image 1" alt="Image 1" />
<h1>Prejudiced Against Everyone<br />is an official winner of<br />a golden web award!!!</h1>
</div>
<div style="position:absolute;top:127px;">
<img style="position:absolute;top:2px;left:231px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" border="0" width="77" height="113" title="Image 2" alt="Image 2" />
<h1>You mere mortals can help me<br />win another award by clicking<br />on the picture opposite and in<br />the new window that opens<br />pressing vote.</h1>
</div>
<div style="position:absolute;top:247px;"><hr></div>
<div style="position:absolute;top:252px;"><h1 style="position:absolute;left:8px;">Do you want to see some proper Prejudiced Against Everyone jokes?</h1></div>
<div style="position:absolute;top:285px;">
<form name='where' style="position:absolute;left:155px;">
<input name='yes' type='button' value='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yes, show me the good stuff.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'><br>
<input name='no' type='button' value='&nbsp;&nbsp;&nbsp;No, show me some clean jokes.&nbsp;&nbsp;&nbsp;'><br>
<input name='how' type='button' value='How did I get here? Send me back.'>
</form>
</div>
<div style="position:absolute;top:362px;"><hr></div>
<div style="position:absolute;top:367px;">
<img style="position:absolute;top:2;left:5px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image 3" title="Image 3" alt="Image 3" border="0" width="88" height="31" />
<div style="position:absolute;left:98px;">
<h1 style="position:absolute;top:0px;left:55px;">Main Page | This Weeks Jokes | Previous Jokes</h1>
<h1 style="position:absolute;top:19px;left:51px;">Contact Me | Enter A Joke | Links To Other Sites</h1>
</div>
</div>
</body></html>You do not need to position the images or headers as they are positioned using the div tag. Also there is no "left" positioning given for the divs.
So this:
<div style="position:absolute;top:5px;"><img style="position:absolute;left:54px;" src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" /></div>
Should really be this:
<div style="position:absolute; top:5px; left:54px; width:512px; height:31px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" />
</div>
You might want to add the width and height of the image into the div as I've done above as well.As it happens after I posted this I realised that I didn't need the div tags for around the images or h1 or hr tags.
My problems now are how to centre an entire div tag and also how to get rid of the 9px gap that netscape 7.02 leaves above it's horizontal rules (or put one there in all other browsers and then give different measurements).
And I've almost cracked it. I thought that my only problem was to centre the content and make the bgcolour for if #00c, (which I need help with by the way), but as it turns out when I view it in Netscape 7.02 everything is out of place and I don't know why, I specified exact pixel measurements for everything so can anybody help please.
If I've done anything wrong or some code could be improved in someway please tell me.
Here's the source (it's also attached to this message as a text document):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<style>
a{color:#c0c;}
body{background-color:#f00;margin:0;padding:0;}
div{align:middle;}
h1{color:#f90;font:12pt"verdana","ms sans serif";font-weight:bold;text-align:left;position:absolute;left:312px;}
hr{position:absolute;left:5px;width:610px;}
img{border:0;}
</style>
<title>Prejudiced Against Everyone</title>
</head>
<body>
<div style="position:absolute;top:5px;"><img style="position:absolute;left:54px;" src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" /></div>
<div style="position:absolute;top:41px;"><hr></div>
<div style="position:absolute;top:46px;">
<img style="position:absolute;top:2px;left:193px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif" border="0" width="115" height="76" title="Image 1" alt="Image 1" />
<h1>Prejudiced Against Everyone<br />is an official winner of<br />a golden web award!!!</h1>
</div>
<div style="position:absolute;top:127px;">
<img style="position:absolute;top:2px;left:231px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" border="0" width="77" height="113" title="Image 2" alt="Image 2" />
<h1>You mere mortals can help me<br />win another award by clicking<br />on the picture opposite and in<br />the new window that opens<br />pressing vote.</h1>
</div>
<div style="position:absolute;top:247px;"><hr></div>
<div style="position:absolute;top:252px;"><h1 style="position:absolute;left:8px;">Do you want to see some proper Prejudiced Against Everyone jokes?</h1></div>
<div style="position:absolute;top:285px;">
<form name='where' style="position:absolute;left:155px;">
<input name='yes' type='button' value='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yes, show me the good stuff.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'><br>
<input name='no' type='button' value='&nbsp;&nbsp;&nbsp;No, show me some clean jokes.&nbsp;&nbsp;&nbsp;'><br>
<input name='how' type='button' value='How did I get here? Send me back.'>
</form>
</div>
<div style="position:absolute;top:362px;"><hr></div>
<div style="position:absolute;top:367px;">
<img style="position:absolute;top:2;left:5px;" src=http://www.webdeveloper.com/forum/archive/index.php/"image 3" title="Image 3" alt="Image 3" border="0" width="88" height="31" />
<div style="position:absolute;left:98px;">
<h1 style="position:absolute;top:0px;left:55px;">Main Page | This Weeks Jokes | Previous Jokes</h1>
<h1 style="position:absolute;top:19px;left:51px;">Contact Me | Enter A Joke | Links To Other Sites</h1>
</div>
</div>
</body></html>You do not need to position the images or headers as they are positioned using the div tag. Also there is no "left" positioning given for the divs.
So this:
<div style="position:absolute;top:5px;"><img style="position:absolute;left:54px;" src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" /></div>
Should really be this:
<div style="position:absolute; top:5px; left:54px; width:512px; height:31px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"animation1.gif" width="512" height="31" border="0" title="Animation 1" alt="Animation 1" />
</div>
You might want to add the width and height of the image into the div as I've done above as well.As it happens after I posted this I realised that I didn't need the div tags for around the images or h1 or hr tags.
My problems now are how to centre an entire div tag and also how to get rid of the 9px gap that netscape 7.02 leaves above it's horizontal rules (or put one there in all other browsers and then give different measurements).