Discussion :

[Addict`]

Bonjour,

Je développe actuellement un petit site web dont le contenu est diposé dans une table. J'aimerai pouvoir disposer dans une cellule, une image collé contre le haut de la cellule ainsi qu'une autre image collée contre le bas; au milieu un formulaire.

Le rendu actuel :



Merci d'avance sur vos réponses.

[neoxtra]

Bonjour,

Si dans ton CSS, tu indiques pour l'image 1 :

Code :

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

vertical-align:top;

et pour l'image 2 :

Code :

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

vertical-align:bottom;

Je n'ai pas testé, dis où tu en es après test.

[Addict`]

Salut neoxtra,

J'ai donc éssayé ce que tu m'as proposé. Aprés test, aucun changement...

[Macmillenium]

Bonjour,

Essai
- En indiquant un padding-top sur ton h3 et un padding-bottom sur ton p afin de pousser les 2 images.
- Sinon tu passe sidebar1 en position relative et ensuite tu positionne tes 2 images en absolute avec top:0 pour la 1ere et bottom:0 pour la 2eme.

Petite remarque : utiliser des <br /> pour séparer les champs dans un formulaire c'est un peu n'importe quoi ...

[Addict`]

Salut,

J'ai essayé la deuxième solution que tu as proposée, mon image ne se colle pas en haut de la cellule mais en haut de ma page.

Pour ce qui est de la première solution, je ne pense pas que ça va être possible puisque les sidebar dépendent du contenu des autres cellules; ce qui veut dire que si une cellule s'agrandit alors les sidebar aussi et donc le Padding-top ne sera plus bon! non ?

Comment positionner mes champs de formulaire sans br ? (je débute!)

[Macmillenium]

J'ai essayé la deuxième solution que tu as proposée, mon image ne se colle pas en haut de la cellule mais en haut de ma page.

As tu ajouté un position:relative sur sidebar1 ?

[Erwan31]

Comment positionner mes champs de formulaire sans br ? (je débute!)

Bonsoir,
en théorie la solution de Macmillénium devrait fonctionner mais il arrive que le positionnement relatif même s'il est censé s'appliquer à tous les éléments, n'ait aucun effet en tant que référent pour ses enfant positionnés de manière absolue (c'est aussi le cas des li en position:relatif).

Cela dépend des élément, et ça n'a aucun effet sur les display:table-cell et les item de list (entre autres)

Tu devrais donc ajouter un display: inline-block
au td et surtout tester (cela modifie le comportement naturel des cellules).
D'autre part la valeur inline-bock n'est pas implémentée sur Firefox 2-
Pour firefox ajouter -moz-inline-stack au inline-block.

Tu utilises des br pour ajouter des retour à la ligne après le label mais il ne sont pas fait pour ça : br (break) > forcer le retour à la ligne à l'intérieur d'un texte (à utiliser avec parcimonie)
Donc pour ajouter retour chariot, tu dois attribuer un display:block aux label et éventuellement une marge basse.
Si ça t'intéresse tu as quelques oublies dans ton code