28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement paiement don sur 1 seule ligne

Bonjour
Ah peut-être pas assez clair dans le titre. Il s'agit de l'alignement horizontal sur une seule ligne:
titulaire / montant / n° carte et cvc / je donne
Comme c'est un formulaire, je pense que je peux mettre un id ou class
Modifié par HDcms (19 Sep 2022 - 11:45)
Modérateur
Bonjour,

Ces informations sont dans des <div> distincts qui par défaut s'affichent les uns en dessous des autres.

1) soit tu mets toutes les informations "titulaire / montant / n° carte et cvc / je donne" dans un <div> unique, ou encore mieux dans un <fieldset> (ce qui me semble le plus propre). Ou éventuellement, tu les réunies dans un <div> ou un <fieldset> contenant tous les <div> contenant ces informations (dans le but de modifier le moins possible le code, mais bon, c'est loin d'être joli). Il faut ensuite adapter le css en conséquence.

2) soit dans le css, tu mets des display:inline-block pour les <div> concernés.

En l'état, ton html est assez crado. Il faudra faire pas mal de bricolage pour obtenir un résultat correct de toute façon. Selon moi, il vaudrait mieux ré-écrire entièrement ce formulaire, en supprimant tous les <div> qu'il contient et en regroupant les informations qui doivent l'être dans des <fieldset>.

Amicalement,
Re
1/ J'aurai appliqué tes suggestions si c'était moi qui faisais le formulaire . En l'occurrence, c'est une extension qui fonctionne bien par ailleurs. J'essaie de lui faire remarquer gentiment .
2/ je ne suis pas arrivé à faire qq chose de correct avec l'inspecteur.
J'abandonne. Je trouve cela non ergonomique, mais je fais au mieux bénévolement.
Bonjour
Tiens en passant, je me demande s'il serait possible d'agrandir le div pour mettre le contenu explicatif à droite https://cochanger.eu/media-web/calculateur-taxe-carbone-juste

<div class="cf-content-wrap cf-col-16 cf-col-large-0">
			<div class="cf-content cf-col-16">
												<div class="cf-content-text cf-col "> ...


J'ai essayé de faire sortir le contenu du div mais je ne suis pas sûr que cela soit possible ?
Bonjour
Ah j'ai encore penser à une autre piste mais sans la solutionner
Je cherche à mettre du contenu dans toute la largeur d'un élément.
Soit déplacer le contenu a)
ou agrandir l'espace de b)
Voir l'image
upload/1663850494-58614-capturedancrandu2022-09-2214-.png
Bonjour
Avec de l'aide j'ai compris qu'il fallait que j'augmente la taille du #cf_6 qui était à 350 px de largeur.
Pour terminer, je voudrais mettre le contenu en haut de la boite. Je vois que l'alignement vertical n'est pas si simple et a l'air d'avoir changé (vu les différences de tuto)

J'essaie sans succès. je ne sais pas si je ne cible pas bien ou si je me trompe d'attribut?(essai de l'un ou l'autre ...) ?

#cf_6 .cf-col{
    justify-content: flex-start;
    align-items: start;
}
Modérateur
Bonjour,

Tout est possible, mais tu bricoles trop. Et ça devient difficile à gérer.

Amicalement,
Bonjour
je comprends, mais je rappelle que j'essaie de m'adapter à des contraintes eexternes: extensions/cms.
Je ne fais plus de dev. sur mesure.
Cela fonctionne avec 
#cf6 .cf-content-wrap{    
    align-items: start;
}
Sujet clos
Aller à