[<div> et IE]

jean-claude -  
 jean-claude -
Bonjour à tous,

Je suis confronté à un petit problème que je n'arrives pas à résoudre, j'essaies de faire une mise en page en html/css.

J'ai deux <div> latéraux en position absolute, un autre <div> qui représente l'en-tête de ma page centré entre les deux latéraux, et un dernier qui représente le reste de ma page (le contenu), centré aussi entre les latéraux et en dessous de l'en-tête.

Mon problème est que lorsque je mets du contenu dans le <div> de l'en-tête, celui-ci s'ajuste au contenu, ce que je ne veux pas.
Cela se produit seulement avec IE, avec FireFox ça ne le fait pas.

Quel est la fonction à rajouter dans ce <div> pour que sous IE, il reste fixe, tout comme avec FireFox ?

4 réponses

  1. Semifer
     
    J'ai eu le meme probleme, il n'y a pas de meilleure solution que celle de nico7382. Le probleme d'IE, c'est qu'il ne repond a aucun des standards du web. Firefox et mozilla ne sont pas non plus exempts de defaut a ce niveau la mais IE detiens la palme. Quand on sait que c'est lui qui a 80% du marché, il y a de quoi se faire du souci: c'est un trou a pirates, c pas ergonomique, ca plante, cette horreur est integrée au systeme...j'en passe...pour les amateurs, le coeur d'IE provient a l'origine de mosaic et son architecture n'a finallement pas vraiment evolué....
    1
  2. nico7382 Messages postés 287 Statut Membre 50
     
    salut,

    j'ai deja eu ce probleme, et je voulais savoir si dans ton en-tête de page il n'était pas possible de mettre un tableau, comme ca, tu lui colle un width=100% et le tour est joué, il fera toujours la taille max.

    Sur la balise <div> il n'y a pas grand chose comme fonction:
    align
    begin
    class
    dir
    dur
    id
    lang
    repeatcount
    style
    timeaction
    timecontainer
    title
    0
  3. jean-claude
     
    Je vous remercie tous les deux, mais si je mets width: 100%; , mon <div> se retrouve décalé, je vous montre le problème avec par exemple ce html/css en y ajoutant des liens:

    Html
    
      <body>
        <div id="CoteGauche">
        </div>
        
        <div id="Tete">
          <p id="titre">Titre de la page</p>
           <ul class="onglets">
              <li><a href="">Lien 6</a></li>
              <li><a href="">Lien 5</a></li>
              <li><a href="">Lien 4</a></li>
              <li><a href="">Lien 3</a></li>
              <li><a href="">Lien 2</a></li>
              <li><a href="">Lien 1</a></li>
              <li><a href="">Accueil</a></li>
            </ul>
          </div>
        
        <div id="CoteDroit">
        </div>
        
        <div id="Corps">
        </div>
         
      </body>
    


    Css
    
    body{
          font-family: verdana, arial, sans-serif, tahoma, courier new;
          margin: 0;
          padding: 0;
    }
    
    #Tete{
          margin-left: 150px;
          margin-right: 150px;
          background-color: black;
          height: 20%;
    }
    
    #CoteGauche{
          top: 0;
          left: 0;
          width: 150px;
          height: 100%;
          background-color: #000080;
          position: absolute;
    }
    
    #CoteDroit{
          top: 0;
          right: 0;
          width: 150px;
          height: 100%;
          background-color: #000080;
          position: absolute;
    }
    
    #Corps{
          top: 0;
          margin-left: 150px;
          margin-right: 150px;
          background-color: #fffff0;
    }
    
    #titre{
          color: white;
          font-weight: bold;
          padding: 0;
          text-align: center;
          letter-spacing: 5px;
          margin: 0;
          font-size: 250%;
    }
    


    Avec FireFox, j'obtiens ceci:
    https://www.cjoint.com/?hpmnrdw6o0

    Et avec Ie, ça:
    https://www.cjoint.com/?hpmnXp8Hbc

    Comment faire ?
    0
  4. jean-claude
     
    Merci à tous,

    J'ai trouvé, j'ai utilisé la propriété: overflow: hidden;
    Et ça marche impec.
    0