Discussion :

[Invité]

Bonjour,

Je suis en train de modifier un formulaire qui à la base sert à faire une gestion clientèle (nom, prénom, etc).

Pour embellir le formulaire et lui donner plus de fluidité, j'utilise de l'ajax pour le chargement des champs. Je voudrais qu'au fur et à mesure que la personne entre les lettres du nom recherché, qu'une liste des noms correspondants apparaisse à côté du champ.

La partie prog est OK mais j'ai un souci de positionnement du div (qui contient les résultats) car dès le départ le formulaire est mis en page par des tableaux.

Pour sortir le div du flux j'ai tenté un positionnement absolu, ce qui fonctionne très bien mais ça plante (changement de position) si le fenêtre est redimensionnée ou si la résolution change (d'un poste à l'autre).

Quel conseil me donneriez-vous pour arriver à un résultat probant ?

Merci!!

webrider

[Candygirl]

Pour sortir le div du flux j'ai tenté un positionnement absolu, ce qui fonctionne très bien mais ça plante (changement de position) si le fenêtre est redimensionnée ou si la résolution change (d'un poste à l'autre).

Si c'est le cas c'est que tu as du mal (voir pas du tout) choisir l'ancêtre qui sert de référence pour le positionnement de ton élément en absolut.

Le positionnement absolu se réfère au plus proche ancêtre positionné, à défaut la fenêtre de visualisation. Tu devrais donc attribuer un position:relative à l'élément ancêtre qui doit servir de référence pour ton absolu afin que celui-ci se positionne toujours par raport à cet-élément-là.

[Invité]

Bonjour Candygirl et merci pour ta réponse!

Le problème est que l'ancêtre le plus proche est une cellule de tableau, je n'ai pas encore essayé de la mettre en relative... ça ne va pas créer un problème de positionnement de la cellule ?

[Invité]

Je viens d'essayer ce que tu m'as dit mais le résultat reste le même, et contrairement à ce que je pensais le cellule n'est pas affectée par le positionnement relatif.

Je te montre une partie du code, peut-être ai-je fait une erreur.

Cellule :

Code :

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

<td style="position:relative;"><div id="recherche"></div><input type="text" name="nom" size="20" maxlength="45" tabindex="3" onKeyUp="javascript:charger()"></td>

CSS pour le div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#recherche {
	position: absolute;
	top: 0px;
	left: 50px;
	height: auto;
	width: 100px;
	overflow: hidden;
	visibility: hidden;
	z-index: 100;
	border: 1px dashed #3333FF;
	background-color:#999999;
	color:#FFFFFF;
	padding: 1px;
}

J'espère que cela t'aidera à y voir plus clair.

Merci!

[Candygirl]

J'avais répondu à ton message par erreur dans un autre sujet :

Oui, j'avais déjà observé qu'un td, voir même un table ne pouvaient pas servir de référence pour un positionnement absolu (sur FF, opera) à moins d'attribuer un display:block par exemple au td, mais bon, dans ce cas,le comportement de ton tableau risque d'être assez différent

A noter qu'IE toute version accepte le td comme référence, juste la 8 béta qui le déplace au refresh??

Je n'ai pas encore trouvé d'explication sur le sujet dans la spécification css2 ou html4; je serais intéressée si quelqu'un peut apporter un éclairage là-dessus.

Pour revenir à ton problème, tu peux éventuellement entourer le contenu de ton td dans un div et attribuer le positionnement relatif à ce div, mais cela peut poser problème si tu souhaites positionner depuis le bottom.

[Invité]

Merci Candygirl pour cet éclaircissement!

Je travaille effectivement sur un projet sous FF et au vu de tout ce que tu me dis concernant le référencement par rapport à un td je crois que je vais refaire tout le tableau en css et ainsi positionner tout comme il se doit.

Bien sûr si qqn trouve une solution ça peut m'intéresser aussi! Je laisse donc le sujet encore un peu ouvert.

Bonne journée et encore merci,

webrider