- "Extreme" in the logo needs a different font type. It seems out of place with the rest of everything.
- Don't use tables for layouts. It should only be used for tabular data.
- No other font type in the history of web design is more despised than comic sans. Of the times it should be used, I would never use it for plain text.
- Kill the italic aspect for the menu bar. The thick nature of the font you use there bunches up when it is made italic.
- <center> was deprecated in 1999.
- Ran through the w3c validator, I get 29 errors. http://validator.w3.org/
- Ran through the w3c CSS validator, I get only one error, but 12 warnings. http://jigsaw.w3.org/css-validator/
- Poor use of markup in general.
Ex. 1
Code:
<p>Extreme Lowrider HD remix is an adventure game based in an urban environment in a vast and deep city. The game offers both a unique art style and a comedic story. ELHDR is a game designed to be interesting, different, and humorous for all players. Get your hands ready to dive in some real lowriding, and experience what it is like to be an Extreme Lowrider.
<br>
<br>
The game is currently in development and needs the support of fellow gamers --via <a href="http://www.kickstarter.com/projects/2111489276/extreme-lowrider-hd-remix">kickstarter</a>-- your support can earn you some cool swag
<br>
<br>
If you would like to know more head on over to the <a href="about/default.html">About</a> page
<br><br>
Check out the <a href="comic/default.html">web comic</a> for hints about the games' back-story
</p>
You should never use back-to-back <br /> tags.
Code:
<p>
Extreme Lowrider HD remix is an adventure game based in an urban environment in a vast and deep city. The game offers both a unique art style and a comedic story. ELHDR is a game designed to be interesting, different, and humorous for all players. Get your hands ready to dive in some real lowriding, and experience what it is like to be an Extreme Lowrider.
</p>
<p>
The game is currently in development and needs the support of fellow gamers --via <a href="http://www.kickstarter.com/projects/2111489276/extreme-lowrider-hd-remix">kickstarter</a>-- your support can earn you some cool swag
</p>
<p>
If you would like to know more head on over to the <a href="about/default.html">About</a> page
</p>
<p>
Check out the <a href="comic/default.html">web comic</a> for hints about the games' back-story
</p>
Ex. 2
Code:
<table width="100%" class="header">
<tr>
<td>
<a href="index.html"><img src="img/logo.png" alt="Logo" border="0" /></a>
</td>
</tr>
</table>
Shall I introduce you to the header tag? 
Code:
<h1>
<a href="index.html"><img src="img/logo.png" alt="Logo" /></a>
</h1>
CSS:
Code:
h1 {
CSS code here....
}
Ex.3
Code:
<table class="footer">
<tr>
<td>
<a href="mailto:shredder@extremelowrider.com" class="bottombar">Contact Us</a>
</td>
</tr>
<tr>
<td>
<p class="white">Extreme Lowrider HD Remix™ 2012</p>
</td>
</tr>
</table>
Class is used for something that will appear more than once. Id is used for something that is used once.
Tabless:
Code:
<div id="footer">
<a href="mailto:shredder@extremelowrider.com" class="bottombar">Contact Us</a>
<p>Extreme Lowrider HD Remix™ 2012</p>
</div>
CSS:
Code:
#footer {
CSS code....
}
#footer a {
CSS code....
}
#footer p {
CSS stuff for white class....
}
Ex. 4
Code:
<td class="insidebar">
<table class="oldernewsbutton" width="100%">
<tr>
<td class="menuoff2" onmouseover="className='menuon2';" onmouseout="className='menuoff2';" onclick="window.location='news/default.html'">
<a href="/news/default.html" class="bar">Older Posts</a>
</td>
</tr>
</table>
</td>
Let's skip the table aspect and just think about killing some classes here like I just did. Again, you would be killing the tables for layout.
Code:
<td class="insidebar">
<table>
<tr>
<td onmouseover="className='menuon2';" onmouseout="className='menuoff2';" onclick="window.location='news/default.html'">
<a href="/news/default.html" class="bar">Older Posts</a>
</td>
</tr>
</table>
</td>
CSS:
Code:
.insidebar {
CSS.....
}
.insidebar table {
More CSS...
}
.insidebar td {
Even more CSS
}
Ex. 5
Code:
<table summary="navbar" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="window.location='index.html'" >
<a href="index.html" class="bar">Home</a>
</td>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="window.location='news/default.html'">
<a href="news/default.html" class="bar">News</a>
</td>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="window.location='art/default.html'">
<a href="art/default.html" class="bar">Art</a>
</td>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="window.location='about/default.html'">
<a href="about/default.html" class="bar">About</a>
</td>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="window.location='downloads/default.html'">
<a href="downloads/default.html" class="bar">Downloads</a>
</td>
</tr>
</table>
Holy overkill Batman! You can use CSS to cover when the link is being hovered over which kills the JavaScript. I see zero use for the onclick unless I'm really missing something. Menus are really unordered lists.
Code:
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="news/default.html">News</a></li>
<li><a href="art/default.html">Art</a></li>
<li><a href="about/default.html">About</a></li>
<li><a href="downloads/default.html">Downloads</a></li>
</ul>
CSS:
Code:
#menu {
CSS code....
}
#menu li {
display:inline;
}
#menu a:link {
CSS code....
}
#menu a:visited {
CSS code....
}
#menu a:hover {
CSS code....
}
#menu a:active {
CSS code....
}
Ex. 6
Code:
<table summary="paint" class="paint">
<tr><td> <br/><br/><br/><br/></td></tr>
</table>
(head desk) The CSS for this goes in with your footer code.
Reply With Quote
Bookmarks