No replies
moonboy
Offline
Regular
Last seen: 15 years 21 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

Hi:

I'm wondering if some of you could have a look at my code below and see if any errors stand out...

I've created a css file based on the zengarden file. It's pretty much comprised of all absolutely positioned divs, so when the screen is re-sized, the content will stay the same. I've got 3 divs in the header, one for the footer, and 2 or 3 for the main copy.

here's the code:

CSS

filename: chs.css

/* basic elements */
body {
font: 8pt/16pt georgia;
color: #555753;
margin: 0px;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: normal 14pt verdana;
letter-spacing: 0px;
line-height: 25px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: italic normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #7D775C;
}
a:link {
font-weight: normal;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: normal;
text-decoration: none;
color: #D4CDDC;
}
a:hover {
text-decoration: none;
color: #9685BA;
}
a:active {
text-decoration: none;
color: #9685BA;
}
.searchfield {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
line-height: 10pt;
background-color: #63A6D1;
border: 1px solid #568EBF;
height: 12px;
color: #000000;
width: 107px;
}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
line-height: 10pt;
background-color: #63A6D1;
border: 1px solid #568EBF;
color: #333333;
height: 16px;
width: 45px;
}

/* specific divs */
#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0px 150px 0px 150px;
margin: 0px;
}
#header {
padding: 0px 0px 0px 0px;
margin: 0px;
width: 505px;
}
#header_col_2 {
position: absolute;
top: 0px;
right: 20px;
left: 690px;
margin-bottom: 0px;
width: 160px;
height: 55px;
}
#header_col_3 {
position: absolute;
top: 93px;
right: 20px;
left: 690px;
margin-bottom: 0px;
width: 160px;
height: 55px;
}
#header_col_4 {
position: absolute;
top: 123px;
right: 20px;
left: 690px;
margin-bottom: 0px;
width: 160px;
height: 55px;
}
#column1{
padding-left: 0px;
margin: 20px 0px 10px 0px;
width: 425px;
}
#column2{
position: absolute;
top: 203px;
left: 690px;
right: 20px;
margin-bottom: 0px;
width: 160px;
}
#menu {
font-family: "Courier New", Courier, mono;
text-align: left;
font-size: 10pt;
line-height: 12pt;
width: 500px;
color:#568EBF;
}
#menu a:link {
font-family: "Courier New", Courier, mono;
font-weight: normal;
font-size: 10pt;
color: #568EBF;
}
#menu a:visited {
font-family: "Courier New", Courier, mono;
font-weight: normal;
text-decoration: none;
font-size: 10pt;
color: #568EBF;
}
#menu a:hover {
color: #999999;
}
#menu a:active {
font-weight: normal;
text-decoration: none;
color: #568EBF;
}
#footer {
text-align: center;
color: #999999;
}
#footer a:link {
font-family: "Courier New", Courier, mono;
font-weight: normal;
text-decoration: none;
font-size: 11px;
line-height: 13px;
color: #999999;
}
#footer a:visited {
font-family: "Courier New", Courier, mono;
font-weight: normal;
text-decoration: none;
color: #CCCCCC;
}
#footer a:hover {
color: #333333;
}
#footer a:active {
color: #999999;
}

and sample html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="chs.css" rel="stylesheet" type="text/css"/>

<TITLE> Test</TITLE>
</HEAD>

<body>
<A NAME="top"></A>
<div id="container">

<div id="header"><img src="../images/masthead2.jpg" width="505" height="111"></div>

<div id="header_col_2"><img src="../images/misc/contest.gif" width="160" height="55"></div>
<div id="header_col_3"><img src="../images/misc/summer_2004.gif" width="160" height="19">
</div>

<div id="header_col_4">
<form method="GET" action="../search/search.asp">
<input type="text" name="zoom_query" class="searchfield">
<input type="submit" class="button" value="Search">
</form>
</div>

<div id="menu"> <a href="../index.html">home</a>| <a href="../features/index_features.html">
features</a> | <a href="../columns/index_columns.html">columns</a> | <a href="../news/index_news.html">news</a>&nbsp;|
<a href="../radio/index_radio.html"> healthstyle radio</a> | <a href="../misc/ask_us.html">ask
us</a> <a href="../astrology/astro.html">astrology</a> | <a href="../subscribe/index_subscribe.html">
subscribe&nbsp;|&nbsp;</a><a href="../resources/index_resources.html">resources</a>&nbsp;|
<a href="../archives/index_archives.html">archives</a> | <a href="../contact/contact_us.html">contact
us</a> </div>

<div id="column1">
<img src="../images/Column_headers/toothbrush_head.gif">
<p>It’s the germy truth: most people buy less than one toothbrush every
12 months and, despite the recommendations made by dentists, they are reluctant
to replace their brushes more frequently. In fact, most do not change their
toothbrushes following their dental appointments—even when their dentists
give them new brushes.</p>
<p>Yet the literature is replete with articles showing that toothbrushes can be
reservoirs for bacteria as well as sources of inoculation or re-introduction
of bacteria from infected to non-infected tissues. Cavity-causing bacteria can
also be transmitted via toothbrushes, thus increasing the incidence of dental
caries—especially in children. This means of transmission is of great
importance in a country such as Brazil, where communal toothbrush use is very
common, especially in low-income families.</p>
<p>So how often should you change your brush? The Canadian Dental Association
recommends a change of toothbrushes every three months. Some researchers recommend
healthy patients replace their toothbrushes every two weeks and that patients
who are sick change their toothbrushes at the beginning of an illness, when
they first feel better and again when they are completely well. Some also recommend
that chemotherapy or immuno-suppressed patients should change their toothbrushes
every three days, while persons submitted to major surgery should change their
toothbrushes every day. I believe changing your brush every day is a bit extreme
and don’t personally subscribe to that philosophy, nor do I recommend
that to my patients.</p>
<p>Instead, I suggest you consider discussing the issue with your own dentist.
I do agree that toothbrushes should be changed frequently by those who have
severe oral diseases, or who are undergoing cancer chemotherapy, cardiac surgery
or organ transplantation.</p>
<h1>Other Relevant Info</h1>
<p>Other relevant questions often arise such as: Where do I store my toothbrush?
Should it be in the bedroom, the bathroom (the most contaminated room in the
house), the desk drawer or your purse? </p>
<p>I suggest the bathroom. It may or may not surprise you that you shouldn’t
store your toothbrush in a desk drawer or your purse. Neither are hygienic options:
temperatures are often higher in these areas and would promote the growth of
organisms on your brush. Let’s try to keep all the contamination in one
place and not spread it around.</p>
<p>It’s apparent that the present toothbrushes, which were basically designed
about the time of the signing of the <em>Magna Carta</em>, need to be re-evaluated.
The function of these hygienic devices needs to be balanced with their ability
to resist infection. </p></div>
<div id="column2"> <img src="../images/Ads/AbFab_4.gif" width="160" height="160" hspace="0" vspace="0">&nbsp;

<p>We must not forget one important factor in this whole equation—one no
one seems to be addressing. That is, the use of toothpaste with a strong cleansing
agent or with stannous fluoride, seems an easy and efficient way of decontaminating
toothbrushes. Establishing an easy and effective method for disinfecting toothbrushes
is an important and economical way to prevent the continuation or re-infection
of oral diseases. </p>
<p>The image of the toothbrush needs to be changed from a “lifelong friend”
to that of a hygienic device needing replacement at very regular and frequent
intervals.</p>
</div>

<p><a href="#top">Top of Page</a> </p>

<div id="footer">
<a href="../misc/disclaimer.html" class="footlinks">disclaimer</a> | <a href="../misc/site_credits.html" class="footlinks">site
credits</a> | <a href="../advertising/index.html" class="footlinks">advertising</a>
| <a href="../employment/index_employment.html">employment opportunities</a> </div>


</div>

</body>
</html>

thanks much,

moonboy