Stephanie Booth's online ramblings
Mozilla 1.0 is out. Run and get it!
Tip: if the Mozilla download page confuses you, scroll down a bit until you see “Mozilla 1.0 – Released June 5, 2002”. Then click the link corresponding to your operating system in the grey box. Save the file to your desktop (or anywhere handy), then double-click to install.
Having trouble because part of your page doesn’t show up in Mozilla? Using sitemeter, by any chance?
You might be yet another victim of the vanishing div problem, documented by yours truly for the good of all.
If you’re still wondering why you should use CSS instead of tables for layout out your pages, you need to read Eric Costello’s excellent Introduction to CSS Layout.
For more information on how to do it (once you’re convinced), you can always check out my stuff – at the risk of repeating myself. Of course, Eric’s article does a pretty good job of explaining that part too, complete with practical examples.
CSS rocks!
If you find the prospect of wading through the w3c specs daunting, and you are a lucky user of Mozilla or Opera, you’ll find these sidebar tabs invaluable. Yes, follow that link even if you don’t know what a sidebar tab is. I didn’t either before I went there.
These tabs conveniently list all the HTML and CSS elements in your sidebar. Click on the tag, attribute or element you need information on, and you’ll be transported to the relevant place in the w3c specifications. Without the trouble of finding the right spec, and then the right place in the spec. Still there?
I can’t imagine I discovered about them only now.
Yes, Shirley tells us they work in Opera, don’t worry.
Encore un site francophone “sans les tableaux”: celui de Sébastien. Allez lire ses textes, aussi, il y a du bon!
Un truc qui aide beaucoup lorsque l’on travaille sur une mise en page en CSS, c’est de rendre visibles les bords des boîtes (<div>) que l’on utilise.
Voici un bookmarklet qui vous permet de visualiser les boîtes de n’importe quelle page.
Il suffit de copier <a href="javascript:void(d=document);void(el=d.getElementsByTagName('div'));for(i=0;ile javascript en question dans vos favoris. Vous pouvez simplement saisir le lien ci-dessus avec la souris et le faire glisser dans vos favoris (pour mozilla et IE, en tous cas – je ne suis pas sûre de comment ça se passe dans Opera. Pascale?)
Il vous suffira ensuite de cliquer sur ce favori pour visualiser les divs et spans de la page sur laquelle vous vous trouvez. Pratique, non? En plus, ça existe aussi <a href="javascript:void(d=document);void(el=d.getElementsByTagName('div'));for(i=0;i<el.length;i++){void(el[i].style.border='2px dashed red')};void(el=d.getElementsByTagName('span'));for(i=0;ien couleurs! (D’autres bookmarklets?)
[En cas de problème technique, vous connaissez le numéro…]
Want to see “professional” CSS? Take a trip down to adactio.com and have fun switching styles.
No tables!
If you dig theme-switching, check out this article at ALA: Alternative Style.
Dommage… que Biz le prenne comme ça. J’avoue que j’en suis bien étonnée!
On peut pourtant faire de beaux sites en css, aussi bien que des tout simples – surtout si on est d’accord d’envoyer paître les mauvais navigateurs.
Ah oui – trois colonnes, c’est tout à fait possible aussi. Vous êtes en plein dedans, chez moi.
Je ne répondrai pas en long en large et en travers, le sujet a été fait et refait et je commence à me fatiguer. Qui en désire plus, qu’il me contacte directement!
Update: Biz répond à Karl et j’en reste toujours abasourdie. A le lire, on croirait qu’un éditeur est nécessaire pour faire du CSS?! En fait, c’est tout le contraire. M’enfin!
Know the Code.
The browser wars are keeping us up nights.
We’re referring, of course, to the battle between Netscape Navigator 2 and Netscape Navigator 3. Seems the two generations of Wall Street’s (and our) favorite browser parse HTML somewhat differently. This is not a problem for people who write standard vanilla web pages. It was a big problem for us.
There are now over 200 pages in this web site. We’ve revised them all, to enrich your life as you speed-click your way through. Who loves ya, baby?
Some things don’t seem to have changed much on the web during these last years, like losing time working around browser incompatilities. Other things seem to have changed a lot, like taste in design.
If past things interest you, you’ll love the Internet Archive. It’s really interesting to see how design and content evolves through time.
Here are some of the sites I dug through:
If a page doesn’t seem to be in the archive, don’t worry and try later. The Internet Archive is having trouble keeping up with all the requests.
If you’ve been thinking that “tableless” sites are very good for personal playgrounds but not viable for professionnal sites, take another look.
Ben has done a really great job with Netspace. Not a single table (unless you’re using Netscape 4.x, in which case you’ll be redirected to a tablefull page), and all the layout is taken care of by css. Bravo!
Standards compliance requires a separation of structure and presentation. It is never total, we know that, but we do our best. CSS takes care of the layout and presentation, and HTML deals with structuring the content (if you can use xhtml strict, it’s even better).
If you’re thinking of selling this approach to your client or your boss, CSS talking points at ALA will probably inspire you. If you want more technical information, my tableless page will provide you with the necessary links.