Discussion :

[Invité]

Bonjour à tous/toutes,

Je cherche à réaliser une page HTML contenant simplement un formulaire pour se connecter à ma base de données MySQL. Je n'ai pas de problème au niveau du codage HTML, mais c'est du côté CSS que j'ai du mal.
Je voudrais afficher mon formulaire au centre de la page, avec ce style :



J'ai créé l'image de fond (disponible ici) et je voudrais maintenant rajouter les champs text, password, le bouton et les encadrés mais je n'arrive pas à correctement placer les éléments sur ma page (dans le fichier CSS).
Aussi, je ne vois pas comment créér les encadrés avec l'opacité réduite et les contours arrondis.

Quelqu'un peut-il m'aider !?
Merçi.

[Halleck]

Le plus simple sera d'intégrer les cadres arrondis + grisé dans ton image de base:
=> les autres solutions (générer des arrondis (il y a un exemple dans les sources CSS) et prendre une image grise avec une transparence) vont loquer sous IE6 qui ne gère pas (facilement) la transparence.

Vu que tu sais exactement où vont être tes champs, à mon avis la solution ci-dessus (intégrer leur emplacement directement sur l'image de base) est la plus simple

Une autre solution si ça ne te plait pas : créer 2 images de taille fixes, qui auront l'allure voulue comme si elles étaient transparentes (par exemple : un png avec ton fond voulu et un calque transparent par dessus, le tout exporté au format voulu), et les intégrer à la position voulue...

[Invité]

D'accord, je pense que je vais faire ça alors, ça paraît plus simple.
Mais je n'arrive toujours pas à placer mes éléments au bon endroit avec le CSS, j'ai un peu de mal.

Comment faire ?

Je voudrais aussi savoir comment mettre le texte avec cette police de caractères qu'on voit sur l'image.

[Deallyra]

ton image dans un div et position relative?

[Invité]

ton image dans un div et position relative?

Oui, mon image est dans une balise <div>.
Désolé pour la "position relative", je ne sais pas ce que c'est.

[Deallyra]

tu as deux type de positionnements d'objets entre eux. Enfin d'éléments.
position : relative; tu indiques la position de ton élément actuel par rapport à l'élément père
position : absolute; tu indiques une position par rapport à ton coin supérieur gauche de page html.

enfin c'était le cas il y a un an... Je ne me suis pas replongée dans le code html depuis