Mettre le bouton à la ligne

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mettre le bouton à la ligne

davidmarli

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 :

<fieldset style="width:300px; float:left;margin: 20px;padding: 10px;" >
<legend> Jours de délestage (Relais 1): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
<label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
<label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
<label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
<label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
<label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
<label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
<fieldset style="width:300px; float:left;margin: 20px;padding: 10px;" >
<legend> Jours de délestage (Relais 2): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
<label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
<label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
<label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
<label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
<label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
<label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
<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

Publicité

David Boring

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

davidmarli

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

Code :

<div style="display:flow-root;">
<fieldset style="width:300px;">
<legend> Jours de délestage (Relais 1): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
<label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
<label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
<label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
<label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
<label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
<label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
<fieldset style="width:300px;">
<legend> Jours de délestage (Relais 2): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
<label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
<label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
<label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
<label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
<label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
<label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
<br>
<br>
<br>
<button class="w3-btn w3-green w3-border" id="save2" style="float:left;margin: 20px;padding: 10px;">Sauvegarde</button><span id="savemsg2"></span>
<br>
<br>
</div>

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

David Boring

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 ?

davidmarli

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

Code :

<div style="display:flow-root;">
<fieldset style="width:300px;">
<legend> Jours de délestage (Relais 1): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP1" name="CheckJoursRougeHP1" value="CheckJoursRougeHP1" checked />
<label for="CheckJoursRougeHP1">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP1" name="CheckJoursBlancHP1" value="CheckJoursBlancHP1" unchecked />
<label for="CheckJoursBlancHP1">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP1" name="CheckJoursBleuHP1" value="CheckJoursBleuHP1" unchecked />
<label for="CheckJoursBleuHP1">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC1" name="CheckJoursRougeHC1" value="CheckJoursRougeHC1" checked />
<label for="CheckJoursRougeHC1">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC1" name="CheckJoursBlancHC1" value="CheckJoursBlancHC1" unchecked />
<label for="CheckJoursBlancHC1">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC1" name="CheckJoursBleuHC1" value="CheckJoursBleuHC1" unchecked />
<label for="CheckJoursBleuHC1">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
<fieldset style="width:300px;">
<legend> Jours de délestage (Relais 2): </legend>
<div>
<input type="checkbox" id="CheckJoursRougeHP2" name="CheckJoursRougeHP2" value="CheckJoursRougeHP2" checked />
<label for="CheckJoursRougeHP2">Délester les jours ROUGE (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHP2" name="CheckJoursBlancHP2" value="CheckJoursBlancHP2" unchecked />
<label for="CheckJoursBlancHP2">Délester les jours BLANC (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHP2" name="CheckJoursBleuHP2" value="CheckJoursBleuHP2" unchecked />
<label for="CheckJoursBleuHP2">Délester les jours BLEU (HP)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursRougeHC2" name="CheckJoursRougeHC2" value="CheckJoursRougeHC2" checked />
<label for="CheckJoursRougeHC2">Délester les jours ROUGE (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBlancHC2" name="CheckJoursBlancHC2" value="CheckJoursBlancHC2" unchecked />
<label for="CheckJoursBlancHC2">Délester les jours BLANC (HC)</label>
</div>
<div>
<input type="checkbox" id="CheckJoursBleuHC2" name="CheckJoursBleuHC2" value="CheckJoursBleuHC2" unchecked />
<label for="CheckJoursBleuHC2">Délester les jours BLEU (HC)</label>
</div>
</fieldset>
</div>
<br>
<br>
<br>
<button class="w3-btn w3-green w3-border" id="save2" style="float:left;margin: 20px;padding: 10px;">Sauvegarde</button><span id="savemsg2"></span>
<br>
<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

David Boring

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

davidmarli

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

FORUM HardWare.fr

Programmation

HTML/CSS

Mettre le bouton à la ligne

Sujets relatifs
[PHP] Comptage de réponse après clic bouton dans email	Rendre cliquable chaque ligne entiere de tableau
Regrouper plusieurs résultats sur une seule ligne	Pourquoi j'ai cette erreur lorsque je met une image dans un bouton ou
Pourquoi lorsque je clique sur le bouton Start il desactive les Labels	Impossible de selectionner et de déplacer un bouton
Mettre le menu fixe quand la fenêtre de navigateur rétréci	Cree un bouton parcourir pour ajouter un raccourci dossier windows
Incrémenter un ID sur un bouton et textarea	Bouton sélectionner toutes checkbox ne marche pas
Plus de sujets relatifs à : Mettre le bouton à la ligne

Page générée en 0.184 secondes