Page d'aide au CSS
Questions :
- Comment définir les contours sans répéter la même propriété ?
- Comment aligner une image avec le texte de sa ligne ?
- Comment supprimer l'espace autour de mes balises block ?
- Comment définir une propriété CSS en fonction du navigateur ?
- Pourquoi mon :hover ne fonctionne-t-il pas sous IE ?
- Comment enlever le contour bleu autour de mes images liens ?
Comment définir les contours sans répéter la même propriété ?
Les propriétés qui définissent les contours (border, margin, padding) ont toutes la même syntaxe.
propriete: valeur1; /* tous les cotés */
propriete: valeur1 valeur2; /* haut & bas | droite & gauche */
propriete: valeur1 valeur2 valeur3; /* haut | droite & gauche | bas */
propriete: valeur1 valeur2 valeur3 valeur4; /* haut | droite | bas | gauche */
Par exemple, le code suivant applique une marge de 30 pixels en haut, une marge automatique sur les côtés, et aucune marge en bas :
margin: 40px auto 0;
Bloc d'exemple avec le margin: 40px auto 0;
Notez que 0 n'a pas besoin d'unité, puisque 0em = 0px = 0% = 0.
Source : http://wiki.media-box.net/
Comment aligner une image avec le texte de sa ligne ?
La propriété vertical-align permet de positionner sur une ligne de texte une image de différentes manières.
Par exemple, les images suivantes ne seront pas placées de la même façon :
Alignement au milieu du texte :
vertical-align: middle; /* l'image est placée au milieu du texte */
Voici un exemple 
avec la valeur middle.
Alignement en bas du texte :
vertical-align: text-bottom; /* l'image est alignée avec le bas du texte */
Voici un exemple avec la valeur text-bottom.
Alignement en haut du texte :
vertical-align: text-top; /* l'image est alignée avec le haut du texte */
Voici un exemple avec la valeur text-top.
Notez qu'il existe d'autres valeurs, mais celles-ci me paraissent les plus utiles.
Comment supprimer l'espace autour de mes balises blocks ?
Il faut savoir qu'il y a par défaut une marge en haut et en bas de 20px autour de certaines balises block comme <h1></h1>, <h2></h2>, etc, pour d'autres balises comme <p></p>, 15px cette fois, toujours en haut et en bas. Beaucoup d'autres sont dans ce cas là, donc pour supprimer l'espace qui pose souvent problème autour de ces balises, il suffit de leur appliquer un margin nulle, voire un padding nul :
* /* Ceci est le sélecteur universel, c'est-à-dire que le style déclaré s'applique à toutes les balises */
{margin: 0; padding: 0;}
<p> sans margin: 0;
<p> avec margin: 0;
Attention : il s'avère que ceux sont des propriétés définies par les navigateurs, et d'un navigateur à l'autre, ces définitions CSS changent. Personnellement, je trouve mauvais l'idée de donner des propriétés par défaut, car elles sont spécifiques au navigateur. c'est pourquoi il vaut mieux initialiser toutes les balises modifiées en début de CSS, c.a-d donner une valeur 0 ou none à ces propriétés, comme je viens de vous l'indiquer.
Comment définir une propriété CSS en fonction du navigateur ?
En utilisant un petit code précédant votre balise, id ou class comme ceci :
Définition de propriétés pour tous les navigateurs sauf IE
A tester avec IE et un autre navigateur.
html>body #exemple41
{margin: 0 auto; width: 50%; border: 1px solid black;} /* Style appliqué à l'id #exemple41 pour tous les navigateurs excepté IE */
Avec le style : html>body #exemple41
Définition de propriétés seulement pour IE
A tester sous IE et un autre navigateur.
* html #exemple42
{margin: 10px 0 5px 25%; width: 250px; border: 1px solid black;} /* Style appliqué à l'id #exemple42 seulement pour IE */}
Avec le style : * html #exemple42
Je trouve ces propriétés très utiles ; sans en abuser bein sûr. Tout en tenant compte des défauts de IE, il faut éviter de privée le visiteur de la qualité du site, car on se retrouve souvent dans l'impasse par exemple du : Rhoo !!! IE ne veut pas afficher mon texte avec :before !! ou bien : Mince !! Mais pourquoi mon :hover ne fonctionne pas sous IE ?!? d'ailleurs...
Pourquoi mon :hover ne fonctionne-t-il pas sous IE ?
Tout simplement parce qu'il ne peut pas fonctionner sous IE. Du moins le pseudo-format :hover fonctionne sur les liens, mais son utilité s'arrête là sous ce navigateur.
A tester sous IE et un autre navigateur.
Le lien avec le pseudo-format :hover
Fonctionne sous tous les navigateurs.
Une balise autre que le lien avec le pseudo-format :hover
Un paragraphe avec le pseudo-format :hover.
Fonctionne sous tous les navigateurs sauf IE.
Après l'affichage du PNG, c'est pour moi le principal problème de ce navigateur, dont la dernière version date de plus de 5 ans. En effet, "il n'y a pas eu de nouvelle version d'Internet Explorer depuis la version 6.0, sortie en 2001 (qui était elle-même très peu différente de la version 5.5, vu que le but principal de la version 6.0 était d'inclure un navigateur dans Windows XP)".
Source : http://fr.wikipedia.org/wiki/Guerre_des_navigateurs.
Comment enlever le contour bleu autour de mes images liens ?
Par défaut, certains navigateurs placent autour des images entourées d'un lien une bordure bleue ou violette selon l'exploration du lien. Cela permet de voir qu'une image est un lien, et est parfois bien utile à certains visiteurs.
Néanmoins je comprends que cela vous gêne, alors voici un code très logique que vous auriez pu trouver seul :
a img
{border: none;}
Une image-lien dans un paragraphe avec une bordure nulle : 
Cette page pourra recevoir des modifications à l'avenir.
Création 2006 JulFisher
