Sent by Simon Willison on 28 November 2003 19:07
Ian Vaughan wrote:
> What are the benefits of making a site 100% in CSS. If you look at the
> likes of the BBC.com and many other sites they seem to be using a
> combination of html tables and divs ??
Most commercial sites are still sat firmly in the dark ages as far as
CSS is concerned, simply because switching to pure CSS is a pretty huge
undertaking for an existing large scale site. There's also the "if it
works, don't fix it" mentality. I wouldn't be put off the new wave of
web design just because many existing sites haven't got on board yet.
There are always sites such as www.wired.com and www.fastcompany.com if
you're looking for big corporate sites that have made the switch.
> What are the benefits of creating a site in 100% CSS over what the likes
> of the BBC do which is a combination of HTML and CSS Divs ? Can a site
> made in 100% CSS be viewed in browsers such as IE 4.0 etc as it needs to
> be available to not just the top end users
A summary of the benefits:
1. Greatly decreased page sizes
2. Greatly increased accessibility for alternative browsing devices
3. Less code = better maintainability
4. Tweak your whle site design by changing a single file
A pure CSS layout site, done properly, will be compatible with every
browser ever made (all the way back to Mosaic). That's provided you
don't mind older browsers displaying your site as black text on a white
background with no layout save that provided by the browser's default
rendering of lists, headers and so forth. If you want pixel perfect in
IE4 you're in for a world of pain. If you want the content to be
viewable on any platform, welcome to the party.
> And how can the snippet of code I have below (which is the header) be
> made into CSS, or would you recommend it is left as it is ?
There are a myriad of ways of improving that code snippet. You could add
just a tiny bit of CSS to get rid of those ugly font tags, or you can go
the whole hog and redo it as a div and a few structural elements.
Here's my attempt:
<style type="text/css">
div#header {
width: 780px;
margin: 0 auto;
}
div#header h1 {
float: left;
margin: 0;
}
div#header p {
text-align: right;
margin: 0;
color: #39c;
}
</style>
<div id="header">
<h1><img src="mainheader.gif" alt="NPT.GOV.UK - Welcome to
Neath Port Talbot Online" width="197" height="41"></h1>
<p><a accesskey="C" href="#" title="Link to the Welsh version of the
site">Cymraeg</a></p>
<p><a accesskey="C" href="#" title="Link to the Text Only version of
the site">Text Only</a> |
<a accesskey="0" href="#" title="Link to the Access Guide">Access
Guide</a> |
<a accesskey="3" href="#" title="Link to the A-Z of Council
Services">A-Z of Services</a> |
<a accesskey="9" href="#" title="Link to Contact the Council
Page">Contact Us</a> |
<a accesskey="5" href="#" title="Link to Frequently Asked
Questions">FAQ's</a> |
<a accesskey="C" href="#" title="Link to Language Translations for
this site">Languages</a></p>
</div>
Hope that helps,
Simon Willison
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/