Mettre le bouton à la ligne

Mettre le bouton à la ligne - HTML/CSS - Programmation

Marsh Posté le 31-03-2024 à 10:58:44    

Bonjour,
 
je n'arrive pas à faire ce que je veux !!
 
J'ai deux fieldset que j'ai mis côte à côte.
 
Je veux placer un bouton sous ces 2 fieldset, mais je n'y arrive pas.
 
Si la page est large, il vient se placer à droite du second fieldset !!!
 
Comment faire ?
 

Code :
  1. <fieldset style="width:300px; float:left;margin: 20px;padding: 10px;" >
  2.             <legend> Jours de délestage (Relais 1): </legend>
  3.                 <div>
  4.                     <input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
  5.                     <label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
  6.                 </div>
  7.                 <div>
  8.                     <input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
  9.                     <label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
  10.                 </div>
  11.                 <div>
  12.                     <input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
  13.                     <label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
  14.                 </div>
  15.                 <div>
  16.                     <input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
  17.                     <label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
  18.                 </div>
  19.                 <div>
  20.                     <input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
  21.                     <label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
  22.                 </div>
  23.                 <div>
  24.                     <input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
  25.                     <label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
  26.                 </div>
  27.         </fieldset>
  28.         <fieldset style="width:300px; float:left;margin: 20px;padding: 10px;"  >
  29.             <legend> Jours de délestage (Relais 2): </legend>
  30.                 <div>
  31.                     <input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
  32.                     <label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
  33.                 </div>
  34.                 <div>
  35.                     <input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
  36.                     <label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
  37.                 </div>
  38.                 <div>
  39.                     <input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
  40.                     <label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
  41.                 </div>
  42.                 <div>
  43.                     <input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
  44.                     <label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
  45.                 </div>
  46.                 <div>
  47.                     <input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
  48.                     <label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
  49.                 </div>
  50.                 <div>
  51.                     <input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
  52.                     <label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
  53.                 </div>
  54.         </fieldset>
  55.  
  56.        
  57.    
  58.      
  59.      
  60.         <button class="w3-btn w3-green w3-border" id="save2" style="margin: 20px;padding: 10px;" >Sauvegarde</button><span id="savemsg2"></span>


 
 
Merci.


---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 31-03-2024 à 10:58:44   

Reply

Marsh Posté le 31-03-2024 à 13:05:00    

Cela fait des années que float n'est plus employé pour mettre deux blocks côte à côte.
Tu peux mettre tes deux fieldsets dans un div qui a pour style: display: flow-root

Reply

Marsh Posté le 31-03-2024 à 13:57:17    

flow-root, ne les met pas à côté l'un de l'autre mais en dessous !!
 

Code :
  1. <div style="display:flow-root;">
  2. <fieldset style="width:300px;">
  3.   <legend> Jours de délestage (Relais 1): </legend>
  4.   <div>
  5.     <input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
  6.     <label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
  7.   </div>
  8.   <div>
  9.     <input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
  10.     <label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
  11.   </div>
  12.   <div>
  13.     <input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
  14.     <label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
  15.   </div>
  16.   <div>
  17.     <input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
  18.     <label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
  19.   </div>
  20.   <div>
  21.     <input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
  22.     <label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
  23.   </div>
  24.   <div>
  25.     <input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
  26.     <label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
  27.   </div>
  28. </fieldset>
  29. <fieldset style="width:300px;">
  30.   <legend> Jours de délestage (Relais 2): </legend>
  31.   <div>
  32.     <input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
  33.     <label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
  34.   </div>
  35.   <div>
  36.     <input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
  37.     <label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
  38.   </div>
  39.   <div>
  40.     <input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
  41.     <label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
  42.   </div>
  43.   <div>
  44.     <input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
  45.     <label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
  46.   </div>
  47.   <div>
  48.     <input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
  49.     <label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
  50.   </div>
  51.   <div>
  52.     <input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
  53.     <label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
  54.   </div>
  55. </fieldset>
  56. <br>
  57. <br>
  58. <br>
  59. <button class="w3-btn w3-green w3-border" id="save2" style="float:left;margin: 20px;padding: 10px;">Sauvegarde</button><span id="savemsg2"></span>
  60. <br>
  61. <br>
  62. </div>


---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 31-03-2024 à 14:15:47    

Le div doit se fermer en dessous du second fieldset.
Il permet de rétablir le flux normal lors de l'usage de "float"
 
Mais je te conseille plutôt de lire un article récent sur grid ou flex pour apprendre un code moderne pour mettre deux elements côte à côte.
 
Ton code vient d'un article, un livre ?

Reply

Marsh Posté le 31-03-2024 à 15:28:48    

aucun effet ! Les deux fieldset sont tjs l'un en dessous de l'autre et le bouton aussi !
 

Code :
  1. <div style="display:flow-root;">
  2.   <fieldset style="width:300px;">
  3.     <legend> Jours de délestage (Relais 1): </legend>
  4.     <div>
  5.       <input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
  6.       <label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
  7.     </div>
  8.     <div>
  9.       <input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
  10.       <label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
  11.     </div>
  12.     <div>
  13.       <input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
  14.       <label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
  15.     </div>
  16.     <div>
  17.       <input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
  18.       <label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
  19.     </div>
  20.     <div>
  21.       <input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
  22.       <label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
  23.     </div>
  24.     <div>
  25.       <input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
  26.       <label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
  27.     </div>
  28.   </fieldset>
  29.   <fieldset style="width:300px;">
  30.     <legend> Jours de délestage (Relais 2): </legend>
  31.     <div>
  32.       <input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
  33.       <label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
  34.     </div>
  35.     <div>
  36.       <input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
  37.       <label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
  38.     </div>
  39.     <div>
  40.       <input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
  41.       <label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
  42.     </div>
  43.     <div>
  44.       <input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
  45.       <label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
  46.     </div>
  47.     <div>
  48.       <input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
  49.       <label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
  50.     </div>
  51.     <div>
  52.       <input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
  53.       <label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
  54.     </div>
  55.   </fieldset>
  56. </div>
  57. <br>
  58. <br>
  59. <br>
  60. <button class="w3-btn w3-green w3-border" id="save2" style="float:left;margin: 20px;padding: 10px;">Sauvegarde</button><span id="savemsg2"></span>
  61. <br>
  62. <br>


Message édité par davidmarli le 31-03-2024 à 15:29:13

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Marsh Posté le 31-03-2024 à 15:48:11    

Ajouter un wrapper en display flow-root fonctionnait avec le premier code, quand les fieldset étaient en float.
 
Ce n'est plus le cas dans ton code.
mais tu peux remplace flow-root par flex

Reply

Marsh Posté le 31-03-2024 à 15:51:20    

ah, c'est bon. Je croyais que tu me disais de ne pas utiliser les float:left ...
 


---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed