Colonnes de même hauteur avec bordures : possible sans tableau ?

Colonnes de même hauteur avec bordures : possible sans tableau ? - HTML/CSS - Programmation

Marsh Posté le 15-10-2007 à 19:15:10    

Bonjour,
 
J'ai fait un design suivant basé sur des tableaux, et j'aurais voulu n'utiliser que des DIV. Seulement ça fait des heures que je galère  :sweat:  
 
Voici le code qui utilise des tableaux (et je veux avoir les bordures dans mon design) :

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" lang="fr" xml:lang="fr"
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <style>
  6. <!--
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. text-align: center;
  11. }
  12. table#container {
  13. width: 750px;
  14.   border-collapse: collapse;
  15. }
  16. #topzone {
  17.   border: 1px solid black;
  18. }
  19. #logo {
  20.   border: 1px solid black;
  21.   margin-top: 5px;
  22.   margin-bottom: 20px;
  23.   padding-top: 10px;
  24.   padding-bottom: 10px;
  25. }
  26. table#middlezone {
  27.   width: 100%;
  28.   border-collapse: collapse;
  29. }
  30. table#middlezone td {
  31.   vertical-align: top;
  32. }
  33. table#middlezone .middlezone_spacer {
  34.   width: 5px;
  35. }
  36. #leftzone {
  37.   border: 1px solid black;
  38. }
  39. #centralzone {
  40. width: 100%;
  41.   border: 1px solid black;
  42. padding: 2px;
  43. }
  44. #rightzone {
  45.   border: 1px solid black;
  46. }
  47. #footer {
  48.   border: 1px solid black;
  49. margin-top: 5px;
  50. }
  51. -->
  52. </style>
  53. </head>
  55. <body>
  57. <table id="container">
  58. <tr>
  59.     <td>
  60.      <div id="topzone">
  61.         HAUT DE PAGE
  62.      </div>
  63.     </td>
  64.   </tr>
  66. <tr>
  67.     <td>
  68.       <div id="logo">
  69.         IMAGE LOGO
  70.       </div>
  71.   </td>
  72.   </tr>
  74. <tr>
  75.     <td>
  76.       <table id="middlezone">
  77.         <tr>
  78.        <td id="leftzone">
  79.             <p>COLONNE GAUCHE</p>
  80.           </td>
  81.    
  82.        <td class="middlezone_spacer">&nbsp;</td>
  83.    
  84.        <td id="centralzone">
  85.              <p>COLONNE CENTRE</p>
  86.              <p>COLONNE CENTRE</p>
  87.              <p>COLONNE CENTRE</p>
  88.           </td>
  89.    
  90.        <td class="middlezone_spacer">&nbsp;</td>
  91.    
  92.        <td id="rightzone">
  93.              <p>COLONNE DROITE</p>
  94.              <p>COLONNE DROITE</p>
  95.           </td>
  96.         </tr>
  97.       </table>
  98.   </td>
  99.  </tr>
  101. <tr>
  102.     <td>
  103.      <div id="footer" >
  104.       BAS DE PAGE
  105.      </div>
  106.   </td>
  107.   </tr>
  108. </table>
  110. </body>
  112. </html>


 
Voici ma trame de base sans tableau :

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" lang="fr" xml:lang="fr"
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <style>
  6. <!--
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. text-align: center;
  11. }
  12. #container {
  13. width: 750px;
  14. padding: 2px;
  15. }
  16. #topzone {
  17.   width: 100%;
  18.   border: 1px solid black;
  19. }
  20. #logo {
  21.   width: 100%;
  22.   border: 1px solid black;
  23.   margin-top: 5px;
  24.   margin-bottom: 20px;
  25.   padding-top: 10px;
  26.   padding-bottom: 10px;
  27. }
  28. #leftzone {
  29.   float: left;
  30.   width: 180px;
  31. border: 1px solid black;
  32. }
  33. #rightzone {
  34.   float: right;
  35.   width: 180px;
  36. border: 1px solid black;
  37. }
  38. #centralzone {
  39. border: 1px solid black;
  40.   margin-left: 185px;
  41.   margin-right: 185px;
  42. }
  43. #footer {
  44.   clear: both;
  45.   width: 100%;
  46.   border: 1px solid black;
  47. margin-top: 5px;
  48. }
  49. -->
  50. </style>
  51. </head>
  53. <body>
  55. <div id="container">
  56. <div id="topzone">
  57.     HAUT DE PAGE
  58. </div>
  60.   <div id="logo">
  61.     IMAGE LOGO
  62.   </div>
  64.  <div id="leftzone">
  65.    <p>COLONNE GAUCHE</p>
  66.   </div>
  67. <div id="rightzone">
  68.    <p>COLONNE DROITE</p>
  69.    <p>COLONNE DROITE</p>
  70.   </div>
  71. <div id="centralzone">
  72.    <p>COLONNE CENTRE</p>
  73.    <p>COLONNE CENTRE</p>
  74.    <p>COLONNE CENTRE</p>
  75.   </div>
  77. <div id="footer" >
  78.   BAS DE PAGE
  79. </div>
  80. </div>
  82. </body>
  83. </html>


 
Merci d'avance de votre aide !!!

Reply

Marsh Posté le 15-10-2007 à 19:15:10   

Reply

Marsh Posté le 15-10-2007 à 19:30:48    

Met-nous un exemple en image, j'ai débranché mon parser/renderer interne là :/

Reply

Marsh Posté le 15-10-2007 à 19:36:37    

Salut,
 
J'ai bien une image, mais apparemment faut l'uploader sur un site puis mettre l'url entre les balises [img][/img]. Mais je n'ai pas de site pour l'uploader : vous faites comment, vous ?

Reply

Marsh Posté le 15-10-2007 à 19:37:18    

genre avec imageshack.us

Reply

Marsh Posté le 15-10-2007 à 19:43:14    

Voila (merci FlorentG  :sol: ) !
 
http://img100.imageshack.us/img100/9011/designne7.th.png

Reply

Marsh Posté le 15-10-2007 à 19:44:07    

T'as posté le mauvais truc :D on peut pas cliquer

Reply

Marsh Posté le 15-10-2007 à 19:47:19    

J'espère que cette fois c'est bon ...
 
http://img100.imageshack.us/img100/9011/designne7.th.png

Reply

Marsh Posté le 15-10-2007 à 19:49:28    

Ok, cette fois-ci c'est bon :)
 
Alors en fait, ton cas est le cas le plus relou avec les CSS :sol: Y'a quelques solutions qui existent, mais le mieux est de tricher. Et encore...
 
Est-ce que les bordures noires sont très importantes ?

Reply

Marsh Posté le 15-10-2007 à 19:51:26    

Eh oui, ces bordures sont importantes !!! J'ai bien vu différents tutos qui trichent en jouant sur les couleurs de fond, mais ça ne marche pas quand je rajoute des bordures.

Reply

Marsh Posté le 15-10-2007 à 19:54:47    

Y'aurait une solution, mais assez dangereuse... En mettant un overflow hidden sur le conteneur des colonnes, et en mettant un margin de -32767px et un padding de 32767px sur les trois colonnes [:dawak]

Reply

Marsh Posté le 15-10-2007 à 19:54:47   

Reply

Marsh Posté le 15-10-2007 à 20:00:53    

 :heink:  
J'ai un niveau plutôt basique en CSS : tu peux m'expliquer comment fonctionne la solution que tu proposes, histoire de ne pas juste appliquer bêtement ? et en quoi elle est dangereuse ?

Reply

Marsh Posté le 15-10-2007 à 20:01:58    

Quelques navigateurs la supporte mal, mais bon... Tous les détails : One true layout

Reply

Marsh Posté le 15-10-2007 à 20:04:41    

OK, je vais lire ça.
Merci pour tes réponses et a+

Reply

Marsh Posté le 15-10-2007 à 20:39:07    

Bon, alors je viens d'appliquer la méthode, mais ça ne marche pas complètement : la bordure du bas de mes 3 colonnes n'apparaît pas (testé sous Firefox 2).
Je crois que je vais garder mes tableaux ...

Reply

Sujets relatifs:

Leave a Replay

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