Examples of layouts using valid XHTML and CSS

[oracleguy]

Due to the common misconception that most CSS and XHTML sites are boring, plain, and dull this thread is for posting examples of sites that use XHTML and CSS for their layouts.

So please post links to sites that are good examples of XHTML/CSS based layouts.

And thanks to pardicity3 for the idea for this thread.

<edit>Now this thread is taking some direction, it is time for some rules.</edit>

Posting rules:

The site must be reasonably cross-browser supported
The page must validate as XHTML 1.0 Transitional or higher
Absolutely no tables may be used for layout purposes
The site must be complete.


Posts/links that do not conform to these guidelines will be deleted without notificiation.

[theabyss]

CSS Zen Garden, Blue Robot, W3.org and my website are some among the many.

[bradyj]

http://www.stopdesign.com/articles/process/
http://www.zeldman.com/
http://www.adaptivepath.com/

Does my company website count:) :
http://www.dotfive.com

[brothercake]

My last project http://www.morimarketdynamics.com/ http://www.brothercake.com/logos/favicon.gif

Also demonstrates standards-compliant Flash embedding, based on the Flash Satay (http://www.alistapart.com/stories/flashsatay/) technique at ALA (http://www.alistapart.com/), but hacked (http://www.codingforums.com/showthread.php?s=&threadid=13352#post113209) with conditional comments to make it work in Win/IE5.0. <nb>I have a better idea about that though, i'll update this once I've tried it</nb>

[cg9com]

Also check this (http://codingforums.com/showthread.php?s=&threadid=20862) sticky.

[Mhtml]

Check out Kryceks IPB mod page! http://www.emoticate.net

[DoubleV]

doesn't seem anybody mentioned glish.com (http://www.glish.com/css/) yet

[pardicity3]

I am most impressed when very large and/or business-related sites are accomplished through the use of XHTML and CSS. Some of these sites:

http://www.inc.com/home/
http://www.message.uk.com/

Then of course there are the more personal and/or non-business-related sites that are quite beautiful indeed!

http://www.whatdoiknow.org/
http://www.clagnut.com/

[theabyss]

I found Apache.org to be a good site that has XHTML. My favorite page, you ask?

Documentation for Apache 2.0 (http://httpd.apache.org/docs-2.0/)

It validates! :thumbsup:

<?edit:msg?>
Removed text about wired.com not validating because it was removed from the list.

[CrzySdrs]

I guess this qualifies, just a small personal site.
Mitch Souders Enterprises (http://crzysdrs.net/)

[Skyzyx]

The new and improved Skyzyx.com (http://www.skyzyx.com)

Also, Golden Rule Produce, Inc. (http://www.goldenruleproduce.com/home/)

[ionsurge]

Oh the most beautiful one of the lot :

http://www.csszengarden.com/

[DougBTX]

Originally posted by oracleguy
So please post links to sites that are good examples of XHTML/CSS based layouts.

here's one for you:


http://redmelon.net/ (this one is mine, two layouts for the price of one :))

Later,
Douglas

[theabyss]

You're site is very good! I love the alternate stylesheets :thumbsup:

[MotherNatrsSon]

I did not see it in the list and I mentioned it in a coupe of other threads so I'll add it.

www.peterbailey.net beetle's site

MNS

[beetle]

Thanks MNS :D

I'm sure some (many?) of you have seen this, especially if you read some design/web related blogs.

http://www.adaptivepath.com

It looks pixel-for-pixel identical in IE5/6, Moz, and Opera 7. Amazing.

[Mhtml]

Adaptive Path is probably the best one I've seen! :)

[theabyss]

He's talking about the dotted lines everywhere. Under links, as a separator, etc. Doesn't look too good, and there's a bunch of errors in validation. This page:

http://www.adaptivepath.com/publications/essays/archives/000058.php

Has a whole bunch of & in their code. The entity & amp; is supposed to be used instead.

Overall, I'd give it a 6/10. Minus two for validation errors, and another two for those dotted lines. It's not so bad if they use it in one spot, but I see them everywhere :rolleyes:

<?edit:msg?>

Added space in the amp; because it printed a single &

[beetle]

Originally posted by theabyss
...talking about & errors...All of those are from the article - not anywhere else (they all exist in a single <pre> element). I think it's clear that this is old content stuffed into the new site that hasn't yet been tweaked. I can't fault the quality of the site/layout/css/design etc for that. They need to let their article writers know about the &amp;amp;s.

MNS - I see what you mean - and that is not what I expected to see. Let me know if you have different results after chaning your text settings as bradyj suggested. Just let it be known: that is not how it looks on the 4 browsers I've tested.

[Skyzyx]

I came across something very interesting in Designing with Web Standards (http://www.zeldman.com/dwws/) last night:

By default, Windows resolution is set to 16px/96ppi, while Mac OS 9 and earlier are set as 12px/72ppi (to more closely emulate Adobe PostScript).

Apparently, several browser makers got together in 2000 to define a single default resolution for all web browsers. They decided on 16px/96ppi since the majority of web users used this setting already.

Because many sites used special CSS files for Windows and Macs, this new setting on Mac browsers caused text to be huge, so Mac users would switch back to the 12px/72ppi view... thus, messing up much of the work done.

These days, when web people (designers, coders, etc) make websites using web standards, they should only have to specify type sizes once, but because so many people reverted back to the smaller sizes, text still looks either too large or too small on Mac Classic systems. Mac OS X defaults at 16px/96ppi.

Another problem is that the new Camino and Safari browsers default to 14px font sizes.

Keeping in mind that 16px (pixels) is not the same as 16pt (points), there is supposed to be a way for Mac users to change to the "standard" 16px/96ppi setting either in the browser, or in the OS itself (I thought I remembered reading it was an OS setting, but I could be wrong).

Just a heads up! :D

[beetle]

Originally posted by MotherNatrsSon
Keep your standards out of my browser preferences!!!Wrong attitude. Get upset at the browser makers or the fact that Macs/PCs default to different ppi resolutions. The standard has nothing to do with this.

[me']

wow!!

Some of these sites definately rock.

As I'm interested in getting back into the website building scene (as a hobby), could anyone reccomend a tutorial for CSS layouts?

I have a general knowledge of CSS, but I have really only used CSS to save time with the <font> tags and as an alternative to the <body> tag (ie: without the vlink="blue" etc).

Thanks :)

[CrzySdrs]

Go to W3 Schools (www.w3schools.com). They have tutorials for everything including CSS

[Kev@DDN]

I humbly submit the second site in my sig :)

which is my persoanl page (http://www.kevinleitch.co.uk)

[Vladdy]

Originally posted by Kev@DDN
I humbly submit the second site in my sig :)

which is my persoanl page (http://www.kevinleitch.co.uk)
Not a good example - breaks when I increase the font size :(
On a bright side - very fixable :thumbsup:

[Vladdy]

Finally two of my creations brought to "pretty much done" status:
www.tsindos.com
www.klproductions.com
Hopefully worthy of being mentioned here.....

[me']

Two words (or technically, one hypenated css property). background-color. It's kinda obvious when your using a browser with a custom background colour set :).

[mindlessLemming]

I would like to submit my mini-site.
See sig. for link.

[me']

Nice little site there. The layout and the colour scheme are great :)

[spufi]

http://www.9rules.com/cssvault/

[GeG]

The PHPTalk Challenge (http://challenge.phptalk.com),

verified XML (at least at the start ;) ), and you can even win an ionCube PHP encoder

[gsnedders]

http://f1unleashed.geoffers.uni.cc

[circusbred]

http://www.circusbred.com
http://support.circusbred.com

[ReadMe.txt]

does My Site (http://www.readmetoo.co.uk) qualify?

validates fine :) might be considered a bit plain tho. (check alt stylesheet for more graphical design)

[Thealfrin]

here's one for you:


http://redmelon.net/ (this one is mine, two layouts for the price of one :))

Later,
Douglas
Wow that is really impresive with the different layouts

[Graft-Creative]

I like Peter Bailey's site, just for the fact that it doesn't look like a blog. The html is so streamlined too, compared to what it would be coding it 'the old way'. Not sure that having an image as the main content of your hompage is such a good idea though.

[Graft-Creative]

Red Melon is nice too, though with the Holland connection I initially thought the logo was a cannabis leaf in a circle, or is that intentional? hehe

[sharkey182uk]

Ive been told that my site qualifys in the site review thread so here it is.

Elastic Node (http://www.elasticnode.com)

[bradyj]

Some of your links go to the 'Freeola' website, and not just the templates button -- resources and modern/digital photos link... was this meant to? If not, then it's 'not complete' and then it doesn't comply to the last requirement that OracleGuy said in the very first post.

Otherwise your XHTML and CSS validates, it's a keeper :thumbsup:

[mindlessLemming]

Oh yeah, I forgot all about this sticky...

Left Justified (http://leftjustified.net/)
My site. Won a weekly webstandards award.
Nothin' special.

[bradyj]

Oh yeah, I forgot all about this sticky...

Left Justified (http://leftjustified.net/)
My site. Won a weekly webstandards award.
Nothin' special.

Cocky little... :D
I'm teasing it was well deserved:) :thumbsup:

[bradyj]

Mine gets runner up for weekly standards and stylgala:
http://www.igotyourhouse.com

[Venom989]

One of my favs:
Veerle's Blog (http://veerle.duoh.com/)

[bradyj]

Body Ecology Diet:
http://www.bodyecologydiet.com

...with valid, tableless search results to boot:)

[grubesteak]

Well, here's my entry:

http:www.pixelsaloon.com

[ArcticFox]

To this point I've visited every one of the sites listed and have one word to say about the majority:

Boring!

If I wanted to see something that looked like a tourist brochure for the south americas, then I would just go to my travel agent! Web pages are suppose to catch one's eye, to cause a sense of curiosity. XHTML sites make me want to take a nap! And on a couple listed, it took longer to load up than my site does - so, yes, I took a nap while waiting for your “Valid XHTML” page to load.

Elastic Node's got enough PHP errors to choke a horse.

There are exceptions to sleepy-time sites, though:
http://redmelon.net/ - now here's something awesome. This is something different, non-easter-looking, working, valid XHTML w/CSS. Well Done!

The rest... it's like I'm looking at bathroom tile in a cheap motel.

Sorry, but damn.

[bradyj]

ArcticFox -- I don't see why you would take the time to blast anyone else's design -- you have little experience in this area, and from your own personal design, I wouldn't look at you as the authority for what is and isn't quality design.

There are some excellent examples in this thread, and some that may not be. Design is not about creating an overproduced, eye-catching product everytime -- not all markets or trends have that need. Professionals know this, and understand this.

In the end, it's based on the product, the market, the service, the trend -- and a slew of other factors. Just because you like high production, doesn't put any other designs at a fault.

[evo]

Well one of the sites suggested is very poor, whereas the other two are not even functional.

I personally do not see why or how they would be viewed as examples of layouts using valid xhtml/css.

[mrgreedy]

www.discovery-cove-orlando.co.uk

Hope you like

Mrgreedy :thumbsup:

[bradyj]

www.discovery-cove-orlando.co.uk

Hope you like

Mrgreedy :thumbsup:

Looks good -- check it in a validator though, just a wee issue, forgot an alt tag. Remember to check all your pages for validation:
http://validator.w3.org/

[mindlessLemming]

alt tag
wtf is an alt tag?
...gotcha :p

[Riboflavin]

I know it isnt much, but it validates, www.advancedconceptions.com/thompson

[Jemmie]

All of my sites (as far as I remember, some haven't been checked in a while) validate as XHTML Transitional or Strict and utilise CSS layouts. My brightest (and favourite of all) is my weblog: http://weblog.jemjabella.co.uk

It's also fluid (no fixed sizes) - works on my PDA! ;)

[bradyj]

http://www.academystudios.com

Simple XHTML site using a tweaked variant of 'What do I know's' Flash Slide show. (http://www.whatdoiknow.org/archives/001629.shtml)

[Graft-Creative]

Looks good Brady :thumbsup: is this a recent one? Not 100% about the whole rounded corners vibe though.

Gary

[bradyj]

Looks good Brady :thumbsup: is this a recent one? Not 100% about the whole rounded corners vibe though.

Gary

I like the rounded on the animation and menu, maybe not the rest, I'll give you that:) It's not too recent, I forgot to post it up!

[rmedek]

Have any of you seen this Zen Garden (http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css) entry? Make sure you scroll slowly to the bottom and wait around for awhile. Try hovering around, too.

Or this one (http://www.csszengarden.com/?cssfile=http://www.timpelen.com/extra/zen/zengarden.css)? Yow. I might spend the rest of the day in this section of the Garden.

[Scootertaj]

The first one misspelled "Resources" :p
Other than that it's quite nice!!

I don't like the 2nd one at all...

[The Doc]

my website (www.mw.sko-graphic.de) uses valid xHTML & CSS though it's not yet finished, I'm working on the php-backend.

PS: nearly forgot to mention that it's German ;)

[BroChris]

I like yours very much, Doc. Great colors and layout! Can't understand word of it though!

[The Doc]

Great you like it!
I got the colors form here: Colour Lovers (http://colourlovers.com/index.cfm?section=palettes&sortby=score)

[primexx]

http://cshen.net/?act=demo

look in the web design page for more designs that i made before.

[friscofrankie]

Don't know if it's appropriate but this one's mine it validates and uses CSS for all but catalog items.
www.isaanimports.com

[codeteacher]

valid XHTML & CSS.

http://www.dll-download.net

[Pennimus]

Valid XHTML/CSS with flash and alternative stylesheets based on screen res.

Sitemakers Web Design (http://www.sitemakers.com)

[cherry]

Wow.. The site is really pleasing... I like it..:)

[Ranger56]

Well the site I'm making is valid XHTML and CSS

http://scott.spiderseatbabies.com

[Green Beast]

Cool, never noticed this thread.

http://accessites.org/
http://green-beast.com/
http://tolerodevelopment.com/
http://thompsoncenterassoc.org/
http://adagiospa.com/
http://dantespasta.com/
http://greenmethods.com/
http://greenbeastcms.com/

Mike

[JustinSainton]

http://www.zaowebdesign.com

[Rhstevenson]

My site (http://www.rhstevenson.com/index.html) qualifies;

[TheChosenOne]

Hey Guys i want to make a site like this ...though not of this scale..or this purpose...i wannnu know what technology have u used for this..??

[harlequin2k5]

St. Ignatius Early Childhood Center was also done using xhtml 1.0 strict and css

Suncoast USBC Bowling Association - while in the process of being redesigned was also done using xhtml 1.0 strict and css

http://www.stignatiusecc.org
http://test.suncoastusbcba.org - the more complete site is here (http://www.suncoastwebdesigns.com/test/susbcba)

[theone3]

My Site also qualifies (http://snipurl.com/rxfu)

[Ranger56]

I'm sad cause about half the links don't work anymore.

[WA]

Time to unstick this thread anyway. CSS valid sites are everywhere nowadays.