critique my design please

[-={SoMe_GuY}=-]

well i have been posting css questions around this board for the past month or so, just trying to get the feel for it and all. i had an initial design that genmay worked the problems out for me pretty nicely. my initial design used some prebuilt templates and images that were free, especially for the menu. recently i tested my new knowledge and design abilities and created my own design, graphics, menu and all - and im looking for a critique on it.

my temp site, until i purchase the domain and move it over can be seen at http://etakappamu. tripod .com (remove spaces) most links are active to the same index.htm file in a different directory...some links (products and games) link to the old design index using the new body.css code and dont look nice at all. i will be fixing the look on these tomorrow or the next day, so dont really browse the menu.

im just trying to see what you think of the navigation menu and the general design. a few questions i have are:
a) do you think the content width is adequate. currently its at 625px with a max of 650px. i can extend the top image width to have a wider content section if necessary
b) is the top image height too much? its been a concern of mine but i dont really know because everybody is a harsh critic of their own work.

if you have anything else that you think i should change i am open to ideas. this is still a draft/final of the final design depending on how much i think i want to change.

code for index.htm for quick reference:

<link rel="stylesheet" type="text/css" href="http://etakappamu............/body.css">
<style type="text/css">
#centerspot1 {
	width: 625px;
	height: 600px;
	float: left;
	}	
</style>
<div id="main">
<div id="top"></div>
<div id="left">
	<div id="navpanel">
		<ul><font face="Georgia, Times New Roman, Times, serif">
    		<li><a href="http://etakappamu............" title="Home"><span>Home</span></a></li>

		    <li><a href="http://etakappamu............/games/" title="Games"><span>Games</span></a></li>
		    <li><a href="http://etakappamu............/organization/" title="Organization"><span>Organization</span></a></li>
	    	<li><a href="http://etakappamu............/products/" title="Products"><span>Products</span></a></li>
			<li><a href="http://etakappamu............/forums/" title="Forums"><span>Forums</span></a></li>
			<li><a href="http://etakappamu............/nightlife/" title="Night Life"><span>Night Life</span></a></li>
			<li><a href="http://etakappamu............/rants/" title="Rants and Raves"><span>Rants</span></a></li>

			<li><a href="http://etakappamu............/music/" title="Music"><span>Bands</span></a></li>
		    <li><a href="http://etakappamu............/drinks/" title="Drinks"><span>Drinks</span></a></li>
		    <li><a href="http://etakappamu............/support/" title="Support"><span>Support</span></a></li>
			<li><a href="http://etakappamu............/about/" title="About"><span>About Us</span></a></li>
	  </font></ul>
	</div>
</div>

<span id="centerspot1"></span></div>

code for body.css for quick reference:

#main {
	width: 800px;
	height: 1000px;
	float: left;
	}
#top {
	float: left;
	height: 173px;
	width: 800px;
	background-image: url(images/main/hkmtop.gif);
	clear:left;
	}
#left {
	float: left;
	height: 596px;
	width: 160px;
	background: url(images/main/hkmbottom.gif) no-repeat;
	}
#navpanel {
	margin-top: 10px;
	width:100%;
	height: 30px;
	}
	#navpanel ul {
	margin: 0px 0px 0px 0px;
	padding: 0;
	list-style:none;
	width: 150px;
	top: 0px;
	height: 30px;
	}
	#navpanel li {
	display:table;
	width: 150px;
	margin:0;
	padding:0;
	}
	#navpanel a {
	float:left;
    background:url(images/main/menuitem.gif) no-repeat left top;
    margin-top:2px;
	width: 150px;
    padding:0px 0px 0px 0px;
    text-decoration:none;
    }
	#navpanel a span {
	float:left;
    display:block;
    background:url(images/main/menuitem.gif) no-repeat right top;
    padding:5px 0px 5px 25px;
	font-family:Georgia, "Times New Roman", Times, serif;
    color:#fff;
    }
	#navpanel a span {float:none;}
	#navpanel a:hover span {
    color:#1B8CD7;
	/*font-weight:bold;*/
    }
	/*#navpanel a:hover {
    background-position:0% -42px;
    }
	#navpanel a:hover span {
    background-position:100% -42px;
    }*/

i have that last part of the navpanel commented out because i was testing and never deleted it

[goatrape]

honestly? it looks horrible.

and http://validator.w3.org/check?uri=ht..............%2F plz fix these.

you'll want to take away the margin in the css, and http://genmay.made2own.com

clean up the images a bit the nav is all jagged.

edit: lawlz no one like gaypod, anyway put your page through the validator on w3..

[-={SoMe_GuY}=-]

thanks for the tips...the design is still a draft and needs polishing which i know. the majority of the errors on the validator are triggered by, in your words, gaypods bad code with their banners and whatever else they run behind the scenes -- nothing i can do about that until i change hosting when i finish the design.

the only real error in my code what not having a doctype

and aside from the jagged lines what is so horrible about it? and which margin are you refering to as far as removing it?

[Gunstar]

it looks like something that cheap website making programs cough out. It's pretty basic looking and I'm not liking the design. Put the site to the left and top of the window but since that tripod banner is there, I'll let you off the hook there. The banner is awful and the nav graphics could do with some work on it too.

[-={SoMe_GuY}=-]

the final design will be in the top left of the page once i am free of the tripod inserted code.

gunstar -- by banner im assuming you mean the top logo graphic....what about it is awful? does it take up too much room? width? height? im entirely new to making webpages and design so the more detailed the criticism the greater it will help me. also what about the nav graphics needs work? the lines on them arent jagged like the outline for the whole image, which is something that i know needs fixing.

also keep in mind that the entire content area will not be text like it is on the site. i will have a few divs located within and images and the like - i just havent gotten that far yet.

im glad for the responses ive gotten though, thank you guys. my friends all liked the design but they dont know anything about making web pages or the design of them which is why i came here because i have seen some of the work that genmay has turned out and it incredibly well put together. if i wasnt prepared for your harshest of criticisms i wouldnt have come here, so do your worst - just ensure that i know in which direction to go from here

[Gunstar]

yes, by the banner I mean the main picture at the top sporting your logo. I think it should be a lil bit smaller height wise. I'm not a big fan of huge letters and passing it off as a logo, it looks cheap in my opinion. Perhaps jazz up the banner too with pics of your area or people in the group and blend something together using photoshop. If you don't know how to use photoshop then try GIMP (www.gimp.org) out, free version of photoshop and pretty good. If you don't feel like it then at least get ridda the weird white bits floating about in the banner and make the text smaller. Not a big fan of the navigation buttons, perhaps make them an arial font and make it bold. As for the content of the site, you might want to align the test with the bottom right corner of the banner. I think there is too much white space too and it'll be a bit more when that tripod banner is gone. Too much white space doesn't look too appealing to the eye.

I personally think you went into which I like to call the "normal zone". I think you can overdo a design or keep it simple and effective. You landed smack in the middle and it's pretty bland. Check out this site, it's one of my fave sites to see what colors will match in a website. Thats if you got photoshop but you can still copy the color code and dump it in GIMP. http://www.hlrnet.com/colormatch/index.php

What I would do with the site is make a centered website, it's always my prefered style and probably lay the links along the top too with breadcrumbs on the bottom. It'll look a bit better for the stuff you plan to do as well such as placing photo thumbnails etc. With your current design, you'll have like space for 2/4 thumnails depending on the size of them. Check out my friend's website, it's centered, simple and allows for a good range of thumbnails and easy to navigate around.

http://www.jamesmarijeanne.com/

[-={SoMe_GuY}=-]

gunstar - thanks a lot for explaining everything in good detail. i do use photoshop, just arent very good with it, as my image editor, i will look at filling in the top logo area with something other than large lettering. Also I did originally have a centered design with a horizontal nav menu. I switched over to the left menu style because i thought this design looked a bit cleaner -- though i am a fan of centered websites. another reason i switched over to this design is because i felt that i had more freedom with the navpanel -- it was easier for me to add additional links to new ideas and things if my limitation was the vertical plane of the page as opposed to a fixed horizontal width. with my old menu, if i were to add another section i would have to shrink the size of the image and text, which i dont like taking below a certain level due to readability.

i will see what i can work through with this design vs. my old one and see if i can come up with a nice blending of the two. and sorry about the text based logo...the name is something resembling a frat, and the H(backwords)KM has always been the only thing identifying us, weve never had anything fancy looking....just always been letters

also about the white scratches...those were mostly an accident that my other friends liked. when i was combining the layers i was making the background behind the text transparent from a white background (should have started it out that way, but i hadnt thought that far ahead), and while im sure there was an easier way the first thing i found was the background transparency eraser tool...which i used...and on a white/grey checkerbox background...the mistakes when erasing white gets past you sometimes. but my friends liked it and i didnt hate it so it stayed