Postionnement des DIV dans un TD

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Cela fait un petit moment que je ne trouve pas la solution à mon probleme que voici:

J'ai un tableau de trois colonnes.je ne parle que de ma colonne de gauche

Dans la colonne de gauche je souhaite mettre des div les uns en dessous des autres.

La largeur des DIV est la meme que celle de la colonne

Pour le 1er DIV, il aura une hauteur variable ( pas de probleme ; propriete min-height ); Par contre je veux qu'il soit placé tout en haut, collé à la ligne du haut de la colonne.

le deuxieme DIV de hauteur variable aussi sera placé en dessous du 1er div .

Et le troisieme DIV de hauteur fixe, sera placé en bas de la colonne, collé à la ligne du bas.

Avec mon code html et mon CSS, je n'arrive pas à fixer le premier div en haut de la colonne, ni le troisieme div en bas de la colonne.

Merci de votre aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table id="conteneur">
 
            <tr>
                                         <!-- menu gauche -->
                <td id="menu_gauche">
                        <div id="mode">
                            menu de gauche -->
                            Je peux alors mélanger les balises à ma convenance,<br />
                            Je peux alors mélanger les façons d'écrire,<br />
                            corps du texte <br />
                        </div>
 
                         <div id="defilimages">
 
                        </div>
 
 
 
                        <div id="forum">
                            <a href="page1.html"> Forum </a>
                        </div>
                </td>  
 
               <td>
 
                ici c'est ma colonne du milieu
 
               </td>
 
 
 
               <td>
 
                ici c'est ma colonne de droite
 
              </td>
 
           </tr>
 
       </table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#conteneur /* le tableau contenant les 3 parties */
   {
   background-image:url("images/fond4.jpg");
   min-height:100%;
   margin-left:5%;
   margin-right:5%;
   border:solid 2px black;
   border-collapse:collapse;
   }
 
 #menu_gauche   /* 1er <td> : menu de gauche contenant #mode, #defilimages, #forum */
 {
  position: relative;
  min-height: 100%;
  width:14%;
  color:black;
  border :solid red 2px;
 }
 #mode
    {
    vertical-align:top;
    background-image:url("images/fond4.jpg");
    border:outset 3px #050b0e;
    color:white;
    min-height:200px;
  }
 
 
 #defilimages
    {
    width:100%;
    min-height:50%;
    background-image:url("images/village4.jpg");
  }
 #forum
    {
    width:100%;
    height:40px;
    background-color:green;
    text-align:center;
    color:white;
   }

voici une image jointe de ce que je souhaite obtenir

Mes yeux et mon cœur saignent devant ce code inséré sans balise [code] et cette tentative de mise en page en tableau :calim2:

Je trouve que la mise en page ne rend pas bien. Il y aurait sans doute des possibilités plus simples et plus élégantes avec FLOAT. Mais si vous voulez vraiment un comportement de tableau, vous pouvez utiliser CSS et la propriété DISPLAY. Ex:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Mise en page tableau CSS</title>
 <style type="text/css">
.content {
 display: table;
 /* Cadre du tableau */
}
.part {
 display: table-cell;
 vertical-align: top;
 /* Colonnes = cellules de tableau */
}
section,
div {
 border: thin solid black;
}
/* Colonne de gauche */
.cgh {
 background: cyan;
}
.cgm {
 background: gold;
 margin: 2em 0;
}
.cgb {
 background: brown;
}
 </style>
</head>
<body>
<div class="content">
  <div class="part">
    <section class="cgh">C. gauche haut</section>
    <section class="cgm">C. gauche milieu</section>
    <section class="cgb">C. gauche bas</section>
  </div>
  <section class="part">Colonne milieu</section>
  <section class="part">Colonne droite</section>
</div>
</body>
</html>

06/12/2013, 10h05
Invité
Bonjour,
Et comme le montre Muchos, pour simuler un comportement similaire aux <table>, voir display :
Code:

1 2 display: table; display: table-cell;
06/12/2013, 11h22
miss_socrates

positionnement

Je ne vois pas bien l'utilité d'utiliser un tableau. L'usage des tableaux ne se justifie que pour la mise en forme de données; le modèle type est un tableau Excel.
Sinon, on utilise des div pour la mise en forme.
Si les données doivent se superposer, on peut utiliser le display: block et vertical-align:top (mais qui ne fonctionne pas toujours, à vérifier sur différents navigateurs)
07/12/2013, 01h15
andip

reponse

Merci à tout le monde de m'avoir répondu.
Je n'étais très chaud quant à l'utilisation des DIV au départ, mais d'après vos réponses cela semble être la solution la plus facile et la plus efficace.
je vais donc me rabattre la-dessus.

Merci