NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » La propriété float en CSS

La propriété float en CSS


Depuis que les CSS font parler d'elles, beaucoup cherchent (à raison) a arrêter d'utiliser des tableaux à tout va pour faire de la mise en page sur leurs sites. C'est bien les gars, du moment qu'il ne s'agit pas de données tabulaires, car celles-ci DOIVENT être dans un tableau!
L'idée de ce tutoriel, c'est de voir ensemble comment présenter une mise en page sur trois colonnes proprement en CSS, sans utiliser de tableaux!



Bon, ça va aller vite, alors accrochez-vous !
Commencez par créer un document html très simple.

Nos trois colonnes auront à peu près les mêmes valeurs CSS. Voici une portion de code exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>Essai</title>
        <style>
        body { font-family: Arial, sans-serif; font-size: 12px; }
        </style>
</head>
<body>

<div style="float: left; width: 100px; border: 1px solid #e3e3e3; margin: 10px 10px 0px 0px; padding: 5px;">
Texte de la première colonne
</div>

<div style="float: left; width: 100px; border: 1px solid #e3e3e3; margin: 10px 10px 0px 0px; padding: 5px;">
Texte de la deuxième colonne
</div>

<div style="float: left; width: 100px; border: 1px solid #e3e3e3; margin: 10px 10px 0px 0px; padding: 5px;">
Texte de la troisième colonne
</div>

<div style="clear: both;"></div>

</body>
</html>

Votre navigateur doit afficher à quelque chose près ceci :

Prenons le temps de décrypter ce code ensemble.
- D'abord, entre les balises <head> j'ai placé une portion de code CSS dans des balises <style> en indiquant simplement que je souhaite utiliser une typo Arial, de taille 12px dans mon document (on applique ces valeurs à "body" donc à tout le document).
- Pour chaque bloc, on indique que celui-ci "float" à gauche (left), a un bord gris de 1 pixel, on lui donne un peu de marge et de padding
- A la fin de notre série de flottants (il peut y en avoir plus de 3) on fait un petit "clear: both;" qui permet de réinitialiser les blocs.
Cette option est très importante, par exemple si vous voulez faire un site avec un menu à gauche, le contenu au milieu, un autre menu à droite et un footer, il vous faudra absolument les réinitialiser (à la fin de vos trois flottants, donc avant votre footer) sinon votre navigateur risque de se comporter très bizarrement, faites l'essai, vous verrez !

A vous ensuite de personnaliser un peu plus... Un titre, une hauteur fixe pour nos trois colonnes, on justifie le texte et hop, c'est tout beau tout propre ! :)

Voilà, c'était l'astuce CSS du jour !

Grâce à cette technique, vous pouvez également créer des petites vignettes par exemple :
Le 12/06/2009 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

Elygraph a écrit :

Trop connu pour en faire un tuto à mon avis !
Mieux vaut tard que jamais :D !

Manga a écrit :

Je vois de plus en plus de sites qui passent aux tableaux css. Il parait que c'est plus rapide à afficher.

Ajouter un commentaire sur ce tutoriel

CSS, float, block, blocs, display, screen, aligner, colonnes, trois colonnes, les unes après les autres, tableau, mise en page, accessibilité
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)