Discussion :

[ChambreClaire]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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]

[Er3van]

Essaye avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
div#main {
   margin-top:35px;
   float : left ;
   margin-right: 25%; /* tu peux mettre "width : 50% à la place */
 
div#sidebar {
   float: left;  
   width: 24%;    
   display: inline;  /* FIX ie doublemargin bug <-- ah bon ??? :X */
}

Mais si tu veux la sidebar à gauche, tu dois la déclarer avant dans le code HTML.

[Candygirl]

Bonjour,

Je ne comprends pas trop le problème. Avec ce code, les 2 éléments ne sont pas alignés horizontalement que cela soit sur FF ou IE à cause de l'image. En supprimant l'image ils sont bien alignés tous les deux (avec présence du bug des 3px sur IE6).

D'autre part en xhtml tu devrais pluôt fermer ta balise img ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img id="imcs" src="uploads/images/imagecut.jpg" />