Mise en page avec table et table-cell, problème pour des images

Bonsoir à toutes et tous

J'ai un petit soucis depuis quelques jours pour mener à bien ma mise en page, j'avoue que j'en arrive à m'arracher les cheveux...

http://i46.servimg.com/u/f46/11/06/60/26/aligne10.jpg

Voilà le topo, j'ai un div corps qui prends la largeur totale, donc les parties bleu, jaune, rose qui est en display-table.

#corps

{
width:980px;
display:table;
border-collapse:collapse;
border-spacing:0px;
margin-bottom:100px;
display:table;
}

La partie bleu est en table-cell:

#colonne

{
display:table-cell;
width:350px;
background-color:blue;
}

Les parties jaune et rose également:

#un
{
display:table-cell;
background-color:yellow;
width:315px;
height:500px;
text-align:center;
}

#deux
{
display:table-cell;
background-color:pink;
width:315px;
text-align:center;
}

Voilà le code HTML:

<div id="corps">
<div id="colonne">
<img src="images/machine.png" alt="photo d'une machine"/>
</div>


<div id="un">
<img src="images/expressa.jpg" alt="photo d'une machine"/>
<p>Expressa</p>
<img src="images/orangenius.jpg" alt="photo d'une machine"/>
<p>Orangenius</p>
</div>

<div id="deux">
<img src="images/orm5.jpg" alt="photo d'une machine"/>
<p>ORM5</p>
<img src="images/or70.jpg" alt="photo d'une machine"/>
<p>OR70</p>
</div>
</div>

Je voudrais pouvoir déplacer les images encadrées en orange sur le plan vertical, mais il semble qu'elles se placent par défaut tout en bas.

Si je mets la propriété vertical-align:top; sur les div un et deux, j'ai mes images qui viennent se placer en haut.

http://i46.servimg.com/u/f46/11/06/60/26/aligne11.jpg

Et si pour finir je mets vertical-align:middle; à l'une des div, par exemple à un, j'ai bien les images qui se placent au milieu.

http://i46.servimg.com/u/f46/11/06/60/26/aligne12.jpg

Mais par contre si je mets vertical-align:middle; aux deux div, et bien cela agit comme un vertical-align:top; .....

La propriété margin-top me marche pas du tout...

Est-ce que les div placées en table-celle sont-elles interdépendantes l'une de l'autre ??

Quelqu'un arriverait-il à m'expliquer pour quelle raison cela agit de la sorte, car là je suis désespéré

Je vous remercie et vous souhaite une excellente fin de soirée.

Marc

Bonsoir,

marc.suisse a écrit :
Est-ce que les div placées en table-celle sont-elles

Trop mignon

Alors beaucoup de questions dans ton poste. Tout d'abord, au niveau du code tu as deux display: table dans la même déclaration et tu pourrais écrire les choses de façon beaucoup plus succincte car là tu répètes beaucoup de fois les mêmes propriétés.

marc.suisse a écrit :
Mais par contre si je mets vertical-align:middle; aux deux div, et bien cela agit comme un vertical-align:top;

As-tu d'autres déclarations pour les éléments à l'intérieur des blocs qui pourrait provoquer ces effets ?

marc.suisse a écrit :
La propriété margin-top me marche pas du tout...

Quand tu changes le mode d'affichage d'un élément en table-cell, à l'instar des cellules de tableau tu ne peux plus bénéficier de marge extérieur, la seul solution c'est border-spacing.

marc.suisse a écrit :
Est-ce que les div placées en table-celle sont-elles interdépendantes l'une de l'autre ??

Oui elles sont alignées comme des cellules de tableau et donc partagent la même hauteur. Sinon il y a cet article sur la propriété display si tu as besoin de précisions sur les modes d'affichages tabulaires.

marc.suisse a écrit :
Quelqu'un arriverait-il à m'expliquer pour quelle raison cela agit de la sorte, car là je suis désespéré langue

À priori je ne vois rien d'anormal je ne comprend pas la question à vrais dire, mais j'espère que mes éclaircissements te serons utiles

Salut, merci de ta réponse

a écrit :
Trop mignon ravi

Merci

a écrit :
Alors beaucoup de questions dans ton poste. Tout d'abord, au niveau du code tu as deux display: table dans la même déclaration et tu pourrais écrire les choses de façon beaucoup plus succincte car là tu répètes beaucoup de fois les mêmes propriétés.

Ah oui, je n'avais pas remarqué que j'avais mis 2 fois display:table;..

Par contre, tu parles de quelles propriétés que je répète beaucoup ?

Tu veux peut être dire que je n'ai pas besoin de mettre un display:table; à corps ? Les table-cell; suffisent ?

a écrit :
As-tu d'autres déclarations pour les éléments à l'intérieur des blocs qui pourrait provoquer ces effets ?

Non, j'ai tous mis dans le code du premier message

a écrit :
Quand tu changes le mode d'affichage d'un élément en table-cell, à l'instar des cellules de tableau tu ne peux plus bénéficier de marge extérieur, la seul solution c'est border-spacing.

Oui mais alors, comment agir sur les marges verticales, car border-spacing est pour les marges horizontales non ?

a écrit :
Oui elles sont alignées comme des cellules de tableau et donc partagent la même hauteur. Sinon il y a cet article sur la propriété display si tu as besoin de précisions sur les modes d'affichages tabulaires.

Je te remercie, je vais à nouveau regarder

a écrit :
À priori je ne vois rien d'anormal je ne comprend pas la question à vrais dire, mais j'espère que mes éclaircissements te serons utiles smile

Eh bien, je voudrais positionner les images encadrées en orange comme je veux sur la plan vertical, je pourrais d'ailleurs me contenter de mettre un vertical-align:middle; dessus, mais cela ne marche pas si je mets cette propriété aux deux div, respectivement un et deux.

C'est soit l'une, soit l'autre, si je mets un vertical-align:middle; aux deux, eh bien cela agit comme un vertical-align:top; est colle donc les images en haut.

Ce que je ne comprends pas non plus, c'est pourquoi les images viennent-elles se placer en bas des div et non pas en haut, voir la première image, d'autant plus que la colonne de gauche ( colonne ) en bleu n'a pas de hauteur définie.

C'est vraiment bizarre..

Je te remercie en tout cas pour ton aide, c'est sympa

Bonsoir

Je pense que je cherchais trop loin, j'ai mis vertical-align:top; aux div un et deux

#un
{
display:table-cell;
width:315px;
text-align:center;
vertical-align:top;
}

#deux
{
display:table-cell;
width:315px;
text-align:center;
vertical-align:top;
}

Et j'ai positionné les images avec un margin :

[code=css]#un img
{
margin-top:60px;
}

#deux img
{
margin-top:60px;
}

Et j'arrive à les positionner..

Mais je me demande si la propriété vertical-align n'est pas sur bottom par défaut dans un table-cell ?
[/code]