28172 sujets

CSS et mise en forme, CSS3

Mettre un btn à droite dans une fenêtre modale.

Bonjour,
Je tente depuis un moment de mettre un btn dans une modale.
J'y arrive à gauche, mais impossible à droite.
Il vient buter à l'extérieur de la modale.
Je vous mets les CSS du bonton :
.orange {
  color: #FF8C00;
  font-size:40px;
  margin-top: -5px; 
  margin-right: 50px !important;
  position: fixed;
}

ainsi que le HTML :
<div id="oModal" class="oModal">
  <div align="right"><p><a href="#fermer"><i class="fa fa-times orange btn"></i></a></p>   
<div class="cv_header">
        <h1>Mais qui est-ce ?</h1>
    </div>

Merci pour votre aide,
ED upload/1652346646-48192-capturedaeacran2022-05-12aa11.jpg
Si j'ai bien compris...
- Il n'est pas à l'extérieur mais à l'intérieur
- Il ne touche pas le bord à cause de margin-right: 50px

Mais peut être que je n'ai pas compris le problème...
Bonjour kerlutinoec,
Pardon, à l'extérieur de la fenêtre je voulais dire.
Le margin n'a aucune incidence sur l'emplacement du btn, que ce soit 50, 100 ou 0px, cela ne change rien... d'où le problème.
Merci Smiley cligne
Ton margin-right: 50px est seulement sur .orange. Ce ne serait pas plutôt btn qui devrait s'aligner ? Ou alors, faire golobal.
.fa,  .fa-times, .orange, .btn {
margin-right: 50px;}

À condition que ces quatre class soient destinées au même style.
Modifié par Bongota (12 May 2022 - 19:40)
Bonsoir Bogota,
Oui, ces quatre class sont destinées au même style, mais cela ne change rien, le btn reste "à l'extérieur" Smiley bawling
Bonne soirée,
ED
Je ne comprends pas, tu y arrives à gauche, c'est à dire tu arrives à positionner la croix sur la gauche ? Donc il te suffit d'augmenter la marge de gauche: margin-left (une valeur au hasard, courte, 10 px par exemple). Si ça fonctionne, tu avances jusqu'à être au bon endroit à droite.
Modifié par Bongota (12 May 2022 - 22:30)
Avec ces CSS :
.orange {
  color: #FF8C00;
  font-size:40px;
  margin-top: -5px; 
  position: fixed;
  margin-left: 0px;
}

le btn reste dans la fenêtre modale, malgré une position fixed.
Avec un margin-right, le btn reste "fixed" et se promène un peu partout selon le redimensionnement de la fenêtre.
J'ai essayé aussi un margin-right avec une valeur négative, ça fonctionne mais encore une fois, le btn se promène.
Que faire Smiley hum
Bonne soirée !
Modérateur
Bonsoir,

Si tu (re)lis la définition de https://developer.mozilla.org/fr/docs/Web/CSS/position#fixed
puis celle de https://developer.mozilla.org/fr/docs/Web/CSS/position#absolute ,
tu devrais logiquement passer sur le positionnement absolu et te servir de top,right pour caler ton bouton au lieu de margin Smiley cligne si tu est curieux , regarde aussi https://developer.mozilla.org/fr/docs/Web/CSS/inset / https://caniuse.com/?search=inset (pour un avenir proche )

Cdt
Modifié par gcyrillus (12 May 2022 - 23:39)
Bonjour gcyrillus,
Merci, j'ai appris des trucs, mais j'ai besoin que la position soit fixe.
Ça fonctionne très bien, sauf que le btn est collé à la modale et non à l'intérieur (voir screenshot). Si seulement je pouvais faire un margin-right ou un right Smiley hum
Bonne journée Smiley smile
ED
Modérateur
el_debutanti a écrit :
Bonjour gcyrillus,
Merci, j'ai appris des trucs, mais j'ai besoin que la position soit fixe.
Ça fonctionne très bien, sauf que le btn est collé à la modale et non à l'intérieur (voir screenshot). Si seulement je pouvais faire un margin-right ou un right Smiley hum
Bonne journée Smiley smile
ED


Super,

Sauf que , selon le HTML que tu donnes, le bouton est enfant de ta modale
exemple de ton code en mettant seulement la modale en fixed : https://jsfiddle.net/kapvs16o/
Pas de doute , le bouton est dedans et float à droite avec cet horrible ( Smiley smile ) attribut : align=right , totalement obsolète et du siècle dernier!

en ajoutant ta class orange sans positionement : https://jsfiddle.net/kapvs16o/1/

Tu aurais apparemment, une fois de plus, pas donné tous les détails, détails qui nous permettrais de mettre ton bug en évidence ....

Bon W-E
Modifié par gcyrillus (13 May 2022 - 20:16)
Sujet clos
Aller à