1 reply [Last post]
Last seen: 13 years 23 weeks ago
Joined: 2009-01-05
Posts: 17
Points: 0


Could you guys check out the layout on my site? Ignore the content for now. This is another site for my web design class.



<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Peer Notebook</title> 
<script type="text/javascript"> 
var image1 = new Image();
image1.src = "homeover.jpg";
var image2 = new Image();
image2.src = "aboutover.jpg";
var image3 = new Image();
image3.src = "howover.jpg";
var image4 = new Image();
image4.src = "breakover.jpg";
var image5 = new Image();
image5.src = "contactover.jpg";
<script type="text/javascript"> 
function roll(img_name, img_src)
   document[img_name].src = img_src;
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
	<div id="holder"> 
		<div id="lightblue"> 
			<div id="white"> 
				<img src="logo.png" id="logo" alt="logo"/> 
				<img src="righttop.png" id="righttop" alt="studyhard"/> 
<!--<div id="flash">
	<object type="application/x-shockwave-flash" 
		data="navigation.swf" width="885" height="273" >
	  <param name="movie" value="navigation.swf" />
	  <param name="allowScriptAcess" value="sameDomain" />
	  <param name="quality" value="high" />
	  <param name="bgcolor" value="#FFFFFF" />
	  <param name="scale" value="Scale" />
	  <param name="salign" value="TL" />
	  <param name="FlashVars" value="playerMode=embedded" />
	</div> --> 
		<div id="red"> 
		<div id="navi"> 
			<ul id="navibar"> 
				<li class="navi"><a href="index.html" class="navi" 
				onmouseover="roll('home', 'homeover.jpg')" 
				onmouseout="roll('home', 'home.jpg')"><img src="home.jpg" alt="home" class="navimage" id="first" name="home"/></a></li> 
				<li class="navi"><a href="about.html" class="navi"
					onmouseover="roll('about', 'aboutover.jpg')" 
				onmouseout="roll('about', 'about.jpg')"><img src="about.jpg" class="navimage" alt="about" name="about"/></a></li> 
				<li class="navi"><a href="how.html" class="navi"
					onmouseover="roll('how', 'howover.jpg')" 
				onmouseout="roll('how', 'how.jpg')"><img src="how.jpg"  class="navimage" alt="how" name="how"/></a></li> 
				<li class="navi"><a href="break.html" class="navi"
					onmouseover="roll('break', 'breakover.jpg')" 
				onmouseout="roll('break', 'break.jpg')"><img src="break.jpg" class="navimage" alt="break" name="break"/></a></li> 
				<li class="navi"><a href="contact.html" class="navi" 	   			  onmouseover="roll('contact', 'contactover.jpg')" 
				onmouseout="roll('contact', 'contact.jpg')"><img src="contact.jpg"  class="navimage" alt="contact" name="contact"/></a></li> 
		<div id="darkblue"> 
			<div id="content"> 
				<div id="rightcontent"> 
					<p class="home"><img src="welcome.png" alt="welcome"/></p> 
					<p class="home">PeerNotebook is a tool that helps you connect and share notes with other students in your classes and students using the same textbook as you at other schools. The home page is an organized interface that allows you to easily navigate our website and optimize your time and study results!</p> 
<p class="home">Many students have great notes in classes they love, but have gaps in notes of classes that are more challenging. Towards midterms and finals, and even for the occasional test or quiz, many students on campuses across the world scramble to their peers to fill in the gaps in their own notebooks in order to study more effectively, learn the material, and achieve a better grade.</p> 
<p class="home">PeerNotebook will provide what no other site currently offers, an interface for students to upload their notes and exchange notes with peers in their college network. It will be possible for users to interact with one another, as well as search within courses offered at their preferred school. The creation of this website is a monumental academic breakthrough.</p> 
	<div id="leftcontent"> 
		<p class="home"><img src="yourschool.png" alt="search"/></p> 
			<ul class="home"> 
				<li class="home1">Insert Drop Down Menu for State</li> 
				<li class="home1">Insert Drop Down For Schools in Boston</li> 
		<p class="home"><img src="why.png" alt="why"/></p> 
			<ul class="home"> 
				<li class="home1">Get Notes</li> 
				<li class="home1">Leave Notes</li> 
				<li class="home1">Study Break</li> 
				<li class="home1">Better Grades!!!</li> 
		<p class="home">Issues that will become the responsibility of our generation of leaders: environmental scares, pressing political conflicts, malnutrition, and violence to name a few. The only way to succeed is in living by the motto: "Knowledge is Power." It is the responsibility of each member of our society to arm themselves with the most powerful weapon of all, education.</p> 


body {font-family: calibri; color: white; background-color: #052e64;}
	div#holder {margin: auto; height: 660px;}
	div#lightblue {height: 240px; background-color: #edf5ff; width: 100%;}
	div#white {height: 240px; width: 900px; background-color: #ffffff; margin: auto; border-right: 5px solid white;}
	div#red {height: 35px; background-color: #db4a4d; width: 100%;}
	div#navi {height: 35px; width: 900px; background-color: #db4a4d; margin: auto;}
	div#darkblue { background-color: #052e64; width: 100%; overflow: hidden;}
	div#content {width: 900px; background-color: #052e64; margin: auto; padding-top: 10px;}
	div#rightcontent {width:547px;  float: right;}
	div#leftcontent {width: 349px; float: left; border-right:3px solid #db4a4d; margin-bottom: 10px;}
	img#logo {float:left;}
	img#righttop {float: right;}
	li.navi {list-style-type: none; display: inline; margin: 0px; }
	ul#navibar { list-style: none; white-space: nowrap; margin: 0px;}
	ul.home {list-style-type: circle; margin-bottom: 20px; margin-top: 20px;}
	li.home1 {margin-top: 10px; margin: 5px 0px 10px 60px;}
	img.navimage {border-right: 1px solid white; margin-left: -4px;}
	#first {border-left: 1px solid white;}
	p.home {margin: 5px 15px 5px 15px; text-align: justify; line-height: normal;}
	div#cr {width: 900px; background-color: #052e64; border-top: 2px solid white; margin: auto;}
	p.copyright {float: right;}
	.center {text-align: center;}
	div#rightcontentabout {width:350px;  float: right; border-left:3px solid #db4a4d; }
	div#leftcontentabout {width: 500px; float: left; margin-bottom: 10px;}


/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
/* remember to define focus styles! */
:focus {
	outline: 0;
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
del {
	text-decoration: line-through;
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;

CupidsToejam's picture
Last seen: 7 years 12 weeks ago
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

1. Almost validates 2.

1. Almost validates Wink

2. Not SEO

3. You can use CSS to handle your rollovers, JS isnt the best way.

4. All you heading should have heading tags. research image replacement. Make your logo the

5. You dont need all these divs. You can jusy apply the same styles to the html tag.

6. Thats a clean font-face for the body, and with good contrast. Seedhouse loves contrast, he'll like it that.

7. I think heading School and Why, should line up.

8. LOL, were you planning ion purchasing that iStockphoto image? Laughing out loud

9. Need some margin under "Connor Hood".

10. I'd add a tiny-bit more line-height.

I like the simple design. Less is better!! Good job!