accueil FAQ CSS

FAQ CSS

Questions fréquentes à propos des mise en page grâce aux feuilles de style en cascade (css). Toutes les questions qu'un débutant peut se poser. Exemples de codes.

Comment centrer horizontalement un titre ou du texte avec css
En utilisant la propriété text-align: center; 
<h1>Le titre de ma page</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<style type="text/css">
h1 {
	text-align: center;
}
</style>
Comment centrer un formulaire (form) en css
La propriété css suivant permet de centrer un formulaire dans une page, ou toute balise de type block 
<body>

<form method="post" action="#">
<fieldset>
<legend>Informations</legend>
<label for="nom">Nom : </label><input type="text" id="nom">
</fieldset>
</form>

</body>

form {
	margin: 0 auto;
}
centrer verticalement un élément
Pour centrer un élément verticalement et horizontalement, il faut tout d'abord connaître les dimensions de la boîte.
Ensuite on place le coin supérieur gauche de la boite au milieu de la page avec top et left.
On centre la boîte elle-même avec des marges (margin-top et margin-left) négatives.
<div class="milieu">Texte à centrer</div>
div.milieu {
	position: absolute;
	width: 400px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -200px
}
positionner deux div sur une même ligne, l'un complètement à gauche et l'autre, à droite
On va utiliser la propriété float gauche et droite. Float permet de sortir le bloc du flux normal et de le placer le plus à gauche ou droite de son bloc parent.
<body>
<div id="bloc_a">Partie qui va être placée à gauche</div>
<div id="bloc_b">Partie qui sera placée à droite</div>
</body>
#bloc_a, #bloc_b { /* on défini une largeur identique pour bloc_a et bloc_b */
	width: 49%;
}

#bloc_a {
	float: left;
}

#bloc_b {
	float: right;
}
créer une galerie photo, une présentation de miniatures
<div class="miniature"><img src="photo_1.jpg" alt="Moi sur la lune" width="100" height="100"></div>

<div class="miniature"><img src="photo_2.jpg" alt="J'inspecte ma jeep lunaire" width="100" height="100"></div>

<div class="miniature"><img src="photo_3.jpg" alt="Le golf, c'est ma grande passion" width="100" height="100"></div>

<div class="miniature"><img src="photo_4.jpg" alt="Photo un peu floue" width="100" height="100"></div>
div.miniature {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
}
La propriété inline permet de transformer le comportement d'une balise de type bloc (avec un retour à la ligne) en une balise de type en-ligne.
L'inconvénient est que la taille des « cases » va dépendre de leur contenu. L'exemple fonctionne correctement car le nombre de caractères dans la balise li est le même.
Modèle de menu horizontal
<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
</ul>
ul li {
	display: inline;
	margin: 0;
	padding: 0 1em; /* marge intérieure de 1em à droite et à gauche */
	border: 1px solid #000;
}
L'avantage par rapport à la méthode des balises en ligne : nous gardons le comportement bloc des balises li. Ceci nous permet de définir une largeur et une hauteur à nos boîtes, elle ne dépendent plus de leur contenu.
L'inconvénient : Le flux normal est perturbé, il faut alors prévoir un spacer (clear: both) pour permettre au flux de retrouver son comportement par défaut. 
<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
</ul>
<div class="separe">
<!--  permet d'annuler l'effet flottant du menu -->
</div>
<p>Hello world</p>
ul li {
	float: left;
	width: 8em; /* avantage par rapport à l'affichage en ligne,
possibilité de définir une taille pour <li> */
	border: 1px solid #000;
	text-align: center;
}
div.separe { clear: both; }
comment mettre des tableaux l'un a côté de l'autre
L'exemple ci-dessous montre comment mettre deux tableaux l'un à coté de l'autre, mais il est tout à fait possible d'appliquer la même méthode pour aligner des balises de type bloc : div, form, h1...h2, p, ul, ol, li, dl, etc. 
<table width="40%" border="1" class="voisin">
<tr>
	<td>Tableau de gauche</td>
</tr>
...
</table>
 
<table width="40%" border="1" class="voisin">
<tr>
	<td>Tableau de droite</td>
<tr>
...
</table>
.voisin { float: left; margin: 0 10px }
On peut bien sur aligner 3 tableaux. Il faudra alors adapter la largeur de chaque à ~30% par exemple, pour 4 tableaux, ~20%, etc.
Comment faire une propriété css comprise uniquement par IE
<body>
<h1>Hack CSS pour ie</h1>
<p>Observez la couleur de fond de la page sous internet explorer et sous un navigateur différent ( Firefox par exemple )</p>
</body>

body {
	background: #00f;
	_background: #f00; /* couleur pour ie exclusivement */
}
Comment faire un sélecteur interprété uniquement par les navigateurs modernes. Ce qui exclut IE 6 et <
<body>
<div id="notforie">Hello CSS 2.1</div>
</body>
body > #notforie {
	background: #333;
	font: 2em Verdana, Arial, sans-serif;
	color: #ccc;
}
Comment faire un sélecteur que seul internet explorer comprend
<body>
<div id="specialie">Couleur pour ie</div>
</body>
* html #specialie {
	background: #08d;
	color: #cf0;
}
Quelle est la différence entre .maclasse a et a.maclasse ?
L'ordre d'écriture d'un sélecteur est important, il correspond à une hiérarchie. .maclasse a affecte un style à la balise ancre <a></a> dont le parent est de classe « maclasse ».
Alors que le sélecteur a.maclasse affecte un style aux balises ancres <a></a> de classe maclasse 
<!-- pour .maclasse a -->
<body class="maclasse">
<a href="#">Mon lien</a>
</body>
<!-- pour a.maclasse -->
<body>
<a class="maclasse" href="#">Mon lien</a>
</body>
Comment mettre en forme un message dans le style topic de forum
Modèle message de forum
<dl>
<dt><span class="nom">Nom</span> <span class="date">Date</span></dt>
<dd>Le message</dd>
</dl>
.nom { float: left }
.date { float: right }
dl { width: 50% }
dd { clear: both; margin: 0 }
réaliser un cadre avec coins arrondis
Menu avec coins arrondis
<div id="cadre">
<div id="hautdroit"></div><div id="hautgauche"></div>
<ul>
	<li><a href="#">item 1</a></li>
	<li><a href="#">item 2</a></li>
	<li><a href="#">item 3</a></li>
	<li><a href="#">item 4</a></li>
	<li><a href="#">item 5</a></li>
</ul>
<div id="basdroit"></div><div id="basgauche"></div>
</div>
#cadre {
	width: 200px;
	background: #39c; /* même couleur que les coins */
}
#hautgauche, #hautdroit, #basdroit, #basgauche {
	height: 19px; /* hauteur de l'image cadr_arron_hg.gif */
	width: 19px; /* largeur de l'image cadr_arron_hg.gif */
	background: #ccf no-repeat;
}
#hautdroit {
	float: right;/* on place le coin à droite */
	background: url(cadr_arron_hd.gif);
}
#basdroit {
	float: right;
	background: url(cadr_arron_bd.gif);
}
#hautgauche {
	background: url(cadr_arron_hg.gif);
}
#basgauche {
	background: url(cadr_arron_bg.gif);
}

/* style du menu ul (facultatif et à adapter selon les goûts) */
#cadre ul {
	list-style-type: none; /* suppression des points précédant
chaque item */
	margin: 0;
	padding:0;
}
#cadre ul li a {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #eee;
	font-weight: bold;
	display: block; /* permet une coloration de toute la largeur
du menu au passage de la souris */
	padding: 0 1em;
	_height: 1em; /* correction bug IE. Attention le _ n'est pas
reconnu standard par le w3c */
}
#cadre ul li a:hover {
	background: rgb(46,137,183); /* couleur d'arrière plan
au passage de la souris voir display: block ci-dessus */
	color: #fff;
}
décorer un formulaire en positionnant une image en absolu
Mickey appuyé sur le bord haut droit du formulaire
<form action="#" method="post">

	<div id="mickey"><!-- image de mickey --></div>

	<label for="nom">Nom : </label><input name="nom" type="text" id="nom"><br>
	<label for="email">E-mail : </label><input name="email" type="text" id="email"><br>
	<label for="url">URL : </label><input name="url" type="text" id="url"><br>
	<label for="ville">Ville : </label><input name="ville" type="text" id="ville"><br> 
</form>
form {
 border: 1px solid #999999;
 width: 30%;
 padding: 2em;
 -moz-border-radius: 10px; /* arrondi du cadre pour Firefox */
 position: relative; /* positionnement relatif pour servir
de référence au placement de mickey */
}
label {
 float: left;
 width: 10em;
 font: 0.8em Arial, Helvetica, sans-serif; 
}
 input, label { margin: 5px 0; }
#mickey {
 position: absolute; /* permet de définir une position (avec top et right) par rapport au cadre du formulaire */
 height: 200px;
 width: 140px;
 right: -120px; /* marge négative permet de décaler l'image de Mickey à la droite de la bordure du formulaire */
 top: -80px;
 background: url(images/mickey8.gif) no-repeat;
}
Mettre deux images de part et d'autre d'un texte
Résultat du code : deux images entourent un texte centré
<div id="mentions_legales">

<img class="deco_gau" src="modeles/fleurs_g.jpg" alt="Fleurs exotiques" width="100" height="75"  />
<img class="deco_dro" src="modeles/fleurs_oranges_al.jpg" alt="Fleurs exotiques oranges" width="100" height="75" />

<p>ilood<br />http://www.chez.com/ilood - Copyright &copy;2006 - tous droits r&eacute;serv&eacute;s</p>

<div class="sep"></div>

</div><!-- fin des mentions légales -->
* { margin: 0; padding: 0; } /* enlève les marge intérieures et extérieures de tous les elements html.
Permet d'obtenir un affichage identique sous IE et Firefox */
#mentions_legales {
	color: #333333;
	background: rgb(229,255,127);
	border: 10px solid rgb(204,255,0);
	font: 0.6em Verdana, Arial, Helvetica, sans-serif;
	text-align: center
}
* html #mentions_legales { width: 98% } /* hack pour supprimer bug IE */
#mentions_legales .sep { clear: both }
.deco_gau { float: left }
.deco_dro { float: right }