aligment bloc sous IE6 ...

25 juin 2008, 00:28

Bonjour, pas fortiche en css voici des heures que je butte sur le problème suivant, j'ai dans le
design de ma templates deux blocs qui sont censé être aligner horizontalement.
Dans firefox le code ci-dessous marche, mais pas dans IE6 qui m'affiche le deuxieme bloc en dessous
du premier....

Code : Tout sélectionner

div#main {
   padding-top:35px;
   margin-left: 24%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 25%; /* and some air on the right */
}

div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 24%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0;
 
}


div#sidebar.hascontent {
   padding: 0 0%;
   width: 15%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

et voici la partie xhtml (template du cms madeSimple)

Code : Tout sélectionner

<div id="content">

      {* Start Sidebar *}
      <div id="sidebar" class="hascontent">
        <div id="blocmenu1">{global_content name='blocmenu1'}</div>
        <div id="blocmenu2">{global_content name='blocmenu2'}</div>
      </div>
      {* End Sidebar *}
       
       <img id="imcs" src="uploads/images/imagecut.jpg"></img>

      {* Start Content Area *}
      <div id="main">
        
         
         {content} <br />

       
      </div>

Et pas moyen que je comprenne comment faire en sorte qu'ils soient enfin affiché correctement
sous IE6, quelqu'un pourrait-il me conseiller ?

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

25 juin 2008, 01:45

D'un autre côté, on n'a pas l'erreur ...

30 juin 2008, 04:02

Pourrais t-on avoir le CSS de div#content

01 juil. 2008, 06:51

Vu que tes 2 blocs sont des DIV en position "relative", pourquoi ne pas les placer dans un tableau de 2 colonnes, ainsi la mise en page sera gardée quelque soit le navigateur.

Code : Tout sélectionner

<div id="content">

      {* Start Sidebar *}
      <div id="sidebar" class="hascontent">
         <table border="0"><tr>
            <td width="50%"><div id="blocmenu1">{global_content name='blocmenu1'}</div></td>
            <td width="50%"><div id="blocmenu2">{global_content name='blocmenu2'}</div></td>
         </tr></table>
      </div>
      {* End Sidebar *}
       
       <img id="imcs" src="uploads/images/imagecut.jpg"></img>

      {* Start Content Area *}
      <div id="main">
       
         
         {content} <br />

       
      </div>

02 juil. 2008, 21:55

Pour aligner horizontalement deux éléments de bloc sans recourir aux bidouilles du codage à l'ancienne, il y a display: inline-block, qui marche sous Opera, Safari, Firefox 3 et Internet Explorer 8. Sous Firefox 2, il y a la valeur propriétaire display: -moz-inline-block. Sous Internet Explorer 6 et 7, display: inline-block est essentiellement utilisée pour avoir du hasLayout, mais n'a pas d'effet sur les éléments de bloc ; dans ce cas, on recourt au positionnement flottant (ce qui est un exercice assez périlleux, surtout pour les blocs qui suivent des blocs flottants).

Autrement dit :

code HTML

Code : Tout sélectionner

<div id="global">
  <div id="sidebar">
    <!-- Le contenu du div -->
  </div>
  <div id="main">
    <!-- Le contenu du div -->
  </div>
</div>

CSS principale

Code : Tout sélectionner

#sidebar, #main {
  display: -moz-inline-block; /* Pour Firefox 2 */
  display: inline-block;
}
#sidebar {
  width: 15%;
}
#main {
  width: 85%;
}

CSS ciblant IE 6 et 7 (appelée via un commentaire conditionnel <!--[if lte IE 7]>)

Code : Tout sélectionner

#sidebar, #main {
  float: left; /* Positionnement flottant */
}
/* Pour éviter trop de risques avec le positionnement flottant,
on fournit un contexte de formatage
au bloc qui contient nos deux blocs flottants */
#global {
  overflow: hidden;
}

CSS ciblant IE 6 (appelée via un commentaire conditionnel <!--[if lte IE 6]>)

Code : Tout sélectionner

/* Pour IE 6, il faut donner du layout au bloc conteneur
pour que le contexte de formatage soit bien compris */
#global {
  height: 1%;
}

aligment bloc sous IE6 ...

Qui est en ligne