Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1544 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1624143
Enidan
Posté le 15-10-2007 à 19:15:10  profilanswer
 

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 !!!

mood
Publicité
Posté le 15-10-2007 à 19:15:10  profilanswer
 

n°1624150
FlorentG
Unité de Masse
Posté le 15-10-2007 à 19:30:48  profilanswer
 

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

n°1624152
Enidan
Posté le 15-10-2007 à 19:36:37  profilanswer
 

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 ?

n°1624153
FlorentG
Unité de Masse
Posté le 15-10-2007 à 19:37:18  profilanswer
 

genre avec imageshack.us

n°1624154
Enidan
Posté le 15-10-2007 à 19:43:14  profilanswer
 

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

n°1624155
FlorentG
Unité de Masse
Posté le 15-10-2007 à 19:44:07  profilanswer
 

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

n°1624157
Enidan
Posté le 15-10-2007 à 19:47:19  profilanswer
 

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

n°1624158
FlorentG
Unité de Masse
Posté le 15-10-2007 à 19:49:28  profilanswer
 

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 ?

n°1624159
Enidan
Posté le 15-10-2007 à 19:51:26  profilanswer
 

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.

n°1624160
FlorentG
Unité de Masse
Posté le 15-10-2007 à 19:54:47  profilanswer
 

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]

mood
Publicité
Posté le 15-10-2007 à 19:54:47  profilanswer
 

n°1624165
Enidan
Posté le 15-10-2007 à 20:00:53  profilanswer
 

 :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 ?

n°1624167
FlorentG
Unité de Masse
Posté le 15-10-2007 à 20:01:58  profilanswer
 

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

n°1624169
Enidan
Posté le 15-10-2007 à 20:04:41  profilanswer
 

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

n°1624180
Enidan
Posté le 15-10-2007 à 20:39:07  profilanswer
 

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 ...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[CSS] Decentrage du contenu d'un tableau [résolu]Génération dynamique de lignes sur un tableau
Est-il possible d'effectuer plusieurs UPDATE en une fois?tableau avec rendu type "figer les volets" Excel
Insertion de tableau dans une richtextboxHauteur d'un div initialisé en auto
XSD : possible ou pas possible ?[Résolu] Tableau dynamique
trier un tableau multidimensionnel en fonction d'une colonne[Symfony] Récup dans une variable au lieu d'affichage, possible ?
Plus de sujets relatifs à : Colonnes de même hauteur avec bordures : possible sans tableau ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.099 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR