Welcome, you're not connected. ( Log in - Register )

Latest news

(fr) Le big-tuto GIMP est enfin en ligne sur le Site du Zéro !

Important links - Liens importants

Règles - Rules | Présentez-vous - Introduce yourself | Problème d'inscription ? - Registration problem ?

Ishimaru-Design > Tutoriaux, ressources et support (fr) > XHTML/CSS > Tutoriels & Astuces > [XHTML/CSS] Hack pour min-height sous IE6

RSS >  [XHTML/CSS] Hack pour min-height sous IE6, IE6 ne reconnaît pas la propriété min-height
Ishimaru Chiaki #1 12/01/2009 - 20h45

Class : ID Admin
Posts : 1325
Registered on : 12/11/2007
Age : 27
Sex : Female

Offline Mail Www

Beaucoup de codeurs XHTML/CSS ont sûrement déjà vécu ceci : En faisant votre site qui contient un menu latéral et un corps, vous avez déjà eu ce problème du pied de page qui ne reste pas en bas lorsque le corps est moins haut que le menu.

Il existe une solution simple pour corriger ce problème :
#corps {
   /*vos autres propriétés*/
   min-height: XXXpx;
}

Mais il y a un mais : IE6 ne reconnaît pas la propirété min-height, ce qui fait que votre modification ne fonctionnera pas sous ce navigateur obsolète.

Mais comme on a les irréductibles entreprises qui sont encore sous une version inférieure à Windows XP ou qui ne veulent pas mettre à jour leur IE même s'ils sont sous XP, on est encore obligé de les prendre en compte.

Voici donc les détails du hack qui est utilisé sur le site Ishimaru Design pour corriger ce défaut d'IE.

Dans le code XHTML

L'application du hack exige l'ajout d'un conteneur qui viendra "patcher" le défaut en ayant une hauteur définie tout en n'étant pas visible.

Prenons donc un code de page très simplifié pompé directement du tuto de M@teo21 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
      <title>Mon super site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>

  <body>

      <!-- L'en-tête -->

      <div id="en_tete">
         
      </div>

      <!-- Les menus -->

      <div id="menu">        
          <div class="element_menu">
              <h3>Titre menu</h3>
              <ul>
                  <li><a href="page1.html">Lien</a></li>
                  <li><a href="page2.html">Lien</a></li>
                  <li><a href="page3.html">Lien</a></li>
              </ul>
          </div>
     
          <div class="element_menu">
              <h3>Titre menu</h3>
              <ul>
                  <li><a href="page4.html">Lien</a></li>
                  <li><a href="page5.html">Lien</a></li>
                  <li><a href="page6.html">Lien</a></li>
              </ul>
          </div>        
      </div>

      <!-- Le corps -->

      <div id="corps">
          <h1>Mon super site</h1>
     
          <p>
              Bienvenue sur mon super site !<br />
              Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
          </p>
     
          <h2>A qui s'adresse ce site ?</h2>    
          <p>
              A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
              Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
          </p>
         
          <h2>L'auteur</h2>    
          <p>
              L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
              Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
              Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
          </p>
      </div>

      <!-- Le pied de page -->

      <div id="pied_de_page">
          <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
      </div>

  </body>
</html>


Pour l'application du correctif, on va devoir imbriquer le DIV correcteur directement à l'intérieur de <div id="corps">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
      <title>Mon super site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>

  <body>

      <!-- L'en-tête -->

      <div id="en_tete">
         
      </div>

      <!-- Les menus -->

      <div id="menu">        
          <div class="element_menu">
              <h3>Titre menu</h3>
              <ul>
                  <li><a href="page1.html">Lien</a></li>
                  <li><a href="page2.html">Lien</a></li>
                  <li><a href="page3.html">Lien</a></li>
              </ul>
          </div>
     
          <div class="element_menu">
              <h3>Titre menu</h3>
              <ul>
                  <li><a href="page4.html">Lien</a></li>
                  <li><a href="page5.html">Lien</a></li>
                  <li><a href="page6.html">Lien</a></li>
              </ul>
          </div>        
      </div>

      <!-- Le corps -->

      <div id="corps">
      <div id="ie_fix">
          <h1>Mon super site</h1>
     
          <p>
              Bienvenue sur mon super site !<br />
              Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
          </p>
     
          <h2>A qui s'adresse ce site ?</h2>    
          <p>
              A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
              Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
          </p>
         
          <h2>L'auteur</h2>    
          <p>
              L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
              Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
              Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
          </p>
      </div>
      </div>

      <!-- Le pied de page -->

      <div id="pied_de_page">
          <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
      </div>

  </body>
</html>


Ce seul ajout est suffisant pour notre hack.  On passe maintenant au CSS !


Dans le code CSS

Maintenant, on est prêt à appliquer le CSS à <div id="corps"> et <div id="ie_fix">.  Mais pour cela, je vous recommande de faire une feuille de style spécifique à IE en plus de la feuille normale.  Que ce soit avec ou sans commentaires conditionnelles, vous aurez quand même la feuille qui vous évitera de chercher dans la (ou les) feuille(s) normal(aux) pour le bout de code de correction.

On commence par le code de la feuille ordinaire :
#corps {
        /*mettez vos autres propriétés*/
        min-height: 500px;
}
(bien sûr, ajustez cette hauteur selon la hauteur que fait votre menu)

Si vous utilisez un background, vous pouvez utiliser à la fois #main et #ie_fix pour les propriétés de fond, comme dans ce cas par exemple.

Pour IE7, Firefox et les autres navigateurs récents, ce bout de code (min-height) est suffisant.  Mais pour IE6, c'est là qu'on va utiliser la feuille spécifique à IE pour y mettre ce bout de code :
#main {
       height: 500px;
}
#ie_fix /*Hack pour le bug d'IE6*/
{
   height: 500px;
   height: auto;
}


Voilà, c'est tout pour les corrections CSS !

Point important au sujet des corrections.

Selon le site que vous gérez, vous avez deux possibilités pour ne faire appliquer ces corrections que sous IE6.

Façon #1 : Les commentaires conditionnels

Cette façon s'applique si vous êtes dans la possibilité d'ajouter des feuilles de style de correction à même la balise <head> et </head>.  C'est le cas des sites "made from scratch" et des CMS dont les feuilles de style viennent avec les templates (phpBB) ou dont un fichier PHP inclus dans chaque style permet de gérer les liens des feuilles de style et balises méta (punbb 1.3).

Façon #2 : Hacks CSS directement dans la feuille

Il peut arriver que vous êtes dans l'impossibilité d'utiliser les commentaires conditionnels.  C'est le cas de certains hébergeurs de forums gratuits dont vous ne pouvez pas toujours éditer les templates.  Dans ce cas, vous devrez recourir à des hacks CSS qui se mettent directement dans la feuille de style et qui devront être placés à côté de l'élément à corriger.

Voici donc les hacks que vous êtes le plus susceptible d'utiliser (vous n'avez qu'à remplacer [votre_element] par votre classe, id ou élément HTML à corriger) :

Pour IE6 et versions antérieures :
* html [votre_element] {
       /*vos corrections*/
}

Pour IE7 :
*:first-child html [votre_element] {
      /*vos corrections*/
}


N'utilisez que l'une des deux façons pour vos corrections.
parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now)

 >  Fast reply

Message

Ishimaru-Design > Tutoriaux, ressources et support (fr) > XHTML/CSS > Tutoriels & Astuces > [XHTML/CSS] Hack pour min-height sous IE6

 >  Stats

1 user(s) connected during the last 10 minutes (0 member(s) and 1 guest(s)).

Connectix Boards (fr) | phpBB.com | phpBB-fr.com | phpBB.biz | phpBB3styles | phpBBHacks | Awesomestyles | phpBB-France | Le site du zéro | Servhome | Gimp-Attitude | Phobies-Zéro | Expomatique