Lamez's Corner - Whole New Template

[Lamez]

I re-coded my CSS, it more efficient! I love it!

 

preview it here: http://www.lamezz.com/_NEW

 

Tell me what you guys think!

 

-Thanks

[moberemk]

It's flat and fairly boring, and while the design is still readable and the navigation  works well enough, it still doesn't look very pretty; not to mention that I have no clue what the point of the site is, but that'll change eventually.

[Lamez]

So what should I do to make it better?

[AXiSS]

Simply put, it looks like a pre-CSS site. The link colors are bad. The page is flat. And blank. And like moberemk said, there is no indication as to what the point is. The colors are horrid.

 

See http://webdesignfromscratch.com/ for some ideas and research Web 2.0 design.

[moberemk]

Use some actual graphics, for one; as it is, it's mostly greys and flat colours. Try coming up with a specific purpose in mind when you're designing it, as that will help you create a design that relates to the goal of the site. Look up some examples of design on the web-remember, good designers borrow, great designers steal.

[TheFilmGod]

This is a def. an improvement from the last thing you made. I still don't see the point of the valid "xhtml" picture. Everyday users don't give a crap anyway.

 

You must check it in firefox. The third box is screwed up.

 

Overall, I like it. The colors are a bit dull and their is a lack of pictures, but overall it is a good start. Don't think that's a thumbs up, just saying that I EXPECT you to spice it up in the near future.

[Lamez]

lol I like my template, if you guys read my main post, it just a template, not the main content.

 

Whats wrong with my links white on grey, then the roll over is black on grey. Same with my navigation.

 

Oh what is wrong with the third box? I am using FF.

[AXiSS]

You like it. No one else does. Now you have me wondering what we are critiquing, since we are saying the design is bad and you are saying it's just a template not content...

[Lamez]

I am just saying I like it, and was wondering what other peoples opinions are on it. I was really looking hard on my links, and they are horrid, what colors should I go with?

[Lamez]

Changed the links

Added border around footer and menu.

 

 

[AXiSS]

Look at major sites, like ebay and flickr, then take a look at yours. See how those pages have things like images, bright CONTRASTING colors, and properly distributed whitespace? Matching links, no thick obtrusive bordering, and subtle gradients, a three dimensional experience... all things that make up well designed sites.

 

Look closely at your sight. No contrast. No images. Thick obstrusive bordering. Dark and dull. Odd link styling. Flat flat flat.

[TheFilmGod]

CSS CODE

/*Menu Hovers*/

div.menu li.nonselected{

border : 1px;

border-color : #cbcbcb;

border-style : solid;

}

div.menu li.nonselected:hover{

text-decoration : blink;

border : 1px;

border-color : #000000;

border-style : solid;

}

 

Blink? Come on man! Don't use that! LOL.

[dbrimlow]

Before you change the style, FIX THE MARKUP!

 

You have quite a few errors. First, in your css 

"div.box{border-color : #66666;}"

.

 

You left off a 6. Should be #666666.

 

Now for the markup - if you use xhtml, you have to follow rules:

 

1. You named p class="center" after the body tag, but have no closing p tag, instead you have a hanging closing DIV tag. Change p class="center" to div class="center";

 

you had:

<p class="center">

  <div class="logo"><img src="style/img/logo.gif" /></div>

  <div class="menu">

  <ul>

<li class="selected"><a href="index.php">Home</a></li>

 

<li class="nonselected"><a href="#">Login</a></li>

<li class="nonselected"><a href="#">Register</a></li>

<li class="nonselected"><a href="#">Forms</a> </li>

<li class="nonselected"><a href="#">Members</a> </li>

</ul></div>

 

 

  </div>

 

should be:

<div class="center">
<div class="logo"><img src="images/logo.gif" width="500" height="100" alt="logo" /></div>

<div class="menu">

<ul>						
<li class="selected"><a href="index.php">Home</a></li>
<li class="nonselected"><a href="#">Login</a></li>
<li class="nonselected"><a href="#">Register</a></li>
<li class="nonselected"><a href="#">Forms</a> </li>
<li class="nonselected"><a href="#">Members</a> </li>
</ul>
</div>

 

2. XHTML requires an alt tag on all images. Give your logo an alt tag

 

3. "example of links" - this is a mess - again you used a p tag instead of a proper list selector tag ul or ol.

 

Lists are block level tags. And you cannot have a list inside of a paragraph - it MUST be a list selector (ul, ol, dl) and all text MUST be within an open and CLOSING li tag.

 

You didn't designate a list selector, left off the closing li tags and tossed in a closing div tag out of the blue:

 

You have:

<p class="center">
    These are some example of links:
<li><a href="http://www.google.com">Google</a> 
<li><a href="http://www.myspace.com">MySpace</a>
<li><a href="http://www.youtube.com">YouTube</a></p>
    </div>

 

should be:

 

<p class="center">These are some example of links:</p>

<ul class="center">
<li><a href="http://www.google.com">Google</a></li> 
<li><a href="http://www.myspace.com">MySpace</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
</ul>

 

4. If you use XHTML, you need to use proper html chars.

 

Quotes are bad -  an ampersand is bad -  a copyright symbol is bad.

 

You had:

 

<p> Site Template & Original Site Content

        <br />© 2007-2008 <a href="mailto:lamez@lamezz.com">James Little</a></p>

 

It should be:

<p> Site Template & Original Site Content
        <br />© 2007-2008 <a href="mailto:lamez@lamezz.com">James Little</a></p>

 

ALWAYS before you even start to consider "style" (template and layout), make sure you have proper markup code and correct tag structure.

 

I applaud your attempts to use less actual div tags and more p tags, but they must be done correctly.

[LiamProductions]

So what should I do to make it better?

 

Take off the validation sign, When you have 23 Errors!