Fieldset probleme de mise en page

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Fieldset probleme de mise en page

Re: Fieldset probleme de mise en page

par Spols » 13 juin 2024, 10:31

Met ton code dans un copepen ou autre outil en ligne et partage le nous. Tu ne fais probablement pas la bonne modification.

Re: Fieldset probleme de mise en page

par filou80 » 13 juin 2024, 03:53

Merci pour votre retour,

Quand j’enlève absolute cela ne fonctionne pas, soit que la legend et dans le cadre ou sinon le trait se voit toujours .
Je souhaite que la legend soit sur le trait mais que le trait ne se voit pas derrière la legend.
Cela n'est peut-être pas possible ?

@+ Filou

Re: Fieldset probleme de mise en page

par @rthur » 09 juin 2024, 20:43

Retire le position: absolute; et tu n'auras plus de trait sous legend.

Testé sur Firefox et Chrome en mettant le code que tu as donné sur Codepen.io

Re: Fieldset probleme de mise en page

par filou80 » 08 juin 2024, 22:31

Merci pour votre retour, mais cela ne change rien.
Le trait blanc se voit toujours au niveau de legend.
Je ne souhaite pas mettre de fond a ce niveau.
Cela n'est peut être pas possible ?

Merci par avance pour vos retours.
@+ Filou

Re: Fieldset probleme de mise en page

par @rthur » 08 juin 2024, 16:23

C'est le position:absolute sur legend qui te pose problème, car du coup ça le détache du fieldset qui passe alors en dessous.

Fieldset probleme de mise en page

par filou80 » 08 juin 2024, 07:34

Bonjour à tous,

Je rencontre un problème sur le fieldset, je ne parviens pas a masquer le trait derrière le texte.
J'ai essayer plusieurs chose sans avoir le résultat voulu.
J'ai un fond de couleur et je ne souhaite pas mettre de fond sur la legend du fieldset.
Pourriez-vous m'aider ?

Voici mon code :

css :

Code : Tout sélectionner

fieldset { border: 1px solid white; /* Bordure noire */ padding: 0 1em 1em 1em; /* Ajout de padding sur les côtés et en bas */ position: relative; /* Pour positionner la légende correctement */ } legend { font-size: 1.2em; font-weight: bold; padding: 0 10px; color: white; white-space: nowrap; background-color: transparent; /* Fond transparent */ position: absolute; top: -0.7em; /* Ajustement de la position verticale */ left: 1em; /* Ajustement de la position horizontale */ } .legend-line { width: 100%; height: 1px; background: white; /* Change the color to match your background */ position: absolute; top: 50%; transform: translateY(-50%); }
et mon html :

Code : Tout sélectionner

<div class="container mt-5"> <div class="row justify-content-center"> <div class="col-10"> <div class="mt-3 mb-3"> <fieldset> <legend>AAA</legend> <!-- Contenu du formulaire --> <div class="form-group"> <label for="exampleInputEmail1">Adresse Email</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">Nous ne partagerons jamais votre email avec quelqu'un d'autre.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Mot de passe</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <button type="submit" class="btn btn-primary">Soumettre</button> </fieldset> </div> </div> </div> </div>
Merci par avance pour votre aide.
@+ Filou