Site check: please have a look

15 replies [Last post]

Thu, 2004-07-29 18:38

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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>

<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>

<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

Tags:

Site Checks

Thu, 2004-07-29 21:21

Hugo

Offline

Moderator

London

Last seen: 6 years 14 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Thu, 2004-07-29 22:12

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

meashman

Offline

Regular

Last seen: 17 years 20 weeks ago

Timezone: GMT-5

Joined: 2003-11-26

Posts: 12

Points: 0

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

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

thepineapplehead

Offline

Guru

Last seen: 3 weeks 5 days ago

Joined: 2004-06-30

Posts: 9674

Points: 810

Site check: please have a look

#footer {
clear: left;
position: relative;
bottom: 0;
width: 100%;
}

Verschwindende wrote:

CSS doesn't make pies

Fri, 2004-07-30 20:44

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

meashman

Offline

Regular

Last seen: 17 years 20 weeks ago

Timezone: GMT-5

Joined: 2003-11-26

Posts: 12

Points: 0

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

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

</head>

<body>

</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>

</div>

</body>
</html>

Fri, 2004-07-30 22:58

Hugo

Offline

Moderator

London

Last seen: 6 years 14 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

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

meashman

Offline

Regular

Last seen: 17 years 20 weeks ago

Timezone: GMT-5

Joined: 2003-11-26

Posts: 12

Points: 0

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

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

thepineapplehead

Offline

Guru

Last seen: 3 weeks 5 days ago

Joined: 2004-06-30

Posts: 9674

Points: 810

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.

Verschwindende wrote:

CSS doesn't make pies

Sat, 2004-07-31 23:15

#14

meashman

Offline

Regular

Last seen: 17 years 20 weeks ago

Timezone: GMT-5

Joined: 2003-11-26

Posts: 12

Points: 0

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

moonboy

Offline

Regular

Last seen: 16 years 42 weeks ago

Joined: 2004-06-24

Posts: 22

Points: 0

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

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

Site check: please have a look

User login

Navigation