web-dev-qa-db-fra.com

Comment placer 3 zones de texte dans une largeur de 1140 px de carte? Il y a 2 onglets dans la carte. la largeur est fixe en raison du contenu dans un autre onglet

La largeur est de 1140 px. Le contenu de l'onglet 1 est plus et prend une largeur de 1140 px. donc pour maintenir la cohérence ne peut pas changer ou réduire la largeur Suggérer une autre disposition ou une meilleure solution

Trouver les wireframes joints Layout

wireframe

3
Rohit bhosale

Vous pouvez réorganiser les zones de texte 1, 2 et 3 en colonnes. Considérez également que les largeurs fixes sont presque inexistantes, vous devez donc concevoir les colonnes avec un comportement réactif approprié.

1
Pablo Lobos

Si vous avez besoin d'utiliser la même carte pour les deux onglets (large et court), vos options sont les suivantes:

  1. Réduisez l'onglet le plus large
  2. Conserver un espace vide dans l'onglet le plus court

Comme vous mentionnez que l'option 1 n'est pas possible, vous ne pouvez conserver que la grande largeur dans l'onglet court.

L'espace vide n'est pas un problème dans votre conception. Vous pouvez donc simplement le garder. La seule chose est que le bouton d'action (réinitialiser le mot de passe) devrait être à droite ou à gauche de l'onglet.

1
Alvaro

D'après vos commentaires sur les solutions suggérées jusqu'à présent, il semble que cette mise en page fonctionne déjà de manière cohérente dans votre style à l'échelle du site.

Ma seule recommandation est la suivante (basée sur la façon dont j'ai créé des formulaires dans le passé): pour mieux attirer l'attention des utilisateurs sur le formulaire, envisagez d'ajouter une légère nuance de fond gris (#efefef ou similaire) aux formulaires (dans tous les onglets) , puis définissez l'arrière-plan du conteneur d'onglets sur blanc. Si le remplissage est défini sur ou dans le formulaire, pas sur le conteneur d'onglets, le fond blanc ne s'affiche que lorsque le formulaire n'est pas pleine largeur. Lorsque cet onglet particulier est actif, le blanc serait visible à droite du formulaire.

Cela créerait un signal visuel pour l'utilisateur que la largeur du formulaire est intentionnelle. De plus, la couleur grise derrière les entrées de formulaire blanc est plus attrayante visuellement que le blanc sur blanc. Si cela vous regarde, conservez l'original. Ma suggestion peut ne pas sembler bonne, car vous utilisez déjà le gris comme arrière-plan derrière les onglets. Les utilisateurs attendent de la cohérence, et c'est ce que vous leur avez donné. Bonne chance!

0
Peter Arthur

Vous pouvez disposer horizontalement trois champs, ou une carte dessinée à la main est placée dans une zone vierge, en plus je pense que changer le mot de passe et le compte pour utiliser le TAB n'est pas raisonnable.

0
user2869490

Si vous préférez que le formulaire utilise un espace plus horizontal, vous pouvez également envisager de placer les étiquettes à gauche des champs. Bien qu'il y ait quelques inconvénients à cela ( cet article résume les avantages et les inconvénients ) vos étiquettes sont quelque peu de la même longueur, donc cela ne devrait pas être trop gros.

0
jazZRo

Je peux suggérer de définir vos entrées dans une carte intérieure de deux manières:

  1. Accordéon à page de connexion de Yahoo! ; laissez la carte intérieure à droite et ajoutez une note à gauche.
  2. Accordéon à page de connexion de Google ; laissez la carte intérieure au milieu.
0
shA.t