Boite en absolute par dessus une boite en relative

Bonjour,

J'avais un design Photoshop très simple à découper et pour pas m'embêter, j'ai mis le design en fond dans une boite et j'ai positionné mes input en relative dessus ( je sais c'est pas bien... )

http://iow4creation.no-ip.org/dev

J'utilise le framework scriptaculous pour faire de l'autocomplétation sur les champs activités et localités, seulement comme le flux de ma page web est interrompu à cause du positionnement relatif, la boite qui contient les suggestions est en dessous des input.

Savez-vous comment régler ce problème ?

Merci beaucoup

Boujour,

iowa a écrit :
Bonjour,
J'avais un design Photoshop très simple à découper et pour pas m'embêter, j'ai mis le design en fond dans une boite et j'ai positionné mes input en relative dessus ( je sais c'est pas bien... )

Pour le coup c'est sûr tu ne t'es pas embêté T'as même oublié les label

a écrit :
J'utilise le framework scriptaculous pour faire de l'autocomplétation sur les champs activités et localités, seulement comme le flux de ma page web est interrompu à cause du positionnement relatif, la boite qui contient les suggestions est en dessous des input.

Savez-vous comment régler ce problème ?

Refaire un découpage pour s'embêter , laisser tomber le script d'autocomplétion dans un premier temps et faire une page (avec DOCTYPE) en y intégrant un formulaire utilisable dans tous les cas de figure .

Pas mieux à proposer si ce ne sont ces lectures:
-Comment utiliser l'élément label pour étiquetter les contrôles de formulaire ?
-Des formulaires plus simples

Merci, c'est une solution effectivement mais je n'ai plus trop le temps.
Avez-vous une autre solution ?

Encore une fois merci.

iowa a écrit :

Avez-vous une autre solution ?

Ben non

Pour info sais-tu que ton image (unique) de fonds pèse 135.95 Ko , plus l'appel de scripts à foison, que même sans parler d'accessibilité, dans l'état il y a une latence énorme pour cette page dont l'image de fonds se charge très très lentement -je viens de tester sur deux connexions et deux machines différentes- qui fait que l'on ne perçoit que des champs vides sans intitulé pour chaque champs pendant de longues secondes

Le but de ce formulaire est-il de permettre à ton client d'avoir un formulaire utilisable ou de ne pas trop t'embêter dans la réalisation de son site ? Clairement je pencherais pour la première hypothèse. Il n'y a pas beaucoup de boulot à faire .

C'est sûr qu'intégrer ce design de formulaire peut prendre un petit peu de temps. Une petite demi-heure, par exemple. Bien sûr, si on n'a pas les compétences nécessaires, ça prendra plus de temps, et ça demandera quelques tâtonnements.

Après, on peut toujours faire du bricolage... mais la qualité s'en ressentira sérieusement.

Pour faire les choses bien, il faudrait découper ce design en trois images :
- l'en-tête (texte en image), pour en faire une image à insérer dans le code HTML :

<h1><img src="..." alt="Artisans92.fr l'annuaire des Artisans des Hauts-de-Seine" /></h1>

- le fond jaune avec le bonhomme doré et le fond jaune pâle du formulaire : en image de fond d'un bloc ;
- le cadre orangé avec ombre portée (pour servir d'image de fond pour les label du formulaire).
Le reste, c'est HTML + CSS.

À noter que pour la troisième image on pourrait faire aussi une image avec bordure ou une ombre portée opaque à la place de l'ombre portée translucide, pour IE6 uniquement (car pas de support natif de la transparence PNG). On appliquera le correctif via un commentaire conditionnel (bon, du coup on est passé de 30min à 35-40min ).

Bon Igor c'est ta solution que je retient merci à vous deux.
Demain je vous présente le nouveau design valid xhtml strict et accessible :d

iowa a écrit :
Bon Igor c'est ta solution que je retient merci à vous deux.
Demain je vous présente le nouveau design valid xhtml strict et accessible :d

Bravo et bon courage

iowa a écrit :
Demain je vous présente le nouveau design valid xhtml strict

Super cette page aura alors un DOCTYPE

Héhé je l'ai fait ! valid strict seulement j'ai un petit problème pour les labels en faite je sais pas avec quoi les rattacher vu que toutes les images qui composent mon design sont en background-image.

Merci.

iowa a écrit :
Héhé je l'ai fait ! valid strict seulement j'ai un petit problème pour les labels en faite je sais pas avec quoi les rattacher vu que toutes les images qui composent mon design sont en background-image.

Merci.

Difficile à dire, ton lien ne fonctionne plus , mais çà me semble une mauvaise pioche a priori.

Tu as bien fait des labels du genre:

<p><label for="nom">Nom</label><input id="nom" .etc /></p>
<p><label for="prenom">Prénom</label><input id="prenom" .etc /></p>

Sur mon design l'intitulé du champs est une image inclut en background-image donc j'ai juste un div dans mon xhtml

iowa a écrit :
Sur mon design l'intitulé du champs est une image inclut en background-image

Ben voilà, c'est ça l'erreur.

Alors qu'il n'est pas bien compliqué de faire ceci :

<p>
	<label for="machin"><img src="..." alt="Le texte de mon label" /></label>
	<input id="machin" ... />
</p>