Zero Angel
12-01-2002, 05:41 PM
Okay, so I was going for DC Elliots table less design scheme, and I ran into some problems. N'yetscape 6 stacks elements in an odd fashion, but Internet Exploiter renders it fine.
Where did I go wrong?
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<style type="text/css">
<!--
body { background: #888888; color: #000000; }
#mainbody { background: #cccccc; border: solid 1px #000000; }
#banner { width: 100%; background: #000000; padding: 0px; }
#banleft { float: left; text-align: left; }
#banright { float: right; text-align: right; }
#titlebar { width: 100%; background: #aaaaaa; padding: 0px; font-size: 12px;
border-bottom: 1px solid #000000; }
#titleleft { float: left; text-align: left; font-weight: bold; padding-left: 3px; }
#titleright { float: right; text-align: right; padding-right: 3px; }
#mainarea { width: 100%; }
#tocleft { float: left; text-align: left; width: 130px; background: #aaa;
line-height: 120%; font-weight: bold; font-size: 14px; margin: 4px;
border: solid 1px #000000; }
#content { float: right; text-align: left; padding: 5px; font-size: 80%; }
#footer { background: #aaaaaa; border-top: 1px solid #000000; text-align: right;
font-size: 12px; padding-right: 3px; }
#tocleft a { text-decoration: none; color: #444444; display: block; width: 100%;
padding: 2px,2px,2px,2px; margin: 0px; }
#tocleft a:hover { text-decoration: none; color: #000000; display: block; width: 100%;
padding: 2px,2px,2px,2px; margin: 0px; }
-->
</style>
</head>
<body bgcolor="#808080" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<div id="mainbody">
<div id="banner">
<span id="banleft">
x
</span>
<span id="banright">
<img src="http://www.battlezonegame.com/~zeroangel/images/hzaban.jpg"></span>
</div>
<div id="titlebar">
<span id="titleleft">
Home Page
</span>
<span id="titleright">
This is a page where I test stuff out.
</span>
</div>
<div id="mainarea">
<div id="tocleft">
<a href="#">Home</a><br>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
</div>
<div id="content">
<h2>Filler Text</h2>
<p>The ACRONYM and ABBR tags are useful, if little used, tags that use the TITLE attribute to
expand the acronym or abbreviation. Most current browsers do nothing to
alert your site visitors that there is anything behind the words on the page that can help
them make sense of the abbreviation or acronym. Enter CSS.</p>
<p>In your style sheet you can add a bottom border to those tags to draw attention to them on the page.
You can also use CSS to change the cursor into a "Help" cursor (usually a question mark) for those
browsers that support it. And you aren't limited to HTML tags.
Create a class called .help and use SPANs to give more information about words or phrases that your
readers might be confused by. </p>
</div>
</div>
<div id="footer">
Web Design © 2002 David Bobb
</div>
</div>
</body>
</html>
This is a *very* preliminary test page, so there may be a few minor flaws in the code (doctype and such).
Where did I go wrong?
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<style type="text/css">
<!--
body { background: #888888; color: #000000; }
#mainbody { background: #cccccc; border: solid 1px #000000; }
#banner { width: 100%; background: #000000; padding: 0px; }
#banleft { float: left; text-align: left; }
#banright { float: right; text-align: right; }
#titlebar { width: 100%; background: #aaaaaa; padding: 0px; font-size: 12px;
border-bottom: 1px solid #000000; }
#titleleft { float: left; text-align: left; font-weight: bold; padding-left: 3px; }
#titleright { float: right; text-align: right; padding-right: 3px; }
#mainarea { width: 100%; }
#tocleft { float: left; text-align: left; width: 130px; background: #aaa;
line-height: 120%; font-weight: bold; font-size: 14px; margin: 4px;
border: solid 1px #000000; }
#content { float: right; text-align: left; padding: 5px; font-size: 80%; }
#footer { background: #aaaaaa; border-top: 1px solid #000000; text-align: right;
font-size: 12px; padding-right: 3px; }
#tocleft a { text-decoration: none; color: #444444; display: block; width: 100%;
padding: 2px,2px,2px,2px; margin: 0px; }
#tocleft a:hover { text-decoration: none; color: #000000; display: block; width: 100%;
padding: 2px,2px,2px,2px; margin: 0px; }
-->
</style>
</head>
<body bgcolor="#808080" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<div id="mainbody">
<div id="banner">
<span id="banleft">
x
</span>
<span id="banright">
<img src="http://www.battlezonegame.com/~zeroangel/images/hzaban.jpg"></span>
</div>
<div id="titlebar">
<span id="titleleft">
Home Page
</span>
<span id="titleright">
This is a page where I test stuff out.
</span>
</div>
<div id="mainarea">
<div id="tocleft">
<a href="#">Home</a><br>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
<a href="#">Test Link</a>
</div>
<div id="content">
<h2>Filler Text</h2>
<p>The ACRONYM and ABBR tags are useful, if little used, tags that use the TITLE attribute to
expand the acronym or abbreviation. Most current browsers do nothing to
alert your site visitors that there is anything behind the words on the page that can help
them make sense of the abbreviation or acronym. Enter CSS.</p>
<p>In your style sheet you can add a bottom border to those tags to draw attention to them on the page.
You can also use CSS to change the cursor into a "Help" cursor (usually a question mark) for those
browsers that support it. And you aren't limited to HTML tags.
Create a class called .help and use SPANs to give more information about words or phrases that your
readers might be confused by. </p>
</div>
</div>
<div id="footer">
Web Design © 2002 David Bobb
</div>
</div>
</body>
</html>
This is a *very* preliminary test page, so there may be a few minor flaws in the code (doctype and such).