Discussion :

[ziad.shady]

Bonjour,

J'ai un <TD> dans lequel il y a 2 <DIV>.
Je souhaiterai aligner horizontalement verticalement ces deux <DIV>, à savoir que l'une deux soit collée à la bordure supérieure du <TD> et l'autre à la bordure inférieure du <TD>.

Pardonnez-moi pour cette question stupide mais je ne suis pas très pointu en CSS.

Merci d'avance de vos retours.


N.B. J'utilise google chrome comme navigateur.
--
Ziad

[Jacques Beauregard]

Bonjour,

Un lien JSFiddle mettant en avant ce que j'ai compris dans ton post :
https://jsfiddle.net/ahz747ey/1/

D'une façon générale : un <div> est un élément de type "block" et occupera la largeur maximale de son conteneur ( ici un <td>). Donc par défaut, tes deux <div> seront l'un au-dessus de l'autre.
Il faut commencer par réduire leur largeur.

Bien cordialement.

[ziad.shady]

Merci Jacques de ta réponse et surtout pour cet outil très pratique

En effet c'est moi qui s'est trompé dans le post. Je souhaiterai aligner VERTICALEMENT les DIV non pas horiz

Voici l'affichage que je souhaiterai obtenir :

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table>
    <tr>
        <td id="test">
            <div id="bloc1">
                <table>
                    <tr>
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
                    </tr>
                    <tr>
                        <td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td>
                    </tr>                
                </table>            
            </div>
            <div id="bloc2">
                <table>
                    <tr>
                        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
                    </tr>
                    <tr>
                        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
                    </tr>
                    <tr>
                        <td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
                    </tr>                
                </table>
            </div>
        </td>    
    </tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#test{
    border:1px solid black;
    height: 200px;
}
 
#bloc1{
    border:1px solid black;
}
 
#bloc1 TD {
    border:1px solid black;
}
 
#bloc2{   
    margin-top:250px;
    border:1px solid black;
}
 
#bloc2 TD {
    border:1px solid black;
}

Sachant que ce que j'ai dans les 2 <DIV> ce sont deux tables HTML (en réalité c'est une DataTable JSF) dont le nombre de ligne (TR) n'est pas toujours le même (variable en fonction des données à afficher).


Merci encore une fois Jacques.

--
Bien cordialement.
Ziad,

[friendofweb]

Bonjour, dans le but de bien faire les choses, l'habitude de faire des mises en page via un tableau est désormais à éviter non ?

[Jacques Beauregard]

Bonjour,

Un petit article pour soutenir la question de friendofweb

Pourquoi éviter la mise en page par tableaux ?

Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". C'était une bonne méthode lorsque les navigateurs implémentaient mal les normes CSS 2.1 (aux temps préhistoriques -à l'échelle du web- de Netscape 4 et d'Explorer 5), mais maintenant...
Faire deux ou trois colonnes en CSS est relativement facile et le langage CSS est fait pour cela. Le code est plus facile à maintenir, cela offre plus de choix de mise en page sans modification du code html, et surtout c'est plus accessible.

On m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage de cheveux pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Ce n'est pas tout à fait vrai. Vous devriez (normalement) en être convaincu à la fin de ce tutoriel. Et quoi qu'il en soit le cas le plus courant se limite au plus à 3 colonnes.

Sinon avec le code que tu m'as fourni :

- j'ai bien un <div> contenant des lettres collé sur la bordure supérieure du <td>
- j'ai bien un <div> contenant des chiffres/nombres collé sur la bordure inférieure du <td>

Que veux-tu faire exactement? les coller?

[CCyrillus]

Bonjour,

Un petit article pour soutenir la question de friendofweb

Tu n'aurais pas oublier un lien vers l'article complet ?

Que veux-tu faire exactement? les coller?

Bonjour,

J'ai un <TD> dans lequel il y a 2 <DIV>.
Je souhaiterai aligner verticalement ces deux <DIV>, à savoir que l'une deux soit collée à la bordure supérieure du <TD> et l'autre à la bordure inférieure du <TD>.

[Invité]

Bonjour,

voici une astuce jQuery : http://codepen.io/jreaux62/pen/wKvwbe

Je suis parti du principe qu'on peut avoir plusieurs tables et plusieurs cellules concernées.
On remplace donc les id par des classes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!-- initialisation jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 
<table class="latable">
    <tr>
       <td>dfgh ddf<br />ghdfgh <br />dfghdfghdfgh</td>
       <td class="test">
            <div class="bloc1">
                <table>
                    <tr>
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
                    </tr>
                    <tr>
                        <td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td>
                    </tr>                
                </table>            
            </div>
            <div class="bloc2">
                <table>
                    <tr>
                        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
                    </tr>
                    <tr>
                        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
                    </tr>
                    <tr>
                        <td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
                    </tr>                
                </table>
            </div>
        </td>    
    </tr>
    <tr>
      <td>dfgsfhsh ddf ghdfgh sdfh hyerthsfhddfh sfhsfgh gh fgdfghdfghdfgh sfghsf ghsfs dhd ghdghd hfgh dghdf ghdfgh ghklkdfsgj s dthsghsfgh dtydesgh shs jdyjsf sfh sfghdetej sfh jghj  tyej etyesf hsfgh sh ytejsfh sfgh sh etyj etyj sh eyjeye</td>
        <td class="test">
            <div class="bloc1">
                <table>
                    <tr>
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
                    </tr>
                    <tr>
                        <td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td>
                    </tr>                
                </table>            
            </div>
            <div class="bloc2">
                <table>
                    <tr>
                        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
                    </tr>
                    <tr>
                        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
                    </tr>
                 </table>
            </div>
        </td>    
    </tr>
   <tr>
       <td>dfgh ddf  dfs ghde qert sghdfhsdfhdfjhj sdhsgh qseer sthyf jshgj k ghd hsfgh sdetrqa trsdfgsdfg ghsfh sgfghdfgh dfghdfghdfgh sdfgsdfg qraert qsdfgsdfg sdfgsddfs ghde qert sghdfhsdfhdfjhj sdhsgh qseer sthyf jshgj k ghd hsfgh sdetrqa trsdfgsdfg ghsfh sgfghdfgh ghd hsfgh sdetrqa trsdfgsdfg ghsfh sgfghdfgh dfghdfghdfgh sdfgsdfg qraert qsdfgsdfg sdfgsddfs ghde qert sghdfhsdfhdfjhj sdhsgh qseer sthyf jshgj k ghd hsfgh sdetrqa trsdfgsdfg ghs fh  sgfghdfgh dfghdfghdfgh sdfgsdfg qraert qsdfgsdfg sdfgsdf</td>
       <td class="test">
            <div class="bloc1">
                <table>
                    <tr>
                        <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
                    </tr>
                    <tr>
                        <td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td>
                    </tr>                
                </table>            
            </div>
            <div class="bloc2">
                <table>
                    <tr>
                        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
                    </tr>
                    <tr>
                        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
                    </tr>
                    <tr>
                        <td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
                    </tr>                
                </table>
            </div>
        </td>    
    </tr>
 </table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
table.latable { width:500px; } /* pour la demo */
table.latable table { width:100%; }
table td { border:1px solid #666; padding:5px;  }
 
td.test{ vertical-align:top; } /* on aligne d'abord en haut */

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function tablecell_topbottom()
{
    $('.test .bloc2').css({'margin-top':'0'})
    $('.test').each(function(){
      $(this).find('.bloc2').css({'margin-top':($(this).height() - ($(this).find('.bloc1').height() + $(this).find('.bloc2').height()))+'px'});
  })
};
$(function(){
   tablecell_topbottom();
});
$(window).on( 'resize', function(){
   tablecell_topbottom();
});

[CCyrillus]

il est aussi posible de se servir de rowspan :

http://codepen.io/anon/pen/KdKKbE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<table class="test">
  <tr>
    <td rowspan="2" class="to hide">
    </td>
    <td class="vtop">
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
          <td>D</td>
          <td>E</td>
          <td>F</td>
          <td>G</td>
          <td>H</td>
          <td>I</td>
          <td>J</td>
        </tr>
        <tr>
          <td>K</td>
          <td>L</td>
          <td>M</td>
          <td>N</td>
          <td>O</td>
          <td>P</td>
          <td>Q</td>
          <td>R</td>
          <td>S</td>
          <td>T</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="vbot">
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
table.test {
  width: 500px;
  height: 300px;
  border-collapse:collapse;
  background:turquoise;
  text-align:center;
}
 
 
table{
  width: 100%; 
  border: 1px solid #666;
}
 
table table td {
  background:tomato;
  border: 1px solid #666;
  padding: 5px;
  color:#0072C6;
  text-shadow: 0 0 1px;
}
.vtop {
  vertical-align:top;
}
.vbot {
  vertical-align:bottom;
}
.to.hide {
  width:0;
}

[friendofweb]

Merci ! Techniquement intéressant !