Mise en page en colonnes sur IE

[Onyx91]

Bonjour,

je développe une nouvelle version d'un de mes sites, et je souhaite faire une mise en page en trois colonnes.
J'ai suivi les pages consacrées à ça sur ZDnet
Sur Firefox ça va a peu pres, mais sur IE c'est la catastrophe.
Voir la page ici.

Si quelqu'un a une idée ca serait génial, par avance merci !

Ivan.

 

[Leonick]

Il faut voir en mettant les margin et padding à 0 pour comprendre d'où vient la différence. IE et FF ne les prenant pas en compte de la même manière.

 

[siokoden]

Tu a fait quelques erreurs dans ton css. Pour faire 3 colonnes, tu doit mettre les divs en float, l'un apres l'autre, dans le meme sens.

Pour ton site, tu doit laisser ton menug en float : left; et mettre middle et menud en float : left; pour que ceux ci suivent sur la meme ligne. ET placer dans ton code HTML le menud apres middle.

Un autre petit conseil: fait une ligne haute et basse arrondi sur toute la largeur de ton middle pour eviter de mettre autant de code

Bon courage !

 

[e-kiwi]

je mettrai ton menu gauche en float:left de taille 150 px, suivi du menu droite en float:left de taille 150px et ton conteneur, une margin left et right de 150px

 

[Onyx91]

Merci de vos réponses.
J'ai testé les conseils de siokoden, et tout s'est foutu sous le menu gauche.
La méthode d'e-kiwi donne ça

:cry: :cry:

 

[Malaiac]

Pour ne pas être obligé d'être en 1 2 3 dans le code (et donc d'avoir toujours le meme menu, toujours en premier dans le code sur toutes les pages), il y a "the one true layout", qui te permet en particulier de faire du 2 1 3.

http://www.positioniseverything.net/art ... ruelayout/

En anglais, donc si tu veux directement le 2 1 3 c'est la -http://www.positioniseverything.net/articles/onetruelayout/example/combined

 

[e-kiwi]

derriere tu dois recoller du margin ou du padding dans tes divs., non ? pour ces problèmes de décalages

 

[siokoden]

J'ai fait des test, et ca marche, voici le code :

Code HTML :

  <div id="menug">
  Association<br />
  <a href="lien.php">Qui sommes nous?</a><br />
    <a href="lien1.php">Historique</a><br />
      <a href="lien2.php">Activités</a><br /> <br />
       L'émission<br />
  <a href="lien.php">Pingui'Libro</a><br />
    <a href="lien1.php">Groupes espagnols</a><br />
      <a href="lien.php">Sport</a><br />
    <a href="lien1.php">Agenda</a><br />
      <a href="lien.php">Cinéma</a><br />
    <a href="lien1.php">Sorties CDs</a><br />
          <a href="lien2.php">Cruzando el Oceano</a><br /> <br />
  </div>

    
  <div id="middle">
   <div>
<b class="arrondi">
<b class="arrondi1"><b></b></b>
<b class="arrondi2"><b></b></b>
<b class="arrondi3"></b>
<b class="arrondi4"></b>
<b class="arrondi5"></b>
</b> <div class="arrondi_content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi feugiat hendrerit sapien. Aliquam a augue in lorem consequat laoreet. Praesent semper rutrum ante. Suspendisse sed orci vel velit porta luctus. Aliquam erat volutpat. Mauris vehicula commodo urna. Nulla facilisi. Vestibulum luctus congue nulla. Sed viverra justo ut metus cursus sagittis. Vestibulum vel turpis. Donec feugiat sapien. Nulla pede risus, egestas eu, mollis a, lobortis sit amet, neque. Aenean vestibulum erat. Vivamus nonummy velit sit amet mauris. In ante nibh, dictum in, tristique non, sagittis ac, nulla. Morbi vitae elit. Donec sed felis. Curabitur suscipit, ante id volutpat condimentum, diam sapien tempor libero, eget posuere leo libero ut quam.
  <br /><br />
Etiam condimentum tincidunt eros. Curabitur suscipit metus ac augue. Suspendisse dictum, enim elementum luctus rutrum, diam mi vestibulum enim, quis semper nibh sapien laoreet nulla. Cras diam arcu, sodales eget, nonummy non, interdum at, augue. Nunc at massa ac odio dignissim commodo. Morbi fringilla condimentum sapien. Ut varius. Donec vehicula ipsum sed tellus. Integer sed diam id magna malesuada accumsan. Praesent luctus dui dictum nunc. In eget urna eget mauris lobortis mollis. Integer bibendum lorem non velit. Aliquam erat volutpat. Vestibulum cursus hendrerit est. Sed tincidunt hendrerit dui. In dignissim, urna at porttitor vulputate, quam tellus auctor velit, ac nonummy sem magna et purus. Sed nonummy ligula ac nibh. Duis pellentesque elementum lectus. Vestibulum viverra, massa nec porta vestibulum, ligula lectus pulvinar eros, viverra tempus ipsum dolor quis mauris. Suspendisse eros mauris, sollicitudin quis, dictum sit amet, auctor vitae, libero. 
</div>
<b class="arrondi">
<b class="arrondi5"></b>
<b class="arrondi4"></b>
<b class="arrondi3"></b>
<b class="arrondi2"><b></b></b>
<b class="arrondi1"><b></b></b>
</b>
</div> 
</div>


<div id="menud">
  Services<br />
  <a href="lien.php">Blogs</a><br />
    <a href="lien1.php">Webcams</a><br />
      <a href="lien2.php">Infos</a><br /> <br />
</div>

Code CSS :

/*MENU G*/
#menug {
float: left;
font-size:14px;
border:1px solid black;
width:150px;
color:#BD7100;
}

div#middle {
padding: 0px;
margin: 0px;
float : left;
width: 500px;
}
/*FIN*/
#menud {

float: left;
width: 150px;
border:1px solid black;
padding:3px;
margin:5px;
margin-right:10px;
color:#BD7100;
font-size:14px;
}

 

[Onyx91]

Parfait siokoden, ton code marche. Merci beaucoup !!