[Résolu]Alignement vertical d'une div dans un tableau

Bonjour,

Je cherche des ressource traitant de l'alignement vertical d'une div dans une table sous cette forme :

<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>

Par défault le contenu de la cellule est centré verticalement et je cherche une solution pour avoir une div centrée verticalement à l'intérieur et une autre en alignement top.

Est-ce possible et si oui comment car j'ai beau chercher pour le moment je n'ai rien trouvé.

Merci d'avance.
Modifié par Klesk (10 Aug 2007 - 17:33)

Klesk a écrit :
Par défault le contenu de la cellule est centré verticalement et je cherche une solution pour avoir une div centrée verticalement à l'intérieur et une autre en alignement top.

Pourquoi pas en faisant deux cellules différentes?

Sinon, il y a peut-être un coup à jouer avec le positionnement absolu (en positionnant le td en relatif pour qu'il serve de référent à ses enfants et descendants positionnés en absolu).

Florent V. a écrit :

Pourquoi pas en faisant deux cellules différentes?

C'est ce que j'avais fait au debut et ça fonctionnait très bien, mais comme j'ouvrais ma balise dans la cellule pour la fermer dans une autre (code de spip oblige), mon source n'était pas valide w3c.

Florent V. a écrit :

Sinon, il y a peut-être un coup à jouer avec le positionnement absolu (en positionnant le td en relatif pour qu'il serve de référent à ses enfants et descendants positionnés en absolu).

Je vais tester ça . J'avais testé en mettant mes div en absolu mais sans positionner le td en relatif, du coup mes div étaient en relatif mais tout en restant centrée dans la cellule...vois l'effet

Bon ça fonctionne bien pour le positionnement et je t'en remerci. Toutefois je constate du coup un disfonctionnement dans une des div qui est dans le td (positionnement relatif) au niveau du style.

Voici le lien de ma page pour que tu puisses constater :

www.korx-crew.com/test/spip/

J'ai mis des border pour qu'on voit facilement la structure. Donc en gros j'ai un td en relatif avec dedans 2 div principales dont la première en absolu.

Le problème se situ dans la seconde div, celle qui n'a pas de position particulière. Au niveau de la fin des articles, j'ai normalement une div avec fond rouge dan laquelle on trouve le nomde l'auteur notament. Cette dernière n'apparait plus de base , il faut surligner la zone pour la voir :S .

Faut-il que je positionne la seconde également en absolu avec un margin-top ??

**EDIT :

Bon je viens de faire un test en définissant la position de la seconde div et visiblement c'est ça .

Peux-tu m'apporter une explication quand au positionnement et la manière de s'en servir ??
Modifié par Klesk (07 Aug 2007 - 14:01)

Klesk a écrit :
Peux-tu m'apporter une explication quand au positionnement et la manière de s'en servir ??

Il y a pas mal de ressources décrivant les différents type de positionnement CSS. Au hasard :
- la spécification CSS 2.1 (site du W3C);
- Alsacréations (un tutoriel);
- Openweb (trois tutoriels).

J'aime bien écrire, mais là je crois que je vais gagner du temps en t'invitant à voir tout cela.

Plus globalement, et sans même penché plus avant sur ta page, je m'inquiète un peu de l'utilisation que tu as faite du positionnement absolu. Le positionnement absolu, c'est la bombe atomique dans l'armement CSS. Si tu ne sais pas très exactement comment t'en servir et ce que ça implique, évite de l'utiliser.
Modifié par Florent V. (07 Aug 2007 - 16:15)

Tu as raison de t'en inquiéter car en l'occurence c'est un vrai désastre sous firefox 2.0.0.4 ( portable, je l'ai sur mon ipod donc à vérifier sur une version non standalone ). Sous ie6 ça fonctionne impec mais alors sur firefox....:D. snif snif.

Si tu as firefox je veux bien que tu regardes pour dire comment régler ça :

Sous ie6 :

http://img524.imageshack.us/img524/2341/17478945ql6.th.jpg


Sous firefox 2.0.0.4 portable :

http://img178.imageshack.us/img178/7638/36523812xa3.th.jpg

Même chose sous opera 9.02 portable (toujours sur mon ipod )

:S

Les div sortent du flux, ce qui est normal, en revanche elles ne restent pas dans la cellule comme sous ie ce qui, je pense, est une erreur d'interpretation de ie et non de firefox. Corriges moi si je me trompe.
Modifié par Klesk (07 Aug 2007 - 17:55)

Bon je pense avoir trouvé comment faire sans toucher au positionnement mais en séparant mon contenu dans deux cellules différentes comme je l'avais fait au départ.

Cette fois si par contre ça devrait respecter le code spip et les standarts w3c . GNARK GNARK GNARK !!!!!


*EDIT :

Bon ça marche, cependant comme je retrouve de nouveau deux cellules l'une au dessus de l'autre avec une div centrée dans chaque le positionnement de mes liens de pagination situés dans la cellule supérieure change quelque peu sous ie 6 et 7 selon la page d'articles sur laquelle on est.

En gros ya un décalage en hauteur, les liens de pagination descende un peu lorsqu'on va sur la seconde page via la pagination. Il faudrait arriver a fixer la hauteur de cette cellule.
Modifié par Klesk (07 Aug 2007 - 18:59)

Pour la cellule du haut:
- tu peux lui donner une hauteur spécifique (via la propriété CSS height, tout simplement)... cependant, il faut bien noter que ça correspondra à une hauteur minimale, et que la cellule peut être plus haute si le contenu l'impose;
- tu peux aussi utiliser un vertical-align: top pour la cellule du haut (et un peu de marge sur son contenu si besoin).

Au fait, tu as besoin d'un clear: both sur ton tableau (agrandis deux fois le texte dans Firefox pour voir pourquoi...).

De plus, les attributs HTML de mise en forme de ton tableau (largeur, écartement des cellules, etc.) peuvent être remplacés par leur équivalent en CSS. Voir la spécification CSS 2.1 (chapitre sur les tableaux) pour les détails.

Merci pour tes remarques . Je vais voir tout ça .

*EDIT : En effet, je vois bien après agrandissement . A quoi est-ce du ce rétressissement en largeur ??
Modifié par Klesk (07 Aug 2007 - 21:28)