28173 sujets

CSS et mise en forme, CSS3

[Résolu]Alignement de deux formulaires

Bonjour,

Je me suis mis en tête l'envie de porté la homepage de mon site en CSS, mais voila je bloque déjà dans mon header.

Je cherche donc à aligné sur une même ligne, mon formulaire de login sur la gauche, et celui pour la newsletter sur la droite.

Mais voila ça ne fonctionne pas.

Merci pour votre aide.
Modifié par pp01 (06 Dec 2007 - 16:44)
Administrateur
Bonjour et bienvenue, Smiley smile

peut-on avoir une idée du rendu visuel que tu souhaites obtenir et avec quels éléments de formulaire? Ou du code HTML actuel?
Y a-t'il 2 (nom à gauche, email à droite) ou 3 (mot de passe en plus du nom) input de type text, des input de type submit, etc?

Selon les cas, tu peux utiliser les flottants, te contenter de positionner des <span>, etc mais on ne peut pas être plus précis avec aussi peu d'information.
Modifié par Felipe (05 Dec 2007 - 18:18)
Administrateur
Tout de suite c'est plus éclairant Smiley smile

l'attribut "align" est un élément de présentation, il n'a rien à faire dans le code HTML si tu souhaites séparer contenu (HTML) et présentation (CSS) comme il est fortement recommandé de le faire Smiley cligne

si tu rajoutes deux couleurs de fond aux div qui englobent ces éléments de formulaire pour mieux voir ce qui se passe, tu peux ensuite leur fixer à chacun une largeur avec width (40-50%) et les faire flotter à gauche et à droite (float: left; et right)
Le contenu qui suit dans le flux HTML va remonter, tu peux rajouter un clear: both; à ce div-là (celui qui suit) pour l'empêcher.
Lectures conseillées: les 3 articles d'Openweb sur le positionnement, le tuto sur le design fluide et le lien vers "Comprendre le positionnement en CSS" (pas tellement pour les colonnes mais plus pour le fonctionnement de la chose, m'enfin les articles d'Openweb peuvnet suffire)
Modifié par Felipe (06 Dec 2007 - 12:06)
Alors j'ai supprimé les deux align et mis une taille a 50%, mes formulaires ce retrouve aligné sur la gauche l'un au dessus de l'autre. (cf : changement de texture)... je consulte les différent article merci.
Sujet clos
Aller à