17nov

Créer votre menu css en 5 étapes avec CSS menu builder

CSS Menu Builder est un excellent outil pour créer rapidemment un menu en css pour votre site. A la différence d’autre site, avec CSS Menu Builder, c’est à vous de créer le menu.

Cet outil fourni tout: le code html, le code css et les images. Il ne vous restera plus qu’à l’intégrer à votre site.

Comment ça marche:

  1. Choisissez l’orientation de votre menu (horizontal ou vertical).
  2. Sélectionnez le fond du menu.
  3. Sélectionnez le style du menu. (aspect des liens)
  4. Choisissez les couleurs des differents éléments de votre menu.
  5. Télécharger le fichier zip (possibilité de faire un copier/coller des codes et images)

Le site en question: CSS Menu Builder
16nov

Choisir une feuille de style pour IE avec les commentaires conditionnels

Les commentaires conditionnels permettent de choirsir une feuille de style précise en fonction de la version d’Internet Explorer.

Le principe est simple. Il suffit de placer ce code entre les balises <head> et </head> de votre code html:

  1. <!--[if IE]>
  2. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  3. <![endif]-->

Ce qui se traduit par: Si le navigateur est Internet Explorer, il faut utiliser cette feuille de style. On peut bien sûr utiliser une autre fonction entre les balises comme par exemple: indiquer au visiteur qu’on sait qu’il utilise Internet explorer !

Syntaxes et options possible pour les commentaires conditionnels:

  • if IE 5 : Pour toutes les versions d’Internet Explorer 5 (5.0 – 5.5)
  • if IE 6 : Pour la version 6 d’Internet Explorer
  • if IE 7 : Pour la version 7 d’Internet Explorer
  • lt : Pour toute les versions inférieurs à … (ex: if lt IE 6 –> Le code sera éxécuté par Internet Explorer 5 et 5.5)
  • lte : Pour toute les versions inférieurs ou égales à … (ex: if lte IE 6 –> Le code sera éxécuté par Internet Explorer 5, 5.5 et 6)
  • gt : Pour toute les versions supérieurs à … (ex: if gt IE 6 –> Le code sera éxécuté par Internet Explorer 7 et 8 )
  • gte : Pour toute les versions supérieurs ou égales à … (ex: if gte IE 6 –> Le code sera éxécuté par Internet Explorer 6, 7 et 8 )

Voici un exemple de code que j’utilise régulierement:

  1. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  2. <!--[if lt IE6]>
  3. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  4. <![endif]-->
  5. <!--[if lt IE7]>
  6. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  7. <![endif]-->
  8. <!--[if gte IE7]>
  9. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  10. <![endif]-->

Dans cet exemple, la première ligne sera utilisé par firefox (Safari su mac). Il faut donc construire le CSS autour de ce navigateur.

Ensuite pour les feuilles de styles spécifiquent aux versions de IE, il suffira de modifier les lignes qui provoquent une mauvaise mise en page.
15nov

Sélectionner un code CSS en fonction du navigateur

Un des plus gros soucis pour un développeur est de rendre sa page web identique sur tous les navigateurs. La méthode décrite ci-dessous permet de détecter 14 navigateurs et 3 OS.

Liste des navigateurs compatibles:

  • ie – Internet Explorer (toutes versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (toutes versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Liste des OS compatibles:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS

Pour bénéficier de cette fonction, il suffit de télécharger ce fichier javascript (moins de 1Ko):

Placer ce fichier entre les balises <head> et </head> à l’aide du code suivant:

<script src=”css_browser_selector.js” type=”text/javascript”></script>

Une fois ces opération effectué, il ne vous reste plus qu’à compléter votre code CSS comme indiquer dans l’exemple qui suit:

  1. .ie .example {
  2. background-color: yellow
  3. }
  4. .ie7 .example {
  5. background-color: orange
  6. }
  7. .gecko .example {
  8. background-color: gray
  9. }
  10. .win.gecko .example {
  11. background-color: red
  12. }
  13. .linux.gecko .example {
  14. background-color: pink
  15. }
  16. .opera .example {
  17. background-color: green
  18. }
  19. .konqueror .example {
  20. background-color: blue
  21. }
  22. .webkit .example {
  23. background-color: black
  24. }
  25. .example {
  26. width: 100px;
  27. height: 100px;
  28. }
  29.  
  30. html.gecko div#header {
  31. margin: 1em;
  32. }
  33.  
  34. .opera #header {
  35. margin: 1.2em;
  36. }
  37.  
  38. .ie .mylink {
  39. font-weight: bold;
  40. }
  41.  
  42. .mac.ie .mylink {
  43. font-weight: bold;
  44. }
  45.  
  46. .[os].[browser] .mylink {
  47. font-weight: bold;
  48. }
  49.  
  50. -> pas d'espace entre .[os] et .[browser]

Source: Rafael Lima
13nov

Créer un bouton à l’aide de CSS

Le terme rollover indique le changement d’état d’une image au passage de la souris. Dans cet exemple, nous allons utiliser cette fonction pour créer un bouton.

En CSS, il existe plusieurs façons de créer cet effet mais dans cet article je ne détaillerai que la méthode que j’utilise régulièrement.

Elle présente 3 avantages:

  • Les deux images sont chargées à l’ouverture de la page (pas d’attente pendant le changement d’image)
  • pas de JavaScript
  • W3C valide

Présentation du code: (voir l’exemple)

La partie HTML:

  1. <a class="bouton" href="lien.html"><img border="0" src="bouton.jpg" alt="bouton" /></a>

La partie CSS:

  1. a.bouton {
  2. display:block;
  3. width:XXpx;
  4. height:XXpx;
  5. background-image:url("bouton_hover.jpg");
  6. }
  7. a.bouton:hover {
  8. visibility:visible;
  9. }
  10. a.bouton:hover img {
  11. visibility:hidden;
  12. }

Remplacer les XX dans width et height par les dimensions de votre image !

L’exemple en téléchargement:

télécharger