[HTML / CSS] Problème d'alignement de 2 div dans une cellule

Problème d'alignement de 2 div dans une cellule [HTML / CSS] - HTML/CSS - Programmation

Marsh Posté le 16-05-2004 à 00:12:33    

:hello:
 
Je cherche à afficher 2 images dans deux blocs de couleur différente et de taille fixe. Mon code actuel est le suivant (là le tableau ne sert à rien, mais j'ai simplifié pour l'exemple, les div doivent impérativement se trouver sans une cellule :) ):
 

<table>
  <tr>
    <td>
      <div style="width: 110px; height: 65px; border: 1px solid #000000; background-color: #FFFFFF; float: left; margin-left: auto; margin-right: 5px; padding-top:auto; padding-bottom:auto;">
        <img src="test.gif" />
      </div>
      <div style="width: 110px; height: 65px; border: 1px solid #FFFFFF; background-color: #000000; float: left; margin-left: 5px; margin-right: auto; padding-top:auto; padding-bottom:auto;">
        <img src="test.gif" alt="" />
      </div>
    </td>
  </tr>
</table>


 
Ce qui donne le résultat :
 
http://coreamp.online.fr/divers/testdiv.png
 
Je souhaiterais que les deux div soient centrés dans la cellule tout en concervant un petit espace pour les séparer. Et surtout, je souhaiterais que les 2 images soient centrées verticalement dans chaque div. Quelqu'un saurait me dire où est mon erreur (même en indiquant auto pour margin-left & margin-right le centrage ne fonctionne pas, sous IE6 et Firefox 0.8) ? :)


Message édité par Core 666 le 16-05-2004 à 10:22:34
Reply

Marsh Posté le 16-05-2004 à 00:12:33   

Reply

Marsh Posté le 17-05-2004 à 15:36:01    

>>Je souhaiterais que les deux div soient centrés dans la cellule tout en concervant un petit espace pour les séparer.
 
En mettant tes 2 div dans un autre tel que
<div style="text-align:center">
Tu devrais avoir un centrage horizontal.
 
Pour le centrage vertical : IMPOSSIBLE (c'est un des pu#&.; !!! de problème de la soit disant super norme xhtml ...) seule solution : un  padding (ou un margin) mais à ce moment la faut que tous soit toujours à la même taille  :fou:  
sinon pour que ca marche dynamiquement un tableau ...  
 
PS: si un dieu du xhtml sait comment faire cela sans un tableau (et en moins de 50 lignes ...), je lui serais reconaissant à vie et je m'engage à me flagéler sur la place publique avec des orties pour avoir dis du mal d'xhtml ...

Reply

Marsh Posté le 17-05-2004 à 20:54:16    

http://incongru.webdynamit.net/CentrageVertical
 
mais effectivement, il faut connaitre la taille du bloc à centrer


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 17-05-2004 à 21:30:40    

Core 666 a écrit :


Je souhaiterais que les deux div soient centrés dans la cellule tout en concervant un petit espace pour les séparer. Et surtout, je souhaiterais que les 2 images soient centrées verticalement dans chaque div. Quelqu'un saurait me dire où est mon erreur (même en indiquant auto pour margin-left & margin-right le centrage ne fonctionne pas, sous IE6 et Firefox 0.8) ? :)


Pourquoi utiliser des DIV ? Tu as la chance d'être dans une cellule de tableau, donc vertical-align s'applique.
De même il te suffira de centrer le texte pour centrer horizontalement les images.
Ensuite il te suffira d'appliquer un padding, une marge et une bordure directement aux images pour faire l'effet que tu souhaites.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 22-05-2004 à 08:12:39    

fxoxo a écrit :

>>Je souhaiterais que les deux div soient centrés dans la cellule tout en concervant un petit espace pour les séparer.
 
En mettant tes 2 div dans un autre tel que
<div style="text-align:center">
Tu devrais avoir un centrage horizontal.


Non, ce n'est pas le cas :( En enlevant les marge horizontales de mes 2 div postés plus haut et en les englobant dans un div avec text-align:center ils se retrouvent alignés à gauche.
 

Citation :

[nom]gm_superstar a écrit[/nom]Pourquoi utiliser des DIV ? Tu as la chance d'être dans une cellule de tableau, donc vertical-align s'applique.


C'est le comportement pas défaut je crois ? Carl es 2 div sont bien alignés verticalement sans que je n'ai eu besoin de rien préciser à ce niveau :)
 

Citation :

De même il te suffira de centrer le texte pour centrer horizontalement les images.


A priori ca ne fonctionne pas. J'ai essayé de le faire au niveau de la cellule, ou dans un div les englobants, sans succès, ils restent alignés à gauche.
 

Citation :

Ensuite il te suffira d'appliquer un padding, une marge et une bordure directement aux images pour faire l'effet que tu souhaites.


Le problème c'est que les images ont une hauteur maximale, mais pas fixe. Impossible donc d'indiquer une marge ou une bordure fixe dans mes CSS. Et je n'ai guère envie de passer par un getimagesize() pour gérer ca dynamiquement. Mais c'est pas bien grave, le principal est qu'elles ne soient pas collées en haut, je vais me contenter d'un padding-top fixe de 10 ou 15 pixels.
 
J'aimerais rien résoudre ce problème d'alignement vertical par contre .

Reply

Sujets relatifs:

Leave a Replay

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