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

[Candygirl]

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...

Petite correcion; cela n'a jamais été le cas

Position absolute: tu indiques une position à l'aide des propriétés top bottom left et/ou right, par rapport au plus proche ancêtre positionné, à défaut la fenêtre de visualisation. En élément en position absolute est retiré du flux.

Position : relative: tu indiques un déplacement de l'élément par raport à la place qu'il occupe normalement dans le flux, sans influence sur les autres éléments de la page.

[Deallyra]

tu appelles ça une petite correction?

j'ai comprit... je n'ai plus qu'à aller me noyer...

en fait, j'avais rien comprit.

ha, Candygirl, tu aurais put aussi corriger ça ^^

Je ne me suis pas replongée dans le code html depuis

tout compte fait, je vais aller me coucher, ça vaut mieux

[Candygirl]

en fait, j'avais rien compris

Non, tu avais juste compris ce qu'on comprends tous à première utilisation des positionnements. En progressant on se rend compte de son approximation sur le réalité

[Deallyra]

merci de me réconforter CandyGirl ^^

edit : j'arrête là car ça va virer au flood sinon

[Invité]

Merci, mais comment je m'en sors dans tout ça ?

[Deallyra]

oups, désolée.

tu sais, le plus simple serait que tu prennes ton image sans les champs text, tu fais des map pour les liens vers les autres pages
sinon...
les champs input type="text" seront posés par tes soins grâce à un position absolute? Ce serait bon CandyGirl?

[Invité]

Merci, je vais voir ça.
Je ne connaissais pas la balise <map>, je vais étudier ça de plus près.