Index de l'article
Comprendre le langage css
Blocs div emboités
Problème de float
Problème de margin
Conclusion
Page 3 sur 5

float css

Pour vous aider à créer facilement un site web de qualité professionnelle avec le puissant cms joomla, on explique dans le présent tutoriel comment résoudre des problèmes css courants. Des difficultés pouvent être rencontrées lorsque vous utilisez le positionnement css des blocs div : éléments conteneurs figurant dans vos pages web.

La solution vous servira certainement dans la conception du design de votre site .

Pour l'instant, essayons de poser le problème qui réside dans la difficulté de mise en oeuvre de la proprièté css float à travers l'exemple de homepage schématisé ci-après:

float.gif

Par défaut, les blocs div, éléments conteneurs d'une page web sont affichés dans une succession verticale, c'est le positionnement en flux normal. Le flux fait en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres.

Donc en flux normal, un bloc, génère un retour à la ligne après son affichage.

La proprièté css "float" permet de sortir un élément du flux, autrement dit, le placer à doite ou a gauche sans générer de retour à la ligne après son affichage.

Mais la difficulté réside dans le comportement des autres  blocs qui reste difficile à expliquer, parfois,  même pour les designers Web  non débutants.

Un exemple de comportement inattendu sera examiné à travers l'exemple que nous allons traiter ensemble.

Pour réaliser le design du schéma cité avant, créez un fichier nommé "tuto-float.html" (en utilisant, par exemple, l'éditeur notepad++). Le code à insérer, au départ, est le suivant:

<!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>

<style type= "text/css">

</style>

</head>

<body>

</body>

</html>

Pour créer les blocs avec l'imbrication souhaitée, placer le code suivant entre les balises <body> et </body>:

 
<body>
 
  <div id="conteneur">
 
    <div id="enhaut">ENHAUT</div>
    <div id="recherche">RECHERCHE</div>
 
    <div id="contenu">
 
      <div id="gauche">GAUCHE</div>
      <div id="centre">CENTRE</div>
      <div id="droit">DROIT</div>
 
    </div>
 
  </div>
 
  <div id="enbas">ENBAS</div>
 
</body>
 

Pour le positionnement des blocs, il s'agit de:

  • attribuer la proprièté "float: left"  aux blocs "gauche", "centre" et "droit".

  • et annuler l'effet de la proprièté "float" moyennant la proprièté: "clear: both"  qui permet un retour à la ligne pour afficher le bloc suivant dans le flux. A savoir le bloc "enbas".

Mais où placer cette proprièté "clear"?

La définition des styles css sera défini dans le même fichier html entre les balises <style> et </style>. En voici le contenu avec des commentaires:

 
<head>
 
  <style type= "text/css">
 
    body {
      font-family: Tahoma, Arial, Verdana, sans-serif;
      font-size: 12px;
      text-align: center;
    }
 

C'est la définition de police pour toute la page. Le texte est centré.

 
    div{
      margin: 4px;
      border: 1px solid blue;  /* définition de bordure par defaut pour tous les blocs */
    }
 

C'est bien indiqué en commentaire, il s'agit de la définition de bordure par défaut pour tous les blocs. (N.B:  Pour commenter vos styles css, vous placez du texte entre /* et */ ).

 
    #conteneur {
      width:970px;
      border: 1px solid red; /* redéfinition de bordure */
      margin: 0 auto; /* pour centrer tout le contenu de la page */
    }
 

Le conteneur global de largeur 970px, est centré dans la page et sa bordure est en rouge.

 
    #enhaut {
      width:960px;
      height:100px;
    }
 

Le bloc "enhaut" a une largeur 960px et une hauteur de 100px;

 
    #recherche {
      width:960px;
      height:33px;
    }
 
    #contenu {
      width:960px;
      min-height:30px;
      border: 2px solid green;        /* redéfinition de bordure */
      background-color:#ece9d8;     /* fond coloré */
    }
 

La bordure du bloc "contenu" est en vert. Pour le bien visualiser, on lui a attribué un fond coloré (couleur "#ece9d8"). La taille minimale est de 30px. Ce bloc devra s'étendre, si nécessaire, pour inclure touts ses blocs fils.

 
    #gauche {
      float:left;
      width:200px;
      height:300px;
    }
 
    #centre {
      float:left;
      width:518px;
      height:300px;
    }
 
    #droit {
      float:left;
      width:200px;
      height:300px;
    }
 

Ces trois blocs sont placés en position gauche à l'aide de la proprièté "float" qui ne génère pas de retour à la ligne après affichage de chacun des blocs.

 
    #enbas {
      clear:both;
      width:960px;
      height:33px;
      margin: 4px auto;      /* pour centrer le bas page */
    }
 

A ce niveau, on a placé la proprièté clear pour tester son effet.

 
  </style>
</head>
 

En résumé, On a attribué une largeur, une hauteur et une bordure à chaque bloc div pour permettre une meilleure visualisation des conteneurs et leur positionnement les uns par rapport aux autres:

  • le bloc "conteneur" avec une bordure rouge

  • le bloc "contenu" avec bordure verte et un fond coloré.

  • et les autres blocs avec bordure bleue

La question était où placer la proprièté clear?

Si on place la proprièté clear, au niveau du style id "enbas", on constatera un comportement qui semble être normal avec le navigateur Internet Explorer (IE7) (visualiser la page)

Mais essayez de voir l'affichage avec Mozilla firefox (version testée 3.0.8) qui respecte mieux les normes css. L'affichage est incorrect. En effet, Internet Explorer ne suit pas strictement les standards, et de ce fait pour vérifier la conformité de vos pages web aux standards xhtml et css, il est vivement recommandé de faire les tests via firefox pour corriger toute anomalie constatée. Vous serez rassurés que les visiteurs de votre site web auront un affichage correct.

Pour le cas présent, vous constatez, avec mozilla firefox, que le bloc "contenu" n'inclut plus ses blocs fils: "gauche", "centre" et "droit". Sa hauteur ne s'est pas étendue comme prévue.

float-a-corriger.gif

Pour corriger, il faudra appliquer "clear" au bon endroit. En fait, c'est juste avant de quitter le bloc père "contenu" qui est le conteneur immédiat des blocs flottants à gauche.

Pour ce faire, on va créer un bloc vide nommé "clr" :

 
    <div class="clr"></div>
 

à placer vers la fin du bloc conteneur en question, c'est le bloc "contenu".

Ce bloc "clr" sera affecté par la proprièté "clear:both" au niveau  du fichier css comme suit:

 
.clr {
  clear: both;
  font-size:0;
  line-height:0;
  border: 0px;
}

Voici, en entier, la section html corrigée: 

 
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
 
    <style type= "text/css">
 
      body {
        font-family: Tahoma, Arial, Verdana, sans-serif;
        font-size: 12px;
        text-align: center;
      }
 
      div{
        margin: 4px;
        border: 1px solid blue;  /* définition de bordure par defaut pour tous les blocs */
      }
 
      #conteneur {
        width:970px;
        border: 1px solid red; /* redéfinition de bordure */
        margin: 0 auto; /* pour centrer tout le contenu de la page */
      }
 
      #enhaut {
        width:960px;
        height:100px;
      }
 
      #recherche {
        width:960px;
        height:33px;
      }
 
      #contenu {
        width:960px;
        min-height:30px;
        border: 2px solid green; /* redéfinition de bordure */
        background-color:#ece9d8; /* fond coloré */
      }
 
      #gauche {
        float:left;
        width:200px;
        height:300px;
      }
 
      #centre {
        float:left;
        width:518px;
        height:300px;
      }
 
      #droit {
        float:left;
        width:200px;
        height:300px;
      }
 
      #enbas {
        /*clear:both;*/
        width:960px;
        height:33px;
        margin: 4px auto;
      }
 
      .clr {
        clear: both;
        font-size:0;
        line-height:0;
        border: 0px;
      }
 
    </style>
 
  </head>
 
  <body>
 
    <div id="conteneur">
 
      <div id="enhaut">ENHAUT</div>
      <div id="recherche">RECHERCHE</div>
 
      <div id="contenu">
 
        <div id="gauche">GAUCHE</div>
        <div id="centre">CENTRE</div>
        <div id="droit">DROIT</div>
        <div class="clr"></div>
 
      </div>
 
    </div>
 
    <div id="enbas">ENBAS</div>
 
  </body>
</html>
 

Examiner le résultat dans les deux navigateurs.

float-corrige.gif

Maintenant, mozilla firefox affiche correctement tous les blocs de votre page web.
 

Copyright © 2009-2012 apprendre-joomla.com - Tous Droits Réservés -