Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

More CSS trickery

Stu Nicholls dropped me a line earlier to pimp his new CSS demo site, www.s7u.co.uk. He’s got some really nice tricks and the site warrants serious exploration. There’s a good take on the classic 3 column layout with header and footer problem, a bunch of neat menus and a bunch of fun demos that defy categorisation.

Posted 16th December 2003 at 1:31 am

This is More CSS trickery by Simon Willison, posted on 16th December 2003.

View blog reactions

Next: RELAX NG now an ISO standard

Previous: Joel on Eric

13 comments

  1. The CSS Christmas greetings card is freaking, as many other things on this site. Great job.

    P01 - 16th December 2003 03:52 - #

  2. The site will not open at all for me :(

    Ben Thorp - 16th December 2003 09:50 - #

  3. The site was temporarily unavailable with a 500-status code; but should be fine now and it is worth visiting, even if it is just for the amusement factor.

    Robert Wellock - 16th December 2003 12:14 - #

  4. Yeah - I got on eventually :) Definitely worth the wait. Lots of useful stuff, especially for someone like me who went straight from HTML to JavaScript to PHP and somehow managed to bypass CSS completely.........

    Ben Thorp - 16th December 2003 14:38 - #

  5. After digging through the site, I noticed a few things. In the simple version of the 3-column layout, there are two divs with an id of 'headfoot'. In the Mozilla section, the Cascade example is set to validate as XHTML 1.1, but fails to do so because of uls with an id starting with a number, which is a no-no in most languages. Also, his basic layout would never validate without the addition of div and span to the anchor tag, as is defined in his DOCTYPE. On the normal version, he says that it could have simpler if Mozilla didn't get it so wrong, but without digging through every example, I can't but wonder how many examples suffer from non-validation and poor code. I don't doubt that he has many good ideas, but he needs to clean up his code, and also have a comment section so people can offer feedback and improve the examples!

    Sean Sieg - 16th December 2003 16:24 - #

  6. The site doesn't display at all in Mac IE 5 due to errors in the HTML code.

    kirkaracha - 16th December 2003 19:29 - #

  7. His menu example (number 9) won't validate, as he has a div (a block-level element) inside of a link (an inline element). This is the big reason I haven't gotten pure CSS flyout menus working in IE for Windows; it isn't a "valid" (in the W3C sense) option.

    Vinnie Garcia - 16th December 2003 21:14 - #

  8. Kinda nifty, but why did he only use such a tiny, tiny area in the middle of the page? With scroll-bars that really p*** me off even.

    arb - 17th December 2003 06:43 - #

  9. Thanks for all your comments.

    The site as it stands is work in progress and there are many css 'errors' that I am looking into.

    The basic idea of was to see what could be done with xhtml and css (this is all that is allowed on the Portland Free hosting) but not necessarily use 'valid' xhtml1.1 or css (I save this for one of my other sites) and aimed at the latest browser versions.

    This site has been constructed in just two weeks and the original layout was intended to be viewable at 800x600 with no scrolling. This has gone by the board and I am working on a new layout at the moment.

    Being on the freeweb hosting, I could not add any form of feedback, but again this will be changing shortly.

    Although I have used div and span in anchor tags which is non validating, I have extended the DOCTYPE to add these (which I believe is allowed using XHTML1.1) in an attempt to validate. But w3c still does not recognise this.

    Stu Nicholls - 17th December 2003 11:30 - #

  10. Yes, extending the XHTML DTD is allowed as I have did it when creating my customised; valid "XHTML Embed 1.0". Though there can be unwanted side-effects with altering such things like hyperlinks to that extent.

    Robert Wellock - 17th December 2003 13:12 - #

  11. The basic idea of was to see what could be done with xhtml and css (this is all that is allowed on the Portland Free hosting) but not necessarily use 'valid' xhtml1.1 or css (I save this for one of my other sites) and aimed at the latest browser versions.

    I'm using Portland's free hosting for a website. They took PHP (and CGI - or was that always unavailable?) away a couple months ago when some idiots started abusing it. However, I've found that SSI and all still works, so those on the free hosting service can still use the traditional including grammar (and also the variable creation grammar, perhaps other stuff I haven't touched). This is very useful for the site, as it can't afford being on a real host by any stretch at all (otherwise I'd have to hand-code a navigation list, headers, and footers into every page - ugh).

    Jeff Walden - 19th December 2003 21:13 - #

  12. site link and/or site not working (again)

    jimmy - 22nd December 2003 19:51 - #

  13. Unfortunately the site has been out of action recently due to a DNS problem with Portland.

    This has been resolved now and it is back up and running again.

    I have taken the opportunity to redesign the site, whilst it has been down, to make it more user friendly ;o)

    ALL the pages now validate a XHTML1.1 without any need to extend the DTD. The CSS also validates. So for the purists this is now 'hopefully' ok.

    Because of the bandwidth restrictions on the Portland free account I have had to move up to their enhanced service which has php and cgi, so I will now be able to add some sort of feedback page.

    Hope you like the NEW version, there are also a few more examples added.

    Stu Nicholls - 29th December 2003 12:22 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/12/16/trickery

A django site