1 reply [Last post]
mrmarkelrayes
mrmarkelrayes's picture
Offline
newbie
Earth
Last seen: 13 years 30 weeks ago
Earth
Joined: 2008-10-24
Posts: 2
Points: 0

Smile Hi.

Well, here goes:

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mr. Mark ElRayes</title>
<link href="MarkStyleCSS2.css" rel="stylesheet" type="text/css" />
 
<!--[if IE]>
<meta http-equiv="refresh" content="0;url=IEhome.html">
<![endif]--> 
 
</head>
 
 
<body>
<div id="turtle"></div>
<div id="mouse"></div>
<div class="top"> </div>
<div class="tmb">
  <div class="push">
  </div>
</div>
 
 
  <div class="botboxR"></div>
<div class="content">
         <div class="insides">
          <div id="allcontent">
         	<div id="midlist">
            <ul>
 
	       <li>
            <div id="contentender"></div>
           </li>
 
           <li>
         <div id="somenews">
            <h1>some news:</h1>
            <br />
            <h2>October 28th, 2008</h2>
 
            <p> I found it very easy to go about working on this web page because it was something I found fun.  It seems like a lot of the time most of the tasks we are given can be stripped away of their ability to be entertaining and enlightening simply by the nature of the work that must be done.  I would not have thought sitting in front of my computer typing away at a keyboard could be therapeutic  and even soothing on a personal spiritual level.  I believe it was the constant stream of thought that made working on this web page so easy and challenging all in the same moments.
            <br /> Perhaps I am simply teaching myself web coding as a new form of digital art, if I can mesh the lines seperating the two then I feel I have succeeded in creating something fresh and inspiring.</p>
         </div>
           </li>
           <li>
            <div id="navigationbox">
            <h1>navigation:</h1>
            <br />
            <p><a href="home.html">home</a> «</p>
 
            <a href="links.html">links</a>
            <br />
            <a href="school.html">school</a>
            <br />
            <a href="contacts.html">contacts</a>
            <br />
            <a href="files/MarKElRayesResume.pdf" target="_blank">resume[pdf]</a>
            <br />
            </div>
           </li>
           <li>
               <div id="arch">
 
<h1>about me:</h1>
 
<p>
I was born in Beirut.  When I was a child my parents left Lebanon in search of a brave new world.  First moving around Europe, we decided to give America a chance and so we boarded an airplane and made our way to this strange wonderful country of ours.  I have been in the States long enough to meet all kinds of people, experience all kinds of cultures, breathing in all sorts of ideas and growing professionally from all my interactions.
<br />
<br />
I have been a student at The Art Institute of Philadelphia for 4 years now.  I will be graduating this February, the same month as my birthday. I will receive a Bachelors of Science in Graphic Design which will serve to further push my career in the direction I wish to see it take.
<br />
<br />
I have been teaching myself web coding for about 4 months from today (Tuesday, October 28th, 2008) so I hope you enjoy the site.
</p>
 
				</div>
            </li>
 
 
            <li><div id="markname"></div></li>
 
 
        </ul>
           </div>
</div>
</div>
</div>
 
 
<div class="botbanner"></div>
         <div class="bot">
        		<div id="botinside">
                <div id="botlist">
                  <ul>
 
                  	<li><div id="logo"></div></li>
                  	<li><div id="botname">
 
                  	<div id="bottext">
                  	<a href="home.html">home</a> - <a href="links.html">links</a> - <a href="school.html">school</a> - <a href="contacts.html">contacts</a> - <a href="files/MarKElRayesResume.pdf" target="_blank">resume</a></div>
                    </div>
 
                 	 </li>
                  	<li><div id="kid"></div></li>
 
 
 
                  </ul>
                </div>
  </div>
</div>
</body>
</html>

css:

@charset "utf-8";
/* CSS Document */
 
/* Body Build */
*
 {margin: 0;
  }
 
html, body
 {height: 100%; background-color:#FFFFFF;
  font-family: Tahoma ,Arial,Verdana,sans-serif;
  font-size:1em;
  }
 
p {font-size:.7em; color:#1a1816;
   font-family: Tahoma ,Arial,Verdana,sans-serif;
   line-height:22px;
   }
 
h1 {font-size:1em; color:#4c4b10; font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    }
 
h2 {font-size:.8em; color:#b0b71f; font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    }
 
h3 {font-size:.7em; color:#5aa57c; font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    }	
 
 
 
 
a:link {color:#934183;text-decoration: none;}
a:visited {color:#934183;text-decoration: none;}
a:hover {color:#ED8333;text-decoration: none;}
a:active {color:#b0b71f;text-decoration: none;}
 
/* contents */
 
.tmb
 {min-height: 100%;
  height: auto;
  height: 100%;
  margin: 0px auto -522px;
  background-color:#E9FEFF;
  z-index:2;
  }
 
 
 
 
.push
 {height: 470px;
  }
 
 
.top
 {background-color:#f3fffd;
  width:100%;height:70px; /* 70px */
  position:relative;
  top:0em;left:0em;
  margin:0em auto -70px;padding:0em;
  background-image: url(images/scrollbannertop.jpg);
  background-repeat:repeat-x;
  z-index:1;
  }
 
/* bottom */
 
 
.botbox {height:522px; width:auto;}
 
.bot
 {background-color:#FFFFFF; margin:0px;
  width:100%;height:92px;z-index:3;
  }
 
.botbanner {background-image:url(images/scrollbanner.jpg); background-repeat:repeat-x;width:100%;height:20px;}
 
#botinside {width:600px;height:90px;margin-right:auto;margin-left:auto;}	
#botname {width:266px;height:70px;margin:0px;padding:0px; background-image:url(images/botname.png); background-repeat:no-repeat;}
#bottext {font-size:9.6px;padding-top:48px;padding-left:6px;width:auto;height:10px;}
 
/* insides */
 
  .content {width:auto;height:400px;overflow:auto;padding:0px; background-color:#FFFFFF; background-image:url(images/bluebg.jpg);}
  .insides {width:1850px;height:382px;padding:0px;margin:0px;}  
  .botboxR {width:auto;height:10px; background-image:url(images/scrollbannerbotR.jpg);}
 
  .location {width:100px;height:20px;position:relative;top:-20px;}
 
/* insides contents */
 
#logo {width:70px;height:70px;margin:0px;padding:0px; background-image:url(images/logo.png); background-repeat:no-repeat;}  
#arch
 {padding:20px 15px 10px 15px;
  width:400px;
  height:347px;
  margin-left:20px;
  background-image:url(images/arch.png);
  border-left:5px solid #FFFFFF;
  }
 
#navigationbox {width:100px;height:347px; margin-left:20px;padding:20px 15px 10px 15px; border-left:5px solid #FFFFFF;background-image:url(images/arch.png);}
#navigationbox a {font-size:9.6px;}
 
#somenews {position:relative;left:640px;text-align:right;width:400px;height:347px;padding:20px 15px 10px 15px; border-left:5px solid #FFFFFF;background-image:url(images/arch.png);}
 
 
/* Animated Gifs */
 
  #turtle {
	background-image:url(images/turtlehead.gif);
	height:40px;
	width:40px;
	position:absolute;
	top:27px;
	left:284px;
	z-index:4;
	background-repeat:no-repeat;
}
 
  #boy {
	background-image:url(images/boyhead.gif);
	height:40px;
	width:40px;
	position:absolute;
	top:12px;
	left:10px;
	z-index:4;
	background-repeat:no-repeat;
}
 
  #mouse {
	background-image:url(images/mousehead.gif);
	height:60px;
	width:60px;
	position:absolute;
	top:-13px;
	left:422px;
	z-index:4;
	background-repeat:no-repeat;
}
 
  #kid {
	background-image:url(images/kidhead.gif);
	height:10px;
	width:30px;
	position:relative;
	top:-19px;
	left:17px;
	z-index:4;
	background-repeat:no-repeat;
}
 
/* images */
 
#markname {background-image:url(images/markname.png); background-repeat:no-repeat; width:100px; height:380px;padding:0px;margin:0px;}
#contentender {background-image:url(images/contentender.png); width:50px;height:380px;padding:0px;margin:0px;position:relative;left:640px;border-left:5px solid #FFFFFF;}
 
/* Unordered Lists */
 
#botlist
 {width:auto;
  height:70px;
  float:left;
  }
 
#botlist ul { float:right;margin:0px;padding:0px;}
#botlist ul li { float: left; list-style-type: none; }
#botlist ul li a {
	letter-spacing:1px;
	text-decoration: none;
	}
 
#botlist
 {width:auto;
  height:70px;
  float:left;
  }
 
#midlist ul { float:left;margin:0px;padding:0px;}
#midlist ul li { float: right; list-style-type: none; }
 
 
 
/* links page */
 
#resourcesright {width:150px;height:327px;margin-left:20px;padding:20px 15px 10px 15px;background-image:url(images/arch.png);}
#resourcesleft {width:150px;height:327px;margin-left:20px;padding:20px 15px 10px 15px;background-image:url(images/arch.png); float:right;border-left:5px solid #FFFFFF;}
 
/* school page */
 
#week {position:relative;left:190px;text-align:right;width:auto;height:347px;padding:20px 5px 10px 5px; border-left:5px solid #FFFFFF;}
#week ul { float:right;margin:0px;padding:0px;}
#week ul li { float: left; list-style-type: none;width:100px;height:347px;padding:0px 15px 0px 15px; }
 
.weekbg {background-image:url(images/arch.png)}
.weekbj {border-left:5px solid #FFFFFF;}
 
#contentender2 {background-image:url(images/contentender.png); width:50px;height:380px;padding:0px;margin:0px;position:relative;left:190px;border-left:5px solid #FFFFFF;}
.insides2 {width:2050px;height:382px;padding:0px;margin:0px;}
 
#workjournal {background-image:url(images/workjournal.png); background-repeat:no-repeat; width:50px; height:347px;float:right;}
 
/* index */
 
.contentindex {width:auto;height:400px;overflow:auto;padding:0px;}

There are some unused classes and ids. I have checked it in ie6,ff2,ff3 and chrome.

Someone is going to make fun of me but I actually built it in chrome :/

thanks

actual site: www.mrmarkelrayes.com

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 37 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I like the look and feel.

I like the look and feel. Heres what I think.
1.) there seems to be alot use Divisions in the code. Are all these necessary?
2.) Kudos for the validation!
3.) Umm, it seems your xhtml has "somenews" before everything else, but onscreen it's not. This isnt a huge deal, but you should want a screen reader to read your page how it appears on-screen. Screen readers will read a different layout.
4.) I think your blog should be where "about me" is and have some blogging management code or a CMS.
4.) Not a fan of the HUGE whitespace ( emty space )above the fold, but understand it's needed for the visual affect of sky.
5.) Side-to-side scrolling is unnatural in the web world and doesnt "feel" right, but again understand why you did it.
6.) Navigation box is way too large. Shrinking this box will get rid if side-to-side scrolling!
As i said before, the look and feel is wonderful and creative!