9 replies [Last post]
FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 1 year 30 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Hey just redesigned my portfolio site and just wanted to get some feedback on both code and layout. thanks.

http://ejfernandez.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="description" content="Eric Fernandez web design" />
		<meta name="keywords" content="web design, photoshop, dreamweaver, graphic design, design, portfolio, artist portfolio, css, CSS, eric fernandez, eric, fernandez, freelance, free lance, html, HTML, in flames, break, eric fernandez design, design, band design, band web design, main st brewery, main st. brewery, metal" />
		<title>Eric Fernandez Design::..</title>
		<link href="layout.css" rel="stylesheet" type="text/css" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="ie-only.css" />
		<![endif]-->
	</head>
	<body>
		<div id="containter">
			<img src="images/header.jpg" alt="header logo" width="1000" height="200" class="header" />
			<div id="toplinks">
				<a href="files/resume.pdf"><img src="images/resume.jpg" alt="download resume" width="154" height="43" /> </a>
				<a href="mailto:[email protected]"><img src="images/email.jpg" alt="email eric fernandez at </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%66%65%72%6e%65%39%37%40%67%6d%61%69%6c%2e%63%6f%6d%22%3e%66%65%72%6e%65%39%37%40%67%6d%61%69%6c%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>" width="154" height="43" /></a>
			</div><!--closes toplinks-->
			<div id="bio">
				<h5>Hey there! I'm Eric Fernandez and I do freelance web and graphic design. I graduated from Cal State Hayward with a Bachelors of Arts in Multimedia Art. My style can be heavily grungy but I also like to keep it precise and clean feeling. Feel free to contact me about any job inquiries you may have.</h5>
			</div><!--closes bio-->	
			<img src="images/btm_line.jpg" alt="line break" width="980" height="68" class="test" /><img src="images/top_line.jpg" alt="line break" width="980" height="98" class="lnbreak" />
			<div class="tab">
			<a href="http://www.howtobegeo.com/break/break/"><img src="images/break_tab.jpg" alt="break website tab" width ="225" height="35" /></a>
			</div><!--closes tab-->
			<div class="entry_head">
			</div><!--closes entry_head-->
			<div class="entry_box">
				<a href="http://www.howtobegeo.com/break/break/"><img src="images/break_box.jpg" alt="break website" width="842" height="741" class="img_box" /></a>
			</div><!--closes entry_box-->
			<div class="entry_foot">
			</div><!--closes entry_foot-->
			<h1>[Break!] Website</h1>
			<h2>This is a website I designed for bay area punk band. I did all of the graphics, code and layout of the site. Re-touched promo images and created banners and wallpapers.</h2>
			<img src="images/btm_line.jpg" alt="line break" width="980" height="68" class="test" /><img src="images/top_line.jpg" alt="line break" width="980" height="98" class="lnbreak" />
			<img src="images/brewery_tab.jpg" alt="menu design brewery tab" width ="350" height="35" class="tab" />
			<div class="entry_head">
			</div><!--closes entry_head-->
			<div class="entry_box">
				<img src="images/brewery.png" alt="main st. brewery menu" width="842" height="549" class="img_box" />
			</div><!--closes entry_box-->
			<div class="entry_foot">
			</div><!--closes entry_foot-->
			<h1>Main St. Brewery Menu Design</h1>
			<h2>This is a menu I designed for a restaurant called Main St. Brewery in Pleasanton, CA. The idea was to make something simple, neat and organized in a four page layout.</h2>
			<h6><a href="files/brewery.pdf"> Menu pdf format</a></h6>
			<img src="images/btm_line.jpg" alt="line break" width="980" height="68" class="test" /><img src="images/top_line.jpg" alt="line break" width="980" height="98" class="lnbreak" />
			<div class="tab">
			<a href="http://ejfernandez.com/inflames/"><img src="images/if_tab.jpg" alt="in flames website tab" width ="225" height="35" /></a>
			</div><!--closes tab-->
			<div class="entry_head">
			</div><!--closes entry_head-->
			<div class="entry_box">
				<a href="http://ejfernandez.com/inflames/"><img src="images/in_flames_box.jpg" alt="in flames website" width="842" height="395" class="img_box" /></a>
			</div><!--closes entry_box-->
			<div class="entry_foot">
			</div><!--closes entry_foot-->
			<h1>In Flames Website</h1>
			<h2>This is actually one of the first websites I created. Just a small fan page for In Flames. I know it is a little outdated with the iframe and the smaller size but just wanted to put it up.</h2>
			<img src="images/btm_line.jpg" alt="line break" width="980" height="68" class="test" /><img src="images/top_line.jpg" alt="line break" width="980" height="98" class="lnbreak" />
			<img src="images/dig_tab.jpg" alt="digital illustration tab" width ="225" height="35" class="tab" />
			<div class="entry_head">
			</div><!--closes entry_head-->
			<div class="entry_box">
				<img src="images/eye.jpg" alt="haunting eye" width="842" height="614" class="img_box" />
			</div><!--closes entry_box-->
			<div class="entry_foot">
			</div><!--closes entry_foot-->
			<h1>Haunting Eye - Digital Illustration</h1>
			<h2>This image is composed of several photographs that have been manipulated in photoshop to illustrate the lyric "those black empty eyes are haunting me".</h2>
			<div class="footer">
				<div id="valid">
					<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height;31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" /></a>
					<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>
				</div><!--closes valid-->
				<h4>Copyright &copy; 2005-2008 | Eric Fernandez Design | <a href="mailto:[email protected]">[email protected]</a></h4>
			</div><!--closes footer-->
		</div><!--closes containter-->
	</body>
</html>

BODY
{
	margin: 0 auto;
	background-image: url(images/wallpaper2.gif);
	background-position: top center;
}
H1, H2, H3, H4, H5, H6
{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
H1
{
	font-size: 15px;
	color: #2F3838;
	margin: 1em 0em 0.125em 8em;
}
H2
{
	font-size: 12px;
	color: #FFFFFF;
	font-weight: normal;
	text-align: justify;
	margin: 0.5em 11em 0em 11em;
	padding-bottom: 1.5em;
}
H3
{
	font-size: 9px;
	color: #996666;
	margin: 1em 0em;
}
H4
{
	font-size: 10px;
	color: #2F3838;
	text-align: center;
	margin: 1em auto 0;
}
H5
{
	font-size: 11px;
	color: #566465;
	text-align: justify;
	padding: 1.7em 4.5em 0em 4em;
}
H6
{
	text-align: right;
	padding: 1em 7.5em 0em 0em;
	margin: 0;
}
IMG
{
	border: 0;
}
#containter
{
	width: 1000px;
	margin: 0 auto;
	background-image: url(images/main_bg.gif);
	background-repeat: repeat-y;
	float: inherit;
}
#toplinks
{
	margin: 0 0 0 50.5em;
	border: 0;
	overflow: hidden;
}
#valid
{
	width: 186px;
	margin: 0 auto 0.5em;
}
#bio
{
	background-image: url(images/text_box_lng.jpg);
	background-repeat: no-repeat;
	width: 563px;
	height: 96px;
	background-position: top center;
	margin: -7.25em 0 0 14em;
}
.entry
{
	width: 940px;
	text-align: left;
	margin: 0em auto;
}
.tab
{
	margin: 0 0 -4px 8em;
	overflow: hidden;
}
.entry_box
{
	width: 860px;
	background-image: url(images/box_main.gif);
	background-repeat: repeat-y;
	text-align: left;
	margin: 0em auto;
}
.entry_head
{
	width: 860px;
	height: 9px;
	background-image: url(images/box_top.gif);
	margin: 0em auto 0;
}
.entry_foot
{
	width: 860px;
	height: 9px;
	background-image: url(images/box_bottom.gif);
	margin: -5px auto 0em;
}
.img_box
{
	margin: 0 9px;
}
.header
{
	margin: 0 0 2em;
}
.links
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	float: right;
}
.lnbreak
{
	margin: -5px 10px 1em;
}
.test
{
	margin: 0em 10px;
}
.footer
{
	width: 980px;
	height: 68px;
	margin: 14em auto 0;
	background-image: url(images/btm_line.jpg);
	float: inherit;
}
A:link
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #2F3838;
	border: 0;
}
A:visited
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #2F3838;
	border: 0;
}
A:hover
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
	border: 0;
}

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 2 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Your menu appears across the

Your menu appears across the introductory text. The menu should be expanded to tell the viewer what can be found on your site and give some clues to the information architecture. Tested in FF2.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 1 year 30 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Just so I understand what

Just so I understand what exactly do you mean the menu appears across the intro text. Are you talking about the resume and email links? Thanks for the feedback

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

Check

1. I was happy to see it validate !!
2. Resume link does not work :scared:
3. I love the color scheme.
4. You should add body {line-height: 1.5;} to make text easyer to read.
5. The home page look a bit to open. try compressing those images some more.
6. You have some empty divs in your XHTML. Some browsers dont deal with empty divs very well. I would add   to each of them.
7.

<h2>This is a website I designed for bay area punk band. I did all of the graphics, code and layout of the site. Re-touched promo images and created banners and wallpapers.</h2>

This is not a heading, thus should not be labled as such. I would go through your code and change all your headings, that are not really headings.
8. All your pink headings, should have XHTML showing them as headings. Google image replacment. This site has alot of ways to achieve this http://www.mezzoblue.com/tests/revised-image-replacement/It is very important to have meaningful markup.
9. Way too many divs dude. You dont have to div everything to style everything.
10. your site description should include more about what you do. Site descriptions are one of the first things a search bot indexes with.

This should keep you buisy for a while.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 1 year 30 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Alright thanks for the

Alright thanks for the response. I'll work on some of that stuff and re-post an update soon.

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

oh?

If you have a web service, you should have a more professional email then gmail. Most services come with email accounts.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 1 year 30 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Update

--update--

So I changed a bunch of stuff around and think i got the code to be more semanticly correct. Let me know what you guys think about the code or design. Any comments appreciated.

http://ejfernandez.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="description" content="Eric Fernandez web design. I'm Eric Fernandez and I do freelance web design and graphic design. I graduated from Cal State Hayward with a Bachelors of Arts in Multimedia Art. My style can be heavily grungy but I also like to keep it precise and clean feeling." />
		<meta name="keywords" content="web design, photoshop, dreamweaver, graphic design, design, portfolio, artist portfolio, css, CSS, eric fernandez, eric, fernandez, freelance, free lance, xhtml, XHTML, html, HTML, in flames, break, break!, eric fernandez design, design, band design, band web design, main st brewery, main st. brewery, metal" />
		<title>Eric Fernandez Design::..</title>
		<link href="layout.css" rel="stylesheet" type="text/css" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="ie-only.css" />
		<![endif]-->
	</head>
	<body>
		<div id="container">
			<h1 id="branding">Eric Fernandez Graphic | Web Design Portfolio</h1>
			<div id="intro">
				<p>Hey there! I'm Eric Fernandez and I do freelance web and graphic design. I recently graduated from CSU Hayward with a Bachelors of Arts in Multimedia, where I gained experience working in various forms of media (web, print, animation) and collaborated with small design teams on big projects.</p>
				<p>Below you will find samples of several designs I have created. My concentration is on web design but I am open for any type of design needs. Feel free to contact me about any job inquiries you may have.</p>
				<ul id="toplinks">
					<li><a class="resume" href="files/resume.pdf">Download Resume</a></li>
					<li><a class="contact" href="mailto:[email protected]">[email protected]</a></li>
				</ul>
				<h2 id="projects">Recent Projects</h2>
				<ul id="project_tabs">
					<li id="proj_sm1"><a href="#tab1"><img src="images/break_sm.png" alt="break website" /></a></li>
					<li id="proj_sm2"><a href="#tab2"><img src="images/brewery_sm.png" alt="brewery menu" /></a></li>
					<li id="proj_sm3"><a href="#tab3"><img src="images/if_sm.png" alt="in flames website" /></a></li>
					<li id="proj_sm4"><a href="#tab4"><img src="images/eye_sm.png" alt="eye illustration" /></a></li>
				</ul>
			</div><!--closes intro-->
			<div id="hr_top">
				<hr/>
			</div><!--closes hr_top-->
			<div id="content_main">
				<h2 id="tab1">Website Break!</h2>
				<a href="http://www.howtobegeo.com/break/break/"><img class="img_box" src="images/break_box.jpg" alt="break website" /></a>
				<h3>[Break!] Website</h3>
				<p>This is a website I designed for bay area punk band. I did all of the graphics, code and layout of the site. Re-touched promo images and created banners and wallpapers.</p>
				<div class="hr">
					<hr/>
				</div><!--closes hr-->
				<h2 id="tab2">Menu Design Main St. Brewery</h2>
				<img class="img_box" src="images/brewery.png" alt="main st. brewery menu" />
				<h3>Main St. Brewery Menu Design</h3>
				<p>This is a menu I designed for a restaurant called Main St. Brewery in Pleasanton, CA. The idea was to make something simple, neat and organized in a four page layout.</p>
				<a class="dl_link" href="files/brewery.pdf"> Menu pdf format</a>
				<div class="hr">
					<hr/>
				</div><!--closes hr-->
				<h2 id="tab3">In Flames fan website</h2>
				<a href="http://ejfernandez.com/inflames/"><img class="img_box" src="images/in_flames_box.jpg" alt="in flames website" /></a>
				<h3>In Flames Website</h3>
				<p>This is actually one of the first websites I created. Just a small fan page for In Flames. I know it is a little outdated with the iframe and the smaller size but just wanted to put it up.</p>
				<div class="hr">
					<hr/>
				</div><!--closes hr-->
				<h2 id="tab4">Digital Illustration</h2>
				<img class="img_box" src="images/eye.jpg" alt="haunting eye" />
				<h3>Haunting Eye - Digital Illustration</h3>
				<p>This image is composed of several photographs that have been manipulated in photoshop to illustrate the lyric "those black empty eyes are haunting me".</p>
			</div><!--closes content_main-->
			<div id="footer">
				<ul id="validate">
					<li id="xhtml_validate"><a href="http://validator.w3.org/check?uri=referer">valid xhtml</a></li>
					<li id="css_validate"><a href="http://jigsaw.w3.org/css-validator/check/referer">valid css</a></li>
				</ul>
				<ul id="copyright">
					<li>Copyright &copy; 2005-2008</li>
					<li>|</li>
					<li>Eric Fernandez Design</li>
					<li>|</li>
					<li><a href="mailto:[email protected]">[email protected]</a></li>
				</ul>
			</div><!--closes footer-->
		</div><!--closes container-->
	</body>
</html>

/*--layout--*/
@import url(color.css);
@import url(type.css);
 
/*--sets everything to 0--*/
* {
	padding: 0;
	margin: 0;
}
 
/*---main section---
---------------------------------------------------------------------------------------------------*/
 
HTML, BODY {
	margin: 0 auto;
	padding: 30px 0;
}
ul {
	list-style-type: none;
}
h3 {
	margin: 30px 0 8px 94px;
}
h1#branding {
	width: 1000px;
	height: 153px;
}
div#container {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 170px;
}
 
/*---end main section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---intro section---
---------------------------------------------------------------------------------------------------*/
 
ul#toplinks {
	width: 145px;
	height: 143px;
	position: absolute;
	left: -40px;
	top: -30px;
	margin: 0;
	z-index: 10;
}
ul#toplinks a {
	display: block;
}
li a.resume {
	width: 96px;
	height: 25px;
	position: relative;
	left: 25px;
	top: 35px;
}
li a.contact {
	width: 84px;
	height: 29px;
	position: relative;
	left: 37px;
	top: 45px;
 
}
div#intro{
	width: 974px;
	height: 100%;
	position: relative;
	margin: 0 auto;
}
div#intro p {
	margin: 0 300px 20px 145px;
	padding-top: 50px;
}
div#intro p + p {
	padding: 0 0 50px 0;
}
h2#projects {
	width: 178px;
	height: 29px;
	position: absolute;
	left: 738px;
	top: 11px;
}
ul#project_tabs {
	margin-bottom: -21px;
}
ul#project_tabs img {
	width: 96px;
	position: absolute;
	padding: 4px;
}
ul#project_tabs a img:hover {
	width:120px;
	z-index: 99;
	padding:5px;
}
li#proj_sm1 img {
	top: 50px;
	left: 718px;
}
li#proj_sm2 img {
	left: 832px;
	top: 50px;
}
li#proj_sm3 img {
	left: 718px;
	top: 134px;
}
li#proj_sm4 img {
	left: 832px;
	top: 134px;
}
 
/*---end intro section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---work section---
---------------------------------------------------------------------------------------------------*/
 
div#content_main {
	position: relative;
}
h2#tab1 {
	width: 225px;
	height: 35px;
	position: relative;
	left: 94px;
	top: 0;
}
h2#tab2 {
	width: 340px;
	height: 35px;
	position: relative;
	left: 94px;
	top: 0;
}
h2#tab3 {
	width: 225px;
	height: 35px;
	position: relative;
	left: 94px;
	top: 0;
}
h2#tab4 {
	width: 225px;
	height: 35px;
	position: relative;
	left: 94px;
	top: 0;
}
div.hr {
	width: 974px;
	height: 163px;
	position: relative;
	left: 13px;
	margin-top: 50px;
}
div.hr hr {
	display: none;
}
div#hr_top {
	width: 974px;
	height: 98px;
	position: relative;
	left: 13px;
}
div#hr_top hr {
	display: none;
}
a.dl_link {
	position: relative;
	left: 789px;
	top: 15px;
	padding: 6px;
}
div#content_main p {
	margin: 0 92px 0 104px;
}
img.img_box {
	width: 844px;
	position: relative;
	left: 50%;
	margin-left: -431px;
	padding: 8px;
}
 
 
/*---end work section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---footer section---
---------------------------------------------------------------------------------------------------*/
 
div#footer {
	width: 1000px;
	height: 153px;
	position: relative;
	bottom: -173px;
}
ul#copyright {
	display: table;
	position: absolute;
	left: 25%;
	top: 112px;
}
ul#copyright li {
	display: table-cell;
	padding: 0 5px;
}
ul#validate a{
	display: block;
}
ul#validate {
	position:relative;
}
li#xhtml_validate {
	width: 98px;
	height: 17px;
	position: absolute;
	left: 875px;
	top: 110px;
}
li#css_validate {
	width: 65px;
	height: 17px;
	position: absolute;
	left: 908px;
	top: 82px;
}
li#xhtml_validate:hover {
	background-position: -98px;
}
li#css_validate:hover {
	background-position: -65px;
}
 
/*---end footer section---
---------------------------------------------------------------------------------------------------*/
 
/*--color--*/
/*---main section---
---------------------------------------------------------------------------------------------------*/
 
html, body {
	background: url(images/wallpaper2.gif) top center;
}
h3 {
	color: #2F3838;
}
a, img {
	border: 0;
}
div#container {
	background: url(images/main_bg_re.gif) repeat-y;
}
h1#branding {
	background: url(images/branding.jpg);
}
a:link {
	color: #dee6e3;
}
a:visited {
	color: #dee6e3;
}
a:hover {
	color: #FFFFFF;
}
 
/*---end main section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---intro section---
---------------------------------------------------------------------------------------------------*/
 
ul#toplinks {
	background: url(images/contact_box.png) no-repeat;
}
li a.resume {
	background: url(images/resume.png) no-repeat;
}
li a.resume:hover {
	background-position: -96px;
}
li a.contact {
	background: url(images/email.png); 
}
li a.contact:hover {
	background-position: -84px;
}
div#intro {
	background-color: #6c7772;
	border-bottom: 1px dashed #fa4c6b;
}
div#intro p {
	color: #dee6e3;
}
h2#projects {
	background: url(images/projects.png) no-repeat;
}
ul#project_tabs img {
	background-color: #dee6e3;
	border: 1px solid #222;
}
ul#project_tabs a img:hover {
	background-color: #202523;
	border: 1px dashed #fa4c6b;
}
 
/*---end intro section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---work section---
---------------------------------------------------------------------------------------------------*/
 
div.hr {
	background: url(images/line_break.jpg) no-repeat;
}
div#content_main p {
	color: #222;
}
h2#tab1 {
	background: url(images/break_tab.png) no-repeat;
}
h2#tab2 {
	background: url(images/brewery_tab.png) no-repeat;
}
h2#tab3 {
	background: url(images/if_tab.png) no-repeat;
}
h2#tab4 {
	background: url(images/illustration_tab.png) no-repeat;
}
div.hr {
	background: url(images/line_break.jpg) no-repeat;
}
div#hr_top {
	background: url(images/top_line.jpg) no-repeat;
}
img.img_box {
	background-color: #202523;
	border: 1px dashed #fa4c6b;
}
a.dl_link {
	background-color: #7a8782;
	border: 1px dashed #222;
}
a.dl_link:hover {
	color: #fff;
	background-color: #6c7772;
}
 
/*---end work section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---footer section---
---------------------------------------------------------------------------------------------------*/
 
div#footer {
	background: url(images/footer.jpg) no-repeat;
}
ul#copyright {
	color: #dee6e3;
}
ul#copyright a {
	color: #dee6e3;
}
ul#copyright a:hover {
	border-bottom: 1px dashed #fa4c6b;
	color: #fff;
}
li#xhtml_validate {
	background: url(images/xhtml_validate.png) no-repeat;
}
li#css_validate {
	background: url(images/css_validate.png) no-repeat;
}
 
/*---end footer section---
---------------------------------------------------------------------------------------------------*/
 
/*--type--*/
/*---main section---
---------------------------------------------------------------------------------------------------*/
 
html, body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	font-size: 100.01%;
}
h1 {
	font-size: .1em;
	text-indent: -9999em;
}
h2 {
	font-size: .1em;
	text-indent: -9999em;
}
 
h3 {
	font-size: .9em;
}
a:link {
	font-weight: bold;
}
a:visited {
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
	font-weight: bold;
}
 
/*---end main section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---intro section---
---------------------------------------------------------------------------------------------------*/
 
ul#toplinks a {
	font-size: .1em;
	text-indent: -9999em;
}
 
div#intro p {
	font-size: .9em;
	text-align: justify;
}
 
/*---end intro section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---work section---
---------------------------------------------------------------------------------------------------*/
 
a.dl_link {
	font-size: .8em;
	text-decoration: none;
}
a.dl_link:hover {
	text-decoration: none;
}
div#content_main p {
	font-size: .8em;
	font-weight: normal;
	text-align: justify;
}
 
/*---end work section---
---------------------------------------------------------------------------------------------------*/
 
 
/*---footer section---
---------------------------------------------------------------------------------------------------*/
 
ul#copyright {
	font-size: .8em;
}
ul#copyright a {
	font-weight: normal;
	text-decoration: none;
}
ul#validate a {
	font-size: .1em;
	text-indent: -9999em;
}
 
/*---end footer section---
---------------------------------------------------------------------------------------------------*/
 
/*--ie only--*/
div#footer ul {
	width: 50%;
	display: inline-block;
}
div#footer ul li {
	display: inline;
}
/*---extra space below the intro---*/
ul#project_tabs {
	margin-bottom: -95px;
}
/*---ie was setting left and right to auto even with all margins set to 0---*/
ul#validate {
	margin-top: 0;
	margin-right: 0! important;
	margin-left: 0! important;
	margin-bottom: 0;
}
/*---validation images were not acting as a link without specific dimensions---*/
li#css_validate a {
	width: 65px;
	height: 17px;
}
li#xhtml_validate a {
	width: 98px;
	height: 17px;
}

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

Thumbs Up !

This is leaps-and-bounds from where you started! This code makes sense! Everything look good too! nice work !

Wink

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 1 year 30 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Thanks for all the help

Thanks for all the help CupipdsToejam...I have been reading the Transcending CSS book by Andy Clarke and that has helped out a lot.

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

Yeah

That book helped me the most!