Quick critique

[AV1611]

This is the template for a new site.

 

I am just wondering about colors, basic layout, etc. before I do all the stuff. none of the links on either menu work.

 

Thanks.

 

EDIT:

I forgot the link

 

http://tranquilpenguin.com/hevly/

 

[DarkWater]

1.  Ugly header.  It caught my eye first and really was disappointing.  It's so...bland, and in between the letters...well uhh...there's a really light shade of gray which bothered me.

 

2.  Make all of the menu items have the same width so when you hover over any of them, they all get borders the same way.  Less distractions that way.

 

3.  Bring the footer down to the very bottom of the page, not the bottom of the content.

[AV1611]

1.  Ugly header.  It caught my eye first and really was disappointing.  It's so...bland, and in between the letters...well uhh...there's a really light shade of gray which bothered me.

better now?

2.  Make all of the menu items have the same width so when you hover over any of them, they all get borders the same way.  Less distractions that way.

good idea... will do now

3.  Bring the footer down to the very bottom of the page, not the bottom of the content.

... not sure how to make that happen... the page will have dynamic length?

[dropfaith]

how is the layout formated now? height:auto would make them dynamic which i assume your using and then if the divs are floated clear both should work..

 

 

[AV1611]

how is the layout formated now? height:auto would make them dynamic which i assume your using and then if the divs are floated clear both should work..

 

 

Um...

 

body{

height: 100%;

margin: 0px;

padding: 0px;

font-family:arial,sans-serif;

font-size: 12px;

}

div.main{

color: #222;

width: 100%;

background-color: white;

margin-left: auto;

margin-right: auto;

padding: 0px;

position: relative;

height:auto !important; /* real browsers */

height:100%; /* IE6: treated as min-height*/

min-height:100%; /* real browsers */

}

 

Then the content side is float right and the left is float left.

 

the content is stacked divs

 

now do I make the last div be the bottom, even when the page is changed?

 

[DarkWater]

I like the menu more now, and the header is slightly better than before.  It just seems so...bleh (the header, I mean).  You can do so much with a header.  It gives the first impression of the page.

[ifubad]

IMHO

 

boring color scheme, that gray is really depressing, makes me want to call suicide hotline

 

Left aligned page, I personally think left aligning feels a bit bowlegged, too much weight on one side

 

Very bland hover style menu

 

Banner is really plain and boring to look at

 

for a 120k page with only 8 request, it loads toooo slow. I'm working on a site, where one page is loading about 3mb with 66 request, takes about the same amount of time as yours. Hope that's not the server you'll be serving up pages with.

 

The stats counter has a gray border extending pass the vertical menu div. Why put up a stats counter logo anyway? That trend was happening about 10+ years ago.

[DarkWater]

^ Completely agreed with those suggestions.  I happen to love centered layouts, but that's just me. xD

[ifubad]

also, it's a good idea not to display irrelevant information like the W3C Validated line, only info that is related to what your site is offering, everything else, nobody cares, just extra clutter.

[ifubad]

now do I make the last div be the bottom, even when the page is changed?

 

style your footer div with clear left or right, try clear:both, which will clear the div that is next to it.

[ifubad]

Hey Darkwater, started coding when you were about 9 or 10? Cool, wish I really got into it when my parents bought me my first computer, the FIRST Apple for $3k, still remember opening it up, it was as empty as my ex-girlfriend's head. Anyway, keep it up, you just may be the next to sell a site for 1 billion.

[DarkWater]

Hey Darkwater, started coding when you were about 9 or 10? Cool, wish I really got into it when my parents bought me my first computer, the FIRST Apple for $3k, still remember opening it up, it was as empty as my ex-girlfriend's head. Anyway, keep it up, you just may be the next to sell a site for 1 billion.

 

Ha, thanks.  I got into it when my parents bought me my first computer, actually. xD  I've been keeping up with it ever since, but it's getting to stay and practice since I'm in high school.  Clubs, sports, parties, girls, girls at parties...Lol.  Life is too hectic. >_<

[ifubad]

Clubs, sports, parties, girls, girls at parties...Lol.  Life is too hectic. >_<

 

You're young, have fun, enjoy life. Yes, girls and partying are an important part of life, I did my share of those, maybe a little too much when I was a few years older than you. Just remember one thing, time flies, next thing you know, those things are not so important anymore. BUT, in the mean time, mingle away with the girls

[DarkWater]

Lol, life lessons with ifubad.

[ifubad]

I just took a quick look at your page source, WTF, I almost crapped in my pants!!!

 

[AV1611]

I just took a quick look at your page source, WTF, I almost crapped in my pants!!!

 

um... why?

 

I have all the css (including some that's not being used) in the index file while I work up the site.  I also have to move some css from the tags to the css class. Other than that I can' t imagine what you mean.

 

To whoever: I only have the w3c crap at the bottom because I like to check my work often. I will replace that footer info with some site info.

 

As for the stats thing... not my idea... the person wants it.

 

I agree, the banner sux... but I'm not a graphic artist Anyone who wants to make me one ...

 

I am converting the site from what they originally had here: http://www.hevly.net/

 

I agree gray is dull... but I don't have a better idea ... it's not a "marketing" site so much as a technical info site.

 

 

[AV1611]

 

3.  Bring the footer down to the very bottom of the page, not the bottom of the content.

 

Fixed...if I understood what you said...

[DarkWater]

I just took a quick look at your page source, WTF, I almost crapped in my pants!!!

 

 

Whoa, that's really messy.

[AV1611]

I cleaned up some of the css last night, but it's not done. 

Did the color change on the main menu on hover help?

also, the stuff I already changed.

 

anyone else got suggestions?

 

thanks so much.

 

(BTW if you wanna see ugly code look at the source of the site they did I posted above (it was publisher ))

 

[ifubad]

you are over using the <p> and <div> tags. why don't you create the menu items using a list instead. The address for example, why are you putting each line in a <p>? That's all I see mainly, p and div everywhere.

 

(BTW if you wanna see ugly code look at the source of the site they did I posted above (it was publisher ))

 

True, the original site's source is a Picasso too, but that's not an excuse to create a slightly different mess.

 

I understand gray is the easiest color to use to match everything, but it is DULL DULL DULL. Give it some life.

 

if you want to easily validate css and html, get the firefox add-on firebug, those features are within the Tools menu

[AV1611]

you are over using the <p> and <div> tags. why don't you create the menu items using a list instead. The address for example, why are you putting each line in a <p>? That's all I see mainly, p and div everywhere.

 

When I do a list, maybe I'm dumb but I can't get the left to not "indent" and I ran out of room.  I had it that way at first. I'm curious... does it hurt aside from it doesn't look good?

 

if you want to easily validate css and html, get the firefox add-on firebug, those features are within the Tools menu

didn't know that. thanks.

 

[ifubad]

I can't get the left to not "indent" and I ran out of room.

 

The extra space on the left within a list is padding, if using an unordered list for example, set ul {padding:0} will get rid of it.

 

You should check out the tutorial on css based list, if you read that section, you will have a better understand of it http://css.maxdesign.com.au/listutorial/

 

does it hurt aside from it doesn't look good?

 

no, it just doesn't look good, that's all. But, you don't want it to look like crap either, it's actually really easy to do.

 

You need to also check your layout in IE6 & 7, the vertical menu along with the footer are pushed way down the page, IE6 and probably 7 are screwing it up. As long as you have XP sp2 or Vista with IE7 installed, get this IE simulator, you can then easily test IE5.5, 6, 7 and 8 beta all in one app, without doing a multiple IE install. When using IETester, just make sure that every time you first load the app, select the default IE7 first, otherwise, the app itself will crash. http://www.my-debugbar.com/wiki/IETester/HomePage

 

In honesty, who cares about IE, but unfortunately, IE6 & 7 still have 50+ % of the market.

 

 

[ifubad]

if you want to easily validate css and html, get the firefox add-on firebug, those features are within the Tools menu

 

Sorry, it's "Web Developer" https://addons.mozilla.org/en-US/firefox/addon/60  but you should get firebug also.

[AV1611]

I have not really looked at IE yet

 

I find it depressing that I can build a site 100% W3C compliant only to find out that the site looks bad in ie ... won't go there

 

I added a background and moved the site to center. wadda ya think? I hope it help make the site at least a little less drab...

 

(I'm trying to figure out how to balance widescreen and standard monitor widths... centered looks better on standard, but left looks better on wide IMO)

 

Also, I do all my work in linux with gimp, gedit, and Firefox.  I don't even like to startup M$ stuff on my clean virus free network

 

...but alas I will have to go look... ug...

[ifubad]

only to find out that the site looks bad in ie

 

Wait until u see it in IE.

 

The centering and background made it looked a bit better than before. The horizontal menu button hover brown, does not stand out from the dark gray background and they're kinda hard to read, should use a lighter shade.