Pb de mise en forme + pb IE

Pb de mise en forme + pb IE - HTML/CSS - Programmation

Marsh Posté le 19-01-2009 à 17:37:53    

Bonjour,

 

J'ai un petit problème de mise en forme (je vous invite à copier coller le code dans un fichier et de tester chez vous en local)

 

Sous cette forme, le bloc qui est dessous de la ligne "Liste des installations", ne devrait pas être plus large (normalement il y a d'autres onglet que "Liste des installations", mais cela ne change pas le pb)

 


La solution que j'ai donc trouvé est de remplacer

Code :
  1. <div class="liste_onglet" style="width: 100%;">
 

par

Code :
  1. <div class="liste_onglet">


Le problème est que sous IE6 ça fout tout en l'air mes onglets  (ils se retrouvent dans le bloc du dessous, bref c'est pas facile à expliquer mais vous comprendrez vite :D)

 

Je suis conscient que ça fait un paquet de code, mais avec firebug ça devrait aller pour trouver d'ou vient le pb.

 

J'en chie depuis plusieurs heures, donc si une ame charitable pouvait m'aider  :ange:

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.   <head>
  4.     <style>
  5.  /* ------------------------------------- reset CSS ------------------------------------- */
  6.  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  7.   margin:0;
  8.   padding:0;
  9.  }
  10.  table {
  11.   border-collapse:collapse;
  12.   border-spacing:0;
  13.  }
  14.  fieldset,img {
  15.   border:0;
  16.  }
  17.  address,caption,cite,code,dfn,em,strong,th,var {
  18.   font-style:normal;
  19.   font-weight:normal;
  20.  }
  21.  ol,ul {
  22.   list-style:none;
  23.  }
  24.  caption,th {
  25.   text-align:left;
  26.  }
  27.  h1,h2,h3,h4,h5,h6 {
  28.   font-size:100%;
  29.   font-weight:normal;
  30.  }
  31.  q:before,q:after {
  32.   content:'';
  33.  }
  34.  abbr,acronym { border:0;
  35.  }
  37.  /*------------------------------------------------------------------*/
  38.  body, input, select, table{
  39.   font-size: 11px;
  40.   color: #000000;
  41.   font-family: Verdana,Arial,Helvetica,sans-serif
  42.  }
  45.  /* contenu */
  46.  #content{
  47.   background-color:#FFFFFF;
  48.   margin-left: 260px;
  49.   margin-right: 10px;
  50.   padding-bottom:10px;
  51.  }
  52.  #chemin_fer{
  53.   color: #3366CC;
  54.   font-size: 14px;
  55.   font-weight: bold;
  56.   padding-bottom: 7px;
  57.   padding-top: 2px;
  58.   margin-bottom: 15px;
  59.  }
  60.  #liste{
  61.   margin: auto;
  62.  }
  63.  #body{
  64.   background-image:url(../images/menu.png);
  65.   background-repeat:repeat-y;
  66.   background-position:left;
  67.   overflow: hidden;
  68.   zoom:1;
  69.   padding-left: 2px;
  70.   padding-right: 2px;
  71.  }
  73.  /*================== tables============================= */
  74.  th{
  75.   font-weight: bold;
  76.   text-align: center;
  77.   white-space: nowrap;
  78.  }
  79.  tr.even {
  80.  }
  81.  tr.odd {
  82.   background-color: #E8EEF7;
  83.  }
  85.  /*--------formulaire------------------------*/
  86.  table.form {
  87.   padding: 20px;
  88.   margin: 0px;
  89.   border-collapse: collapse;
  90.   font-size: 11px;
  91.   font-family: Verdana,Arial,Helvetica,sans-serif;
  92.   border: #3366cc 1px solid;
  93.  }
  95.  div.liste_onglet table.form{
  96.   margin: -5px !important;
  97.   margin: 0px;
  98.   border: none;
  99.  }
  101.  table.form th {
  102.   padding: 2px;
  103.   vertical-align: top;
  104.   color: #3366cc;
  105.   padding-top: 4px;
  106.   text-align: right;
  107.  }
  108.  table th.title {
  109.   /*border-top: #3366cc 1px solid;
  110.   border-bottom: #3366cc 1px solid; */
  111.   border: #3366cc 1px solid;
  112.   border-bottom:none;
  113.   font-weight: bold;
  114.   vertical-align: top;
  115.   color: #3366cc;
  116.   padding: 2px;
  117.   background-color: #e8eef7;
  118.   text-align: center;
  119.  }
  120.  table.form tr td {
  121.   padding: 2px;
  122.  }
  123.  /*--------liste------------------------*/
  124.  table.clsAction {
  125.   text-align: center;
  126.   margin:0px auto;
  127.  }
  128.  table.clsAction tr.infos th {
  129.   color: #3366cc;
  130.   padding:2px;
  131.   border: #3366cc 1px solid;
  132.   background-color: #e8eef7;
  133.  }
  134.  table.clsAction tr.entete th {
  135.   background-color: #3366cc;
  136.   border: #3366cc 1px solid;
  137.   padding:3px 10px 7px;
  138.   color: #FFF;
  139.  }
  140.  table.clsAction td {
  141.   font-size: 11px;
  142.   border: #3366cc 1px solid;
  143.   padding: 2px;
  144.  }
  145.  table.clsAction tr.ligne_actions td {
  146.   padding: 2px;
  147.   border: none;
  148.  }
  149.  table.button_bar{
  150.   margin: 5px auto 0px;
  151.  }
  153.  table.cadre{
  154.   margin:auto;
  155.  }
  158.  /*onglets*/
  159.  div.onglets{
  160.   overflow: hidden;
  161.   margin-left:auto;
  162.   margin-right:auto;
  163.  }
  164.  div.ongletTextDis,  div.ongletTextEna{
  165.   float: left;
  166.   font-weight: bold;
  167.   text-decoration: none;
  168.   border: #3366cc 1px solid ;
  169.   border-bottom:none;
  170.   padding: 3px 5px;
  171.   text-align: center;
  172.   margin-right: 10px;
  173.  }
  174.  div.ongletTextDis {
  175.   color: #3366cc;
  176.   background-color: #e8eef7;
  177.  }
  178.  div.ongletTextDis a{
  179.   text-decoration: none;
  180.  }
  181.  div.ongletTextEna {
  182.   color: #ffffff;
  183.   background-color: #3366cc;
  184.  }
  185.  div.liste_onglet{
  186.   border: 1px solid #3366cc;
  187.   padding: 20px;
  188.   padding-left: -1px;
  189.   margin-left:auto;
  190.   margin-right:auto;
  191.   overflow: auto;
  192.  }
  195.  /**/
  196.  .center{
  197.   text-align:center;
  198.  }
  199.  .left{
  200.   text-align:left;
  201.  }
  202.  .right{
  203.   text-align:right;
  204.  }
  206. </style>
  207.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  208.     <title>
  209.       FFT
  210.     </title>
  212.   </head>
  213.   <body>
  214.     <div id="body">
  216.       <div id="menu">
  217.        
  218.       </div>
  219.       <div id="content">
  220.         <div id="chemin_fer">
  221.           Configuration - <a href=
  222.           "installationListe.do">Installations</a>
  223.         </div>
  224.         <div id="liste" style="width:90%">
  225.           <div class="onglets" style="width:100%">
  226.             <div class="ongletTextEna" style="width:100%">
  227.               Liste des installations
  228.             </div>
  229.           </div>
  230.           <div class="liste_onglet" style="width:100%">
  231.             <table class="cadre" cellpadding="0" cellspacing="0" width="100%">
  232.               <tr>
  233.                 <th class="title">
  234.                   6 éléments
  235.                 </th>
  236.               </tr>
  237.               <tr>
  238.                 <td>
  239.                   <form method="post" action="installationSuppression.do">
  240.                     <table cellpadding="0" cellspacing="0" width="100%" class="clsAction">
  241.                       <tr class="entete">
  242.                         <th>
  243.                           &nbsp;
  244.                         </th>
  245.                         <th>
  246.                           &nbsp;
  247.                         </th>
  248.                         <th>
  249.                           Adresse                       
  250.                         </th>
  251.                         <th width="300">
  252.                           Ville                       
  253.      </th>
  254.                         <th>
  255.                           &nbsp;
  256.                         </th>
  257.                       </tr>
  258.                       <tr class="even">
  259.                         <td>
  260.                           <a href="installationModificationEntree.do?id=1"><img src="images/details.gif" alt="Modifier" /></a>
  261.                         </td>
  262.                         <td>
  263.                           <a href="installationUpdatePrincipale.do?id_installation=1">N</a> - Y
  264.                         </td>
  265.                         <td>
  266.                           adresse_1 adresse_2
  267.                         </td>
  268.                         <td>
  269.                           ville code_
  270.                         </td>
  271.                         <td>
  272.                           <input type="checkbox" name="tab" value="1" />
  273.                         </td>
  274.                       </tr>
  275.                     </table>
  276.                 </td>
  277.               </tr>
  278.             </table>
  279.           </div>
  280.         </div>
  281.       </div>
  282.     </div>
  283.   </body>
  284. </html>


Message édité par Alisteroid le 19-01-2009 à 17:40:10
Reply

Marsh Posté le 19-01-2009 à 17:37:53   

Reply

Marsh Posté le 20-01-2009 à 11:30:45    

[:jarcry]

Reply

Marsh Posté le 20-01-2009 à 19:20:08    

:cry:

Reply

Marsh Posté le 21-01-2009 à 13:31:26    

Bonjour.
 
Je viens de tester :
Je ne vois aucune différence (enfin, aucune différence majeure) entre IE 6 et FF 2...
 
Une petite remarque :
Tu utilises beaucoup de DIV à mon goût :
Rien que le DIV id="body" est de trop ! Il suffit de mettre les propriétés directement dans le body {}
En gros, tu as une liste qui contient (a priori) des onglets.
C'est après que j'ai du mal :
- Chaque onglet contient un ongletTextEna. Mais c'est le titre de l'onglet, non ?
=> Tu pourrais remplacer le div ongletTextEna par un Hx
- Chaque onglet contient une ou des liste_onglet ? si cette liste_onglet ne contient qu'une table cadre, tu peux peut-être supprimer le div liste_onglet.
 
En général, les "onglets" sont plutôt gérés sous forme de liste que dans des DIV.
 
Une des causes du problème peut être que les DIV ne sont pas imbriqués. En imbriquant onglets et liste_onglet, ça irait peut-être mieux ?
 
Je sais que ce n'est pas la réponse attendue, mais plus tu simplifieras ta page, moins tu risque de problèmes de mise en page...

Message cité 1 fois
Reply

Marsh Posté le 21-01-2009 à 13:53:53    

macgawel a écrit :

Bonjour.

 

Je viens de tester :
Je ne vois aucune différence (enfin, aucune différence majeure) entre IE 6 et FF 2...


Non y en a pas, mais comme je l'ai dit le contenu du div #liste_onglet sort du div #liste alors qu'il est imbriqué dedans.
Du coup comme tu le vois l'onglet ne vas pas jusqu'au bout du cadre.

 
macgawel a écrit :


Une petite remarque :
Tu utilises beaucoup de DIV à mon goût :
Rien que le DIV id="body" est de trop ! Il suffit de mettre les propriétés directement dans le body {}


Non le div #body est juste mal nommé, il représente le corp de ma page sans entete et pied de page.

 
macgawel a écrit :


En gros, tu as une liste qui contient (a priori) des onglets.
C'est après que j'ai du mal :
- Chaque onglet contient un ongletTextEna. Mais c'est le titre de l'onglet, non ?
=> Tu pourrais remplacer le div ongletTextEna par un Hx


div #onglet contient 1 ou plusieurs onglets dont la classe est soit ongletTextEna, soit ongletTextDis (si on vient de cliquer sur un onglet, sa classe devient ongletTextDis... pour ne pas pouvoir le recliquer)
Qu'est ce que "Hx"?

 
macgawel a écrit :


- Chaque onglet contient une ou des liste_onglet ? si cette liste_onglet ne contient qu'une table cadre, tu peux peut-être supprimer le div liste_onglet.

 

En général, les "onglets" sont plutôt gérés sous forme de liste que dans des DIV.


Chaque onglet ne contient qu'une liste_onglet (pour l'instant ...je sais pas si ça va être comme ça après)
Pour les onglets sous forme de liste, je sais mais je suis pas sur que cela règlera mon probleme.

 
macgawel a écrit :


Une des causes du problème peut être que les DIV ne sont pas imbriqués. En imbriquant onglets et liste_onglet, ça irait peut-être mieux ?


Le probleme est que j'utilise les taglib en java et que sur certains écran je n'ai pas d'onglets mais j'utilise aussi liste_onglet, donc j'ai du faire en sorte de ne pas les imbriquer...

 
macgawel a écrit :


Je sais que ce n'est pas la réponse attendue, mais plus tu simplifieras ta page, moins tu risque de problèmes de mise en page...

 

Ca je sais, mais le plus dur est de gérer un minimum de tag en java pour gérer mes différentes mise en page.

 

Bref le seul problème que je rencontre c'est que le contenu div #liste_onglet sort du div #liste, suffit avec firebug d'inspecter le code pour le voir immédiatement, en se positionant sur div #liste, puis sur div #liste_onglet on voit bien que le div #liste_onglet déborde de 2cm sur la droite, du coup div#liste n'est plus vraiment centré...

 

J'ai trouvé la solution en enlevant le style="width:100%" de div #liste_onglet mais cela fout la mise en page en l'air sous IE6! (sous firefox c'est nickel)... je cherche à avoir ce rendu en trouvant la vraie solution..

 

Merci quand même pour tes réfléxions.

Message cité 1 fois
Message édité par Alisteroid le 21-01-2009 à 13:55:24
Reply

Marsh Posté le 21-01-2009 à 15:15:16    

Alisteroid a écrit :

Non y en a pas, mais comme je l'ai dit le contenu du div #liste_onglet sort du div #liste alors qu'il est imbriqué dedans.
Du coup comme tu le vois l'onglet ne vas pas jusqu'au bout du cadre.


L'onglet, c'est la "barre bleue qui contient Liste des installations" ?
 

Alisteroid a écrit :

div #onglet contient 1 ou plusieurs onglets dont la classe est soit ongletTextEna, soit ongletTextDis (si on vient de cliquer sur un onglet, sa classe devient ongletTextDis... pour ne pas pouvoir le recliquer)
Qu'est ce que "Hx"?

Hx = H1 à H6 = Les titres (bon, je reconnais que la notation n'était pas forcément évidente  :o  )

Alisteroid a écrit :

Bref le seul problème que je rencontre c'est que le contenu div #liste_onglet sort du div #liste, suffit avec firebug d'inspecter le code pour le voir immédiatement, en se positionant sur div #liste, puis sur div #liste_onglet on voit bien que le div #liste_onglet déborde de 2cm sur la droite, du coup div#liste n'est plus vraiment centré...
 
J'ai trouvé la solution en enlevant le style="width:100%" de div #liste_onglet mais cela fout la mise en page en l'air sous IE6! (sous firefox c'est nickel)... je cherche à avoir ce rendu en trouvant la vraie solution..
 
Merci quand même pour tes réfléxions.


J'avais bien compris le problème... Mais je ne vois pas de différence de mise en page entre IE6 et FF2, avec ou sans le width=100%.
en particulier, je n'ai pas l'impression que ça foute la mise en page en l'air...
 
Pour ce qui est du décalage, il est dû à :

Code :
  1. div.liste_onglet{
  2.   border: 1px solid #3366cc;
  3. padding: 20px;
  4. }


en gros :
Tu as ton div onglets qui fait 100% (de liste.
Ton div  liste_onglet qui fait aussi 100% de liste.
Ils ont donc la même taille.
Mais ton div liste_onglet a un padding de 20px. Du coup, le navigateur rajoute 20 pixels de chaque côté, en plus de le taille normale.
Du coup, forcément, le div liste_onglet est plus long (de 40 pixels) que le div onglets. (Accessoirement, suivant les navigateurs, la bordure de 1px dans liste_onglet est à rajouter)
D'où l'impression que l'onglet ne vas pas jusqu'au bout du cadre.
 
Pour la solution, ça va dépendre de pas mal de choses...
Entre autres, tu peux enlever le padding, fixer les tailles (en pixels ou - mieux - en em, au lieu de %ages).

Message cité 1 fois
Reply

Marsh Posté le 21-01-2009 à 15:40:57    

macgawel a écrit :


L'onglet, c'est la "barre bleue qui contient Liste des installations" ?
 


Oui, la y en a qu'un (en gros j'utilise mon onglet pour faire une entete du cadre, mais normalement y a 2 ou 3 onglet de 50px environ qui vont donc pas jusqu'au bout)
 

macgawel a écrit :

Hx = H1 à H6 = Les titres (bon, je reconnais que la notation n'était pas forcément évidente  :o  )


ok j'avais pas compris :D
 

macgawel a écrit :


J'avais bien compris le problème... Mais je ne vois pas de différence de mise en page entre IE6 et FF2, avec ou sans le width=100%.
en particulier, je n'ai pas l'impression que ça foute la mise en page en l'air...
 
Pour ce qui est du décalage, il est dû à :

Code :
  1. div.liste_onglet{
  2.   border: 1px solid #3366cc;
  3. padding: 20px;
  4. }


en gros :
Tu as ton div onglets qui fait 100% (de liste.
Ton div  liste_onglet qui fait aussi 100% de liste.
Ils ont donc la même taille.
Mais ton div liste_onglet a un padding de 20px. Du coup, le navigateur rajoute 20 pixels de chaque côté, en plus de le taille normale.
Du coup, forcément, le div liste_onglet est plus long (de 40 pixels) que le div onglets. (Accessoirement, suivant les navigateurs, la bordure de 1px dans liste_onglet est à rajouter)
D'où l'impression que l'onglet ne vas pas jusqu'au bout du cadre.
 
Pour la solution, ça va dépendre de pas mal de choses...
Entre autres, tu peux enlever le padding, fixer les tailles (en pixels ou - mieux - en em, au lieu de %ages).


arf je trouvais que le décalage etait pile = au padding, le problème est que je veux pas fixer ma largeur en px, mais vraiment en %, tout en gardant ce padding  :cry:  :D  
 
Bref , bizarre que ma solution ne foute pas la mise en page en l'air sou sIE6 chez toi, ça serait donc la solution, mais bon si ça marche pas chez moi c'est qu'il y a un pb quelque part.

Reply

Marsh Posté le 21-01-2009 à 15:42:40    

Bon je sais pas ce qu'il se passe, mais ça marche en enlevant le width=100% comme je le disais, pourtant j'ai bien vidé mon cache, rien touché depuis   [:natas]  
 
:fou:  :fou:  :fou:  
 
 [:ichronos]  
 [:natas]  
 

Reply

Marsh Posté le 21-01-2009 à 15:44:02    

En tout cas merci de t'être pris la tête à regarder ce code, qui je sais n'est pas franchement excellent, mais la faible souplesse que j'ai avec les tag, la mise en forme qu'on m'impose, et le peu de temps qu'on m'attribue me limite beaucoup.
 
:jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed