18079 sujets

Questions générales et questions de débutants

Impossible d'avoir une hauteur de 1px sur mon <div> avec IE

Je me suis servie d'un gabarie de page d'alsacréations pour mon site Web. Mais je ne suis pas capable d'avoir seulement 1 px de hauteur dans mon pied de page qui est clear: both avec EXPLORER 5.X et +

Avez vous une solution?
voici le code que exploseur n'aime pas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
      Largeur fluide, header/menu haut/menu gauche flottant/menu
      droite flottant/contenu/footer.
    </title>
    <style type="text/css">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 20px;
background-color: #99CCCC;
}

#conteneur {
position: absolute;
width: 600px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}

#pied {
clear:both;
height: 1px;
background-color: #99CC99;
}


#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
}
#menudroit li {
margin-bottom: 5px;
}
#gauche a{
   color: black;
   text-decoration: none;
   display: block;
   padding: 0 0 0 5px;
}



#gauche ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#gauche .titre{
 font-weight: bolder;
 background: #cbe9f3;
 margin: 0 0 0 0px;
 padding: 0 0 0 5px;
}

/*  ***** THEMES ***** */
#themes{
   width: 130px;
   margin: 30px 0px 0px 0px;
   padding: 0px;
   background: transparent;
   border: 1px solid red;
}

#themes li{
   padding: 0px;
   margin: 0px;
   border-bottom: #e0e0e0 solid 1px;
}

#themes li a:hover{
   background-color: #fffbea;
   color: black;
   text-decoration:underline;
   padding: 0 0 0 5px;
   
}


/*]]>*/
    </style>
  </head>
  <body>
    <div id="conteneur">

      <div id="header">
      </div>

      <div id="gauche">
	     <ul id="themes">
            <li class="titre">Thèmes</li>
            <li><a href="#">Climat et environnement</a></li>
            <li><a href="#">Écosystèmes et biodiversité</a></li>
            <li><a href="#">Systèmes d'information</a></li>
            <li><a href="#">Technologie</a></li>
         </ul>
		 
         <ul id="themes">
            <li class="titre">Thèmes</li>
            <li><a href="#">Climat et environnement</a></li>
            <li><a href="#">Écosystèmes et biodiversité</a></li>
            <li><a href="#">Systèmes d'information</a></li>
            <li><a href="#">Technologie</a></li>
         </ul>
      </div>

      <div id="centre">
        <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
        <p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
      </div>

      <div id="pied">
      </div>
    </div>
  </body>
</html>


merci
Modifié par bensti2 (01 Feb 2006 - 15:30)
Bonjour à toi aussi
Si tu ne veux qu'1px en bas de page, pourquoi n'utilises-tu pas une border-bottom ? Ce serait bien plus propre que de mettre une div vide en bas de page. Tu peux faire la même chose avec ton header et une border-top de 20px (à moins que tu ne veuilles y mettre du contenu plus tard bien sûr). Du coup ton conteneur aura les styles suivants :

position: absolute;
width: 600px;
background-color:#CCCCFF;
border-bottom:1px solid #99CC99;
border-top:20px solid #99CCCC;

et tu pourras zapper tes divs header et footer.
Modérateur
bonjour,

sous IE pour obliger a appliquer une taille inferieur a la hauteur d'interligne par defaut de la page (entre 14 et 20px generalement) a un element comme le div , il faut soit appliquer en plus une taille de police nulle ou tres petite(ce qui modifie la hauteur d'interligne, il y aussi le line-height pour chercher a obtenir ce resultat), ou bien un overflow:hidden; (ce qui est plus rapide et plus simple a mettre en oeuvre )

a plus Smiley smile
Modifié par gcyrillus (01 Feb 2006 - 16:15)
Salut ,

ca marche pas dutout ton truc..... As tu essayer chez toi avec FF et IE? redonne moi de tes nouvelles

Merci
merci gcyrillus

Jai mis overflow: hidden; et ca marche Smiley smile mais j'ai aucune idées ces quoi ca fait un overflow.

merci
Salut,

C'est bizarre, j'ai testé avec FF 1.0.7, IE 5.0, IE 5.5, IE 6.0 et Opera et je ne vois pas de pb.
bensti2 a écrit :
ca marche pas dutout ton truc
Peut-être pourrais tu détailler un peu afin de cerner l'origine du problème ?

Au passage, tu as assigné 2 fois l'identifiant thèmes. Tu devrais donc le transformer en classe.

Overflow sert à gérer le comportement d'un bloc au cas où le contenu est plus important que le bloc (genre trop de texte dans une div dimensionnée). Hidden indique que le contenu *qui dépasse* est masqué.
Modifié par Jihel (02 Feb 2006 - 09:04)
Bonjour,
Mettre "font-size: 0;" ou "line-height: 0;" dans le div que tu veux réduire à moins de 20px de haut sous IE.
Modifié par papillon41 (02 Feb 2006 - 16:30)
Sujet clos
Aller à