Thread: Corporate Site Template

Hey Guys,

I'd like your opinions on a site I've done. It was just a quick project to demonstrate my html and css skills. Check the link and tell me what you think, I'm sure there is lots of little errors I've missed. Oh, and the form doesn't work it is just for show.

Also, anyone know of a good site where you can get images to put on your site?

Since you asked about the coding only, I wont comment on the design, although its nice

you need to have a look at what elements are allowed in a strict doctype, like you cant use border and you cant use target..

there is no alternative to target, but for border, the easiest solution is to do a css class border { border: none; } and include that.

also dont forget alt tags..

lastly. I would change the doctype and correct any errors it produces after the change to strict 1.0

the reason for this is that your coding is more xhtml than html... you have tried to close tags properly, but failed, although it will give you a few more errors to deal with, it will make the site more compliant with more applications.

It is quite a sore subject, as to which doctype to use but please believe me, I have done allot of studies into the differences and which is best to use etc.. some situations do cause for html or even transitional, but from what I have read up, strict 1.0 is the most complient you can get so that is my preference on any new site I build, unless its a forum or cms that HAS to have transitional.

Not bad for a start.

NB: If I happen to use the word design, I mean coding that affects the look of the page/site.

I will try and show you the problems without giving solutions. If after a day or two you have not come up with a result that satisfies you, feel free to ask.

2 px have gone AWOL !



Enlarged 400% - There are 2 px less on the menubar than in the header. I am sure you did not intend that.

Backward Compatibility:



On IE6 (25% of internet users still operate this browser - don't ask me why) you have something showing that should not be there.
NB - Unfortunately backward compatibility to at least IE6 is a requirement today.

What happens when the left column grows?



Nothing much. That's good. You may however want to consider the light blue box to expand too. It may balance the page.

What happens when the right column grows?



I would class this result as unacceptable. A TEMPLATE should be able to deal with such an eventuality.

CSS in General

There is no need for extra CSS on the HTML page, all this can be done in a single CSS file (see: http://webprocafe.com/css/214-multiple-backgrounds.html - I must be getting soft pointing you in the right direction)

I think you are a little over-indulgent with your CSS. Too much padding for my taste.



For images try: 25 Free Stock Photo Sites :: Digital Image Magazine and/or check our resource pages.

Thanks saltedm8 for the advice regarding doctype. Made some changes, corrected all errors and validated the site on W3C validation service and it has passed.

shalom_m, it looks like you have had a good thorough look at my site. Thanks very much for taking the time to do that. Much appreciated! I have come back with some issues that I am having.

2px have gone AWOL! - I've sorted the nav bar and banner so they are both 928px but when you hover over the nav bar on the contact us link it doesn't quite hit the end of the nav bar. I thought the problem was with the padding below but if I up the 37px to 38px the link goes down to the next line. I'm a bit clueless to what the problem is.

.navLink {
float: left;
padding: 3px 37px;
margin: 0;
text-decoration: none;
color: #fff;
}
.navLink:hover {
background-color: #009900;
padding: 3px 37px;
}

backward compatibility - I dunno what is going on here. I've had a look and I'm clueless. I'm assuming the extra txt is from the contact us link but I'm still looking into whats going on here.

left/right column growing - how did you go about testing these?

backward compatibility

I know, this is a tough one.

Code:

.navLinkHome, .navLinkCompany, .navLinkClients, .navLinkOurteam, .navLinkContact {    
    float: left;        
    padding: 3px 37px;        
    margin: 0;            
    text-decoration: none;        
    color: #fff;            
}

Reduce the 37 to say 27 and it will work fine.
That leaves the question WHY!!!!

left/right column growing
The testing is simple, just add text/links to each column so that it becomes much longer than the facing column and see what happens.

There are a number of different solutions - are you still looking?

backward compatibility
Going from 37px to 27px means that the buttons are not lined up in the nav bar and there is extra space at the end of the contact us link. Maybe I need to put the nav bar in a list instead? Or change the float? I'm unsure about this one. :blink:

left/right column growing
I've sorted this. I got rid of the blue square image that was in the rightColumn div and just put a background colour on the rightColumn div. Looks like it has solved the problem.

in response to this

On IE6 (25% of internet users still operate this browser - don't ask me why)

It's because of microsoft still supporting w2k and enterprises seeing no need to upgrade (why spend unnecessary money?) although in 2010 w2k loses all free support through ms, so expect to see some decline towards the latter of 2010.

In regards to the template, it all seems to be pretty much ok, not checked through the css, but the html looks good. I always use ul's for nav's, maybe this is preference though?

Once a link in the left side is clicked, there's no hover effect, and the link becomes very faint. There should always be a hover, this shows it's clickable. And text should always always be readable, it's all about communication at the end of the day.

Contact form, email is being pushed out to the right, looks a bit odd (using chrome v2).

Other than that it's looking good, i know you said not to comment on the design, only the code. But the design is simple, and that's NEVER a bad thing

My only suggestion to improve, would be to see if you can add a little variation into the different content pages.

just my $0.02

backward compatibility

the 27 was a hint, here is another one:
On the original 37 xp the extra (offending) line does not appear if you hover over HOME. It appears if you hover over the other links.

left/right column growing

No, you avoided the problem, you did not solve it.
See A List Apart: Articles: Faux Columns
Faux Column CSS Layouts - Code-Sucks.com
Fixed Width CSS Layouts - Code-Sucks.com

And google for more.

There's also a purely css only version of equal columns, but it's a little hacky and can in some situations have some slightly unusual side affects. Just posting to make you aware that there is an alternative to faux columns, but faux columns is the easier, cleaner solution.

I think I am having some kind of developers block today as I am so lost.

bocaj - thanks for your input, very informative.

shalom_m - regarding the backward compatibility I have no idea. I don't have IE6 so its making it difficult for me to see the problem. Do you know where I can check the site using IE6?

left/right column growing
I need to ask why my solutions for this was not a solution but an avoidance? Understanding this will help me a lot.

I've had a look at the links you suggested but I'm still a bit stuck. From what I can see it is suggested to have a background image with the right column in the image and put this in a id of a div for example container and then style that div, but I don't really understand the point. Why not do it the way I have? It seems a lot more winded this way. I'm still working on this but I think if you could help me understand the point then it will help me.

I hope I've explained myself well. Like I said.... developers block today. Think I need to sleep on it and be fresh in the morning!