Retour : Page Principale

---

Recette pour faire de bons CSS

Pour démarrer les feuilles de style proprement

- Quelques conseils ici : http://developer.yahoo.com/yui/reset/ (permet d'avoir le même look sur tous les navigateurs)
- Vérifier par l'extension "html 1.0 strict" que le squelette est valide (pas d'oubli de </div>, ...), et que les CSS sont valides
- Mettre en début de feuille CSS :
* {margin:0; padding:0;}

Comment construire un Cadre (1, 2 ou 3 colonnes) ?

• Demander au graphiste de choisir un modèle de mise en page : Parmi les modèles d'Alsacreation
• ou construire soi-même son cadre à 1,2 ou 3 colonnes via ce générateur de squelette.
• Site vitrine avec plein de modèles de démonstration : http://www.cssplay.co.uk/menu/index.html

NB : les squelettes générés sont compatibles pour TOUS les navigateurs.

Quelques pistes pour résoudre les bugs sous différents navigateurs

IE sous PC

Rappel : IE ne supporte pas les min-height
- Problème de WIDTH sous IE

{width:154px; /*compris par IE qui ne va pas plus loin*/
voice-family: "\"}\"";
voice-family:inherit;
width:152px; /*compris par les autres navigateurs*/}

OU


{width:154px;/*compris par les autres navigateurs*/
_width:152px *compris uniquement par IE*\}

- Hack IE6 et IE7 :
http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php#p2006.4.28.22.56:12

IE sous MAC

Si on fait un commentaire de la sorte :
/*commentaire\*/, IE sur MAC ne pourra pas lire cela.
Exemple :

width :154px /*compris par Opera qui ne va pas plus loin*/
/* Hide from IE-Mac \*/
width :155px /*compris par les autres navigateurs*/

Opera

Pour opéra, rajouter:
html>body .class{ width:300px;}

Sélection de sites pour les CSS

- MaxDesign :
en particulier

• http://maxdesign.com.au/presentation/page_layouts/

et

• http://css.maxdesign.com.au/index.htm

- Si on manque d'inspiration :

• http://www.alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php
• http://www.dynamicdrive.com/style/
• http://www.tonyyoo.com/protolize/

- indispensable à connaitre :

• http://openweb.eu.org/articles/cascade_css/
• http://pompage.net/

- et pour la forme :

• http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
• http://www.skimcss.com/skimlist

- Pour faire des menus déroulants

• S'inspirer d'un http://pompage.net/pompe/deroulants/ article de pompage.net

- Pour choisir les palettes de couleur :

• http://slayeroffice.com/tools/color_palette/
• http://colorblender.com/
• http://www.tutoweb.com/couleurs-websafe.htm

---