woodiv » CSS

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

Damien — Mon, 17 Nov 2008 11:18:05 +0000

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:

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

Le site en question: CSS Menu Builder

Choisir une feuille de style pour IE avec les commentaires conditionnels

Damien — Sun, 16 Nov 2008 03:16:53 +0000

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 et de votre code html:

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:

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.

Sélectionner un code CSS en fonction du navigateur

Damien — Sat, 15 Nov 2008 02:54:11 +0000

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 et à l’aide du code suivant:

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

.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
html.gecko div#header {
margin: 1em;
}
.opera #header {
margin: 1.2em;
}
.ie .mylink {
font-weight: bold;
}
.mac.ie .mylink {
font-weight: bold;
}
.[os].[browser] .mylink {
font-weight: bold;
}
-> pas d'espace entre .[os] et .[browser]

Source: Rafael Lima

Créer un bouton à l’aide de CSS

Damien — Thu, 13 Nov 2008 11:34:07 +0000

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:

La partie CSS:

a.bouton {
display:block;
width:XXpx;
height:XXpx;
background-image:url("bouton_hover.jpg");
}
a.bouton:hover {
visibility:visible;
}
a.bouton:hover img {
visibility:hidden;
}

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

L’exemple en téléchargement: