upload/1604352398-81318-sanstitre.png Bonsoir,j'aimerais pouvoir mettre mes fieldset l'un a coté de l'autre pas l'un au dessus de l'autre comme suit ,voici mon code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="style.css">
          <title>Detail-ETII</title>
     </head>
     <body>
          <body>
          <div class="container">
               <form id="form" action="" method="post">
                    <center><h3><b>Detail de l'etat des transactions internationales intragroupes</b></h3></center><br /><br />

                    <label for="periode">SERVICE D'ASSIETTE DES IMPOTS DE:</label> <input type="text" id="nat" name="periode" />&emsp;&emsp;
						<label for="periode">ANNEE</label> <input type="text" id="fonc" name="raisonsociale" />
                              <br /><br />
                              
                    <fieldset id="pa">
                    <legend><h4>Informations générales sur le groupe d'entreprises associées</h4></legend>
                    <p>Principales activités du groupe auquel l'entreprise appartient:</p>
                    <input type="text"  id="p1" name="periode" /><br /> <br />
                    </fieldset>
                
                    <fieldset id="pi">
                        <legend><h4>Actifs incorporels utilisés par l'entreprise déclarante</h4></legend>
                      <p>Nature des actifs incorporels utilisés par l'entreprise déclarante et droits exercés sur ces actifs:</p>&emsp;
                        <input type="text"  id="p1" name="periode" />&emsp;
                        <p>Dénomination et juridiction d'implantation des entreprises associées propriétaires,copropriétaires ou utilisatrice des actifs incorporels</p>&emsp;
                        <input type="text"  id="p1" name="periode" /><br /> <br />
                        </fieldset>
                    

                    
               </form>
            </div>
       </body>
  </html>
  

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
     -o-font-smoothing: antialiased;
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
}

body{
    
     color: $gray;
     font-family: $base-font-family;
     font-size: $base-font-size;
     line-height: $base-line-height;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 100;
     font-size: 13px;
     line-height: 30px;
     color: #171616;

}

.container{
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     position: relative;
     
}


/* ---------------------------CSS du formulaire-------------------------------*/
#form input[type="email"],
#form input[type="tel"],
#form input[type="url"],
#form textarea,
#contact input[type="text"],
#contact input[type="date"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"],
#form button[type="submit"] {
     font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#form{
     background: #F5F5F5;
     padding: 25px;
     margin: 30px 0;
     border-radius: 25px;
   	 box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

 #contact {
     background: #F5F5F5;
     padding: 25px;
     margin: 30px 0;
     border-radius: 25px;
   	 box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#form h3 {
     display: block;
     font-size: 30px;
     font-weight: 300;
     margin-bottom: 10px;
}

#form h4 {
     margin: 5px 0 15px;
     display: block;
     font-size: 13px;
     font-weight: 400;
}
#contact h4 {
     margin: 5px 0 15px;
     display: block;
     font-size: 13px;
     font-weight: 400;
}


.pi
{
  background: #F5F5F5;
	float: left;
	clear:left;
	width: 49%;
	padding: 2px 2px 2px 2px;/* top right bottom left */
}
.pa
{
  background: #F5F5F5;
	float: right;
	clear:right;
	width: 49%;
	padding: 2px 2px 2px 2px;/* top right bottom left */
}

besoin d'aide svp
Modifié par fleu (02 Nov 2020 - 22:27)
Modérateur
Bonjour,

Beaucoup de différentes manières de faire !

Mais je pense que le mieux est de passer à une présentation sous forme de grid.

1) tu supprimes les <br> (c'est le mal absolu)
2) tu supprimes le <center> (autre mal absolu)
3) tu supprimes les "&emsp;" (autre mal absolu)
4) tu encapsules ce qui est au dessus des fieldsets actuels (le titre et les deux premiers inputs avec leurs labels) dans un autre fieldset (tu as donc 3 fieldsets).

J'ai aussi ajouté quelques espaces ici et là qui manquaient (avant des ":", après un ",", etc.)

On obtient ça :
<div class="container">
  <form id="form" action="" method="post">
    <fieldset>
      <h3><b>Detail de l'etat des transactions internationales intragroupes</b></h3>
      <label for="periode">SERVICE D'ASSIETTE DES IMPOTS DE:</label>
      <input type="text" id="nat" name="periode" />
      <label for="periode">ANNEE</label>
      <input type="text" id="fonc" name="raisonsociale" />
    </fieldset>
    <fieldset id="pa">
      <legend>
        <h4>Informations générales sur le groupe d'entreprises associées</h4>
      </legend>
      <p>Principales activités du groupe auquel l'entreprise appartient :</p>
      <input type="text" id="p1" name="periode" />
    </fieldset>
    <fieldset id="pi">
      <legend>
        <h4>Actifs incorporels utilisés par l'entreprise déclarante</h4>
      </legend>
      <p>Nature des actifs incorporels utilisés par l'entreprise déclarante et droits exercés sur ces actifs :</p>
      <input type="text" id="p1" name="periode" />
      <p>Dénomination et juridiction d'implantation des entreprises associées propriétaires, copropriétaires ou utilisatrice des actifs incorporels :</p>
      <input type="text" id="p1" name="periode" />
    </fieldset>
  </form>
</div>


Et ensuite, tu ajoutes dans le css :
form
{
	display:grid;
	gap:2rem;
}
fieldset:nth-of-type(1)
{
	grid-column:1 / 3;
	border:0;
}
fieldset:nth-of-type(2)
{
	grid-column:1;
}
fieldset:nth-of-type(3)
{
	grid-column:2;
}
#nat {margin-right:2rem;}

Et pour finir, tu rajoutes éventuellement quelques espaces là où tu le souhaites, mais via css et non pas avec des <br> ou des "&emsp;"

Amicalement,
Meilleure solution
Modérateur
parsimonhi a écrit :

1) tu supprimes les <br> (c'est le mal absolu)

3) tu supprimes les "&emsp;" (autre mal absolu)

J'ai aussi ajouté quelques espaces ici et là qui manquaient (avant des ":", après un ",", etc.)

Hello,
Je rebondis simplement sur 2-3 choses :

- Dans ce cas-ci on est d'accord qu'un <br> est totallement mal placé mais en vrai je ne trouve pas <br> comme le mal absolu. Au milieu d'un paragraphe, dans une address…, je l'utilise fréquement et il a (il me semble) tout son sens.

- Pour les espaces, spécialement avant les €, ?, !, : et autres j'utilise toujours un espace insécable (&nbsp; ou &nnbsp;) pour éviter sur le caractères retourne à la ligne seul. Donc à nouveau dans ce cas, je suis d'accord sur l'inutilié dans le cas montré mais à ne pas confondre avec le mal absolu.

Comme toujours, ce n'est qu'un avis perso et je suis ouvert à d'autres avis/commentaires la dessus Smiley smile
Modérateur
Yordi a écrit :

- Dans ce cas-ci on est d'accord qu'un &lt;br&gt; est totallement mal placé mais en vrai je ne trouve pas &lt;br&gt; comme le mal absolu. Au milieu d'un paragraphe, dans une address…, je l'utilise fréquement et il a (il me semble) tout son sens.

- Pour les espaces, spécialement avant les €, ?, !, : et autres j'utilise toujours un espace insécable (&amp;nbsp; ou &amp;nnbsp;) pour éviter sur le caractères retourne à la ligne seul. Donc à nouveau dans ce cas, je suis d'accord sur l'inutilié dans le cas montré mais à ne pas confondre avec le mal absolu.

D'accord à 100% avec toi, Yordi !

J'aurais dû écrire "c'est le mal relatif" ! Smiley cligne

Amicalement,