Thu, 2004-07-29 18:38
Hi:
I am currently building a template for a new site with css based design.
Wondering if some of you could have a look and tell me if I have made any big errors or if you have any suggestions for making it better.
The link: http://www.plaidheart.com/Kees%20New/
(The code is below)
I have validated the html and the css, both are fine so far.
The specs:
1) I am using a dhtml drop down menu for nav, mostly because I don't feel 100% confident yet with css versions. I added a noscript for people who don't have javascript enabled browsers, which contains a text-based link to the site map. There will eventually be text-based links at the bottom of the page as well.
2) I am using external style sheet and some javascript and SSI's. The kb of the various files are:
css: 2kb
javascripts: 23kb and 8kb
bg image: 8kb
extra image: 10kb
SSI's: 3kb, 1kb, 1kb, 1kb
does that seem reasonable for a fast loading page?
here's the code:
/* basic elements */
body {
font: 11px/13px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
background: url(../images/misc/body_bg3.gif) no-repeat;
}
p {
font: 11px/13px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-top: 0px;
margin-bottom: 16px;
text-align: left;
}
h1 {
font: normal 20px/23px verdana, Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-bottom: 0px;
color: #F30100;
text-indent: 22px
}
h3 {
font: bold 14px/16px verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: normal;
text-decoration: none;
color: #62A5CE;
}
a:visited {
font-weight: normal;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #8EC450;
}
a:active {
text-decoration: none;
color: #62A5CE;
}
/* specific divs */
#container {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#column1{
position: absolute;
top: 79px;
left: 286px;
width: 380px;
}
#leftcolumn{
position: absolute;
top: 264px;
left: 39px;
width: 180px;
}
#leftcolumn p{
font: 10px/17px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: italic;
margin-bottom: 21px;
color: #000000;
}
#rightcolumn{
position: absolute;
top: 137px;
left: 740px;
width: 190px;
}
#rightcolumn p{
font: 10px/12px Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
margin-bottom: 0px;
color: #000000;
}
#menu{
position:absolute;
top: 11px;
left: 310px;
width: 400px;
}
#footer {
font: 10px/15px Verdana, Arial, Helvetica, sans-serif;
margin: 585px 0px 0px 0px;
text-align: center;
color: #999999;
}
here's the 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="css/kees.css" rel="stylesheet" type="text/css"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<title> Title </title>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="menu">
<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='js/exmplmenu_var.js'></script>
<script type='text/javascript' src='js/menu_com.js'></script>
<noscript>
Your browser does not support script, please enable javascript and reload the page,
or go to the <a href="index.php">site map </a>for navigation.
</noscript>
</div>
<div id="column1">
<h1>welcome</h1>
<p>Kee means <a href="../test.php">"Foundation"</a> in Korean. In
the Korean tradition each person's name consists of three parts - the family
name, the generational name shared by all brothers and sisters of a family,
and a given name. Kee is the generational name that Grand Master Kee S. Ha
from Saskatoon and Grand Master Kee Ha from Vancouver share.</p>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<p>"Tae Kwon" literally translates as "hand and foot" and
"Do" is the life way that leads to value and harmony though daily
practice. When Grand Master Kee S. Ha established the first Kee's Tae Kwon
Do in Saskatoon, he chose to use the generational name because of the link
to his family and because of the symbolism of the word "Foundation".When
Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation". </p>
</div>
<div id="leftcolumn">
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism.</p>
<p><img src="images/misc/pic1.jpg" alt="kees" width="176" height="199" /></p>
</div>
<div id="rightcolumn">
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the...</p>
</div>
<div id="footer">
<a href="#top">Top of Page</a>
</div>
</div>
</body>
</html>
thanks much!
moonboy
Thu, 2004-07-29 21:21
#1
Site check: please have a look
Good clean layout, it loads quickly on a 56k connection, file sizes nice and lean just a shame about the Javascript size, 23k, quite a jump
The only thing that bothers me is the top menu it feels a bit light at the top of the page as if it's missing a header block to stabalise the page (if that makes sense) and maybe something to define/devide the two main text areas? otherwise it all seems nicely executed and compliant!! 
Hugo.
p.s if you wanted you could slim the css down a little loosing some of the font-family decs.
Thu, 2004-07-29 22:12
#2
Site check: please have a look
thanks for the feedback.
I hear what you are saying about the header, though I was mostly concerned with the technical aspects of the design. I'm working on this project in conjunction with the graphic designer who's doing the logo, but I'll mention that to her.
When you refer to the font family decs, do you mean I should just put verdana as opposed to the whole family, or do you mean only have it referred to in, say body and p?
re: defining/dividing the main text areas, currently there is the line between the left column and center column (which is part of the body bg), beyond that what would your ideas be to do this?
thanks,
moonboy
Thu, 2004-07-29 23:22
#3
Site check: please have a look
It's looking very nice...I have similar comments.
You really only need to declare the font-family in your body tags, unless of course you want the font of a certain paragraph or header to be different, then that will need to be specified. Also, you have css like this:
#container {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
That could be shortened to just this:
#container {
padding: 0;
margin: 0;
You don't need to specify the px if it's 0. 
I think the Nav bar up top would look nicer with more of a margin on top, i.e more space between it and the top of the page.
I don't mind the vertical line separating the 2 sides, but it does seem a bit heavy. I would suggest not using an image for the line, but instead specifying a border on one of your divs to achieve the same effect. But I would make it dashed or dotted in the black or a dark grey. Example:
#leftcolumn {
border-right: 1px dashed #000000; }
Thu, 2004-07-29 23:25
#4
Site check: please have a look
cool, thanks!
what would you suggest as a strategy for having a footer?
moonboy
Fri, 2004-07-30 20:36
#5
Site check: please have a look
#footer {
clear: left;
position: relative;
bottom: 0;
width: 100%;
}
Fri, 2004-07-30 20:44
#6
Site check: please have a look
I just tried that footer style, it puts the footer at the top left hand corner of the page...
any thought on why it's doing this?
thanks,
moonboy
Fri, 2004-07-30 21:57
#7
Site check: please have a look
Hmm, the link to your sample site doesn't seem to be working any longer.
It seems the footer should work fine if it's included at the bottom before the closing of the container div.
Fri, 2004-07-30 22:06
#8
Site check: please have a look
oops!
I posted it at a new location:
http://www.kees.ca/Kees_New/index.php
The live version doesn't have your footer code, I've just tried that locally so far, but here's how the code looks locally with your footer code:
btw, I've tried it in both IE and Firefox and they both come up in the top left. The footer div is contained in the container div, is this as it should be?
thanks,
moonboy
<!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="css/kees.css" rel="stylesheet" type="text/css"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Kees Tae Kwon Do Canada</title>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="menu">
<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='js/exmplmenu_var.js'></script>
<script type='text/javascript' src='js/menu_com.js'></script>
<noscript>
Your browser does not support script, please enable javascript and reload the page,
or go to the <a href="index.php">site map </a>for navigation.
</noscript>
</div>
<div id="column1">
<h1>welcome to kees tae kwon do </h1>
<p>Kee means <a href="../test.php">"Foundation"</a> in Korean. In
the Korean tradition each person's name consists of three parts - the family
name, the generational name shared by all brothers and sisters of a family,
and a given name. Kee is the generational name that Grand Master Kee S. Ha
from Saskatoon and Grand Master Kee Ha from Vancouver share.</p>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<p>"Tae Kwon" literally translates as "hand and foot" and
"Do" is the life way that leads to value and harmony though daily
practice. When Grand Master Kee S. Ha established the first Kee's Tae Kwon
Do in Saskatoon, he chose to use the generational name because of the link
to his family and because of the symbolism of the word "Foundation".When
Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation". </p>
</div>
<div id="rightcolumn">
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
<h3>sub head</h3>
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism of the word "Foundation".</p>
</div>
<div id="leftcolumn">
<p>When Grand Master Kee S. Ha established the first Kee's Tae Kwon Do in Saskatoon,
he chose to use the generational name because of the link to his family and
because of the symbolism.</p>
<p><img src="images/misc/pic1.jpg" alt="kees" width="176" height="199" /></p>
</div> <div id="footer">
<a href="#top">Top of Page</a>
</div>
</div>
</body>
</html>
Fri, 2004-07-30 22:58
#9
Site check: please have a look
Moonboy I'm afraid it's doing that because you have all of your main divs set as position absolute which means they are effectivly removed from the flow of the page and no longer effect objects around them setting the footer relative or static puts the div in the flow which happens to be the top as the others are not taking up space, originally you set a large top margin to force it to the bottom; as things stand your probably best of setting footer relative (allows the element to shift it's position) removing the margin and use top:620px; or thereabouts to bring it down ( it's recomended to use top/left to postion relative divs rather than right/bottom )
You could put the footer div at the top of the container or at the bottom it won't make much difference as you will still need to force a position for it you could try putting the div after the container div so it is in the body so to speak see how it behaves relative to the container.
This is why I don't favour using position absolute for layouts due to the way it breaks the flow of the page.
Hugo.
Fri, 2004-07-30 23:23
#10
Site check: please have a look
I usually set my container div as absolute then set position: relative on the inner divs if I need to position them that way.
Moonboy -
I'm liking the site much better with the shorter, lighter border between the two sections.
The footer could be as simple as a top border on the footer, or even a bar of the light grey color across the bottom. It's also usually standard to include the copyright info in the footer.
Btw, don't forget to add a title to your page!
Sat, 2004-07-31 17:07
#11
Site check: please have a look
can you give me an example of setting the container div as abaolute?
and does this mean that I will need to set all of the other divs inside it as relative?
yes, I will certainly be adding titles and meta tags later, this is just the template...
on a side note, what meta tags are you currently using? Personally I just use keywords and description, though I'm considering things like robot, index, copyright etc.
thanks,
moonboy
Sat, 2004-07-31 17:44
#12
Site check: please have a look
I just tried taking the footer div outside the container to see what effect that would have. It works until I have a page where the main, middle column, flows down below the viewport, then it just goes right over the footer info...
moonboy
Sat, 2004-07-31 18:14
#13
Site check: please have a look
All I can think of is try setting it to either absolute or relative and see what happens. It's all a bit trial and error.
If you take it outside the container, it should align it flush with the bottom of the page.
Sat, 2004-07-31 23:15
#14
Site check: please have a look
moonboy wrote:
can you give me an example of setting the container div as abaolute? and does this mean that I will need to set all of the other divs inside it as relative? on a side note, what meta tags are you currently using? Personally I just use keywords and description, though I'm considering things like robot, index, copyright etc.
Simply
#container {
position: absolute; }
No, you shouldn't have to set all of them as relative.
This is what I use at the top pf my html pages:
<title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="all" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" />
Sun, 2004-08-01 18:26
#15
Site check: please have a look
with that container div set as absolute, do I also need to set parameters for margins and padding?
also, when you create a relative positioned div, are there certain minimum attributes, like width etc?
thanks, I really appreciate the help!
moonboy