Partage
  • Partager sur Facebook
  • Partager sur Twitter

page contact

Sujet résolu
fonfonsd
    11 juillet 2023 à 10:48:29

    Bonjour

    je travail sur la page contact

    j'aurais deux petites questions

    comment fais t'on pour avoir une mise en page avec 3 colonnes comme sur cet exemple :

    image mise en page colonne

    et existe t'il des codes HTML tout fait juste à modifier ( la chaleur rend feignant ) pour des formulaires de contact comme ci dessous par exemple

    formulaire contact

    merci

    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
      11 juillet 2023 à 12:21:12

      Bonjour,

      >> comment fais t'on pour avoir une mise en page avec 3 colonnes comme sur cet exemple :

      Avec flexbox ou grid.

      Lire :

      >> existe t'il des codes HTML tout fait juste à modifier

      Tout dépend de ce que tu as déjà comme framework ou template. Cherche "template HTML5" avec ton moteur de recherche favoris.

      exemple avec bootstrap https://getbootstrap.com/docs/5.0/forms/overview/

      • Partager sur Facebook
      • Partager sur Twitter
      fonfonsd
        11 juillet 2023 à 17:16:41

        merci de ta réponse, les tutos flexbox sont bien, faut que je m'y penche encore plus dessus.

        Cette après midi j'ai bossé sur ma page contact, mais j'arrive pas à faire 3 colonnes de même largeur et centrées

        voici où j'en suis pour l'instant

        <!DOCTYPE html>
<html lang="en-us">
  <head>
    
    <meta charset="utf-8">
    <link rel="stylesheet" href="style_flex.css">
    <meta name="viewport" content="width=device-width">

    
  <body>
    <header>

       
        <div class="logo">
            <img class="imgLogo" src="images/logo_slogan_pinceau_vernis_3.png" alt="logo Chantal Nails Beauty" id="logo">
            <P class="adresse"> 7 impasse des vergers 41500</P>
            <P class="adresse"> LA CHAPELLE ST MARTIN EN PLAINE </P>
        </div>

        <div class="es1">
  
            <!-- nouveau menu -->
            <nav>
 <ul id="menu-demo2">
    <li><a href="index.html">accueil</a></li>
    <li><a href="prestations.html">Prestations</a>
        <ul>
            <li><a href="#">Semi-Permanent</a></li>
            <li><a href="#">Nails ar</a></li>
            <li><a href="#">Beauté des pieds</a></li>
            <li><a href="#">Capsules</a></li>
        </ul>
    </li>
    <li><a href="#">contact</a></li>
</ul>
</nav>
</div>
<!-- END nouveau menu -->
  
            <div class="social">
            <a href="#"><i class="fa-brands fa-facebook fa-2x" style="color:rgb(43, 9, 236)"></i></a>
            <a href="#"><i class="fa-brands fa-whatsapp fa-2x" style="color: darkgreen;" ></i></a>
            <a href="#"><i class="fa-brands fa-instagram fa-2x"></i></a>
            </div>
 
 
</header>

<figure>
<img class="pap2" src="images/logo_chantal_papillon_seul.png" alt="papillon bleu seul">
</figure>

        
        <title>Chantal Nails Beauty</title>

      <h1> CONTACTEZ MOI </h1>


    </header>
    

    <section>
      <article>
        <h2>Téléphone</h2>

        <p> 06 31 87 31 17 </p>
      </article>

      <article>
        <h2>adresse</h2>

        <p> 7 impasse des vergers 41500 LA CHAPELLE ST MARTIN EN PLAINE</p>
      </article>

      <article>
        <h2>Nos réseaux sociaux</h2>

        <p>fa-facebook.</p>

      </article>
    </section>

    <div class="container">  
        <form id="contact" action="" method="post">
          <h3>formulaire de contact</h3>
          <h4>Réponse dans les 48 heures</h4>
          <fieldset>
            <input placeholder="Votre nom" type="text" tabindex="1" required autofocus>
          </fieldset>
          <fieldset>
            <input placeholder="Votre adresse mail" type="email" tabindex="2" required>
          </fieldset>
          <fieldset>
            <input placeholder="Votre numéro de Téléphone" type="tel" tabindex="3" required>
          </fieldset>
                    <fieldset>
            <textarea placeholder="Tvotre message" tabindex="5" required></textarea>
          </fieldset>
          <fieldset>
            <button name="Envois" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
          </fieldset>
        </form>
       
        
      </div>

  </body>
</html>

         et en css

        body{
    margin: 0;
    border: none;
    display: flex;
    flex-direction: column;
    background-color: rgba(235, 229, 209, 0.56);
}
  
header{
    width: 100%;
    height: auto;
    background-color: rgba(235, 229, 209, 0.56);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 250px;
    height: auto;
    margin-left: 10px;
    /*background-color: rgba(33, 163, 213, 0.72);*/
}

.social{
    margin-right: 10px;
}

.es1{
display: flex;
}
/* menue frog */
 
#menu-demo2, #menu-demo2 ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
    }
    #menu-demo2 li{
    display:inline-block;
    position:relative;
    border-radius:8px;
    }
    #menu-demo2 ul li{
    display:inherit;
    border-radius:0;
    }
    #menu-demo2 ul li:hover{
    border-radius:0;
    }
    #menu-demo2 ul li:last-child{
    border-radius:0 0 8px 8px;
    }
    #menu-demo2 ul{
    position:absolute;
    z-index: 1000;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
    }
    #menu-demo2 li:hover ul{
    max-height:15em;
    }
    /* background des liens menus */
    #menu-demo2 li:first-child{
    background-color: #65537A;
    background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
    background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
    }
    #menu-demo2 li:nth-child(2){
    background-color: #729EBF;
    background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
    background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
    }
    #menu-demo2 li:nth-child(3){
    background-color: #F6AD1A;
    background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
    background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
    }
    #menu-demo2 li:last-child{
    background-color: #CFFF6A;
    background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
    background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
    }
    /* background des liens sous menus */
    #menu-demo2 li:first-child li{
    background:#2A2333;
    }
    #menu-demo2 li:nth-child(2) li{
    background:#333A40;
    }
    #menu-demo2 li:nth-child(3) li{
    background:#9F391A;
    }
    #menu-demo2 li:last-child li{
    background:#677F35;
    }
    /* background des liens menus et sous menus au survol */
    #menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
    background:#65537A;
    }
    #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
    background:#729EBF;
    }
    #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
    background:#F6AD1A;
    }
    #menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
    background:#CFFF6A;
    }
    /* les a href */
    #menu-demo2 a{
    text-decoration:none;
    display:block;
    padding:8px 32px;
    color:#fff;
    font-family:arial;
    }
    #menu-demo2 ul a{
    padding:8px 0;
    }
    #menu-demo2 li:hover li a{
    color:#fff;
    text-transform:inherit;
    }
    #menu-demo2 li:hover a, #menu-demo2 li li:hover a{
    color:#000;
    }
     nav{
        margin-right: 10px;
     }
     .pap2 {
        width: 10%;
        margin: auto;
        display: block;
        background-color: #f3f0e5
            }
    .accroche {
        font-size: 4em;
        color: black;
        font-family: 'Mrs Saint Delafield', sans-serif;
        position:relative;
        top: 5px;
        text-align: center;
     }
     
     .presentation {
        font-size: 2em;
        color: #000;
        font-family: 'moderne', sans-serif;
        position:relative;
        top: 5px;
        text-align: center;
     }

     .Prestations2 {
        font-size: 3em;
        color: black;
        font-family: 'Mrs Saint Delafield', sans-serif;
        position:relative;
        top: 5px;
        text-align: center;
        background-color: antiquewhite;
     }

     .container{
        background-color: antiquewhite;
     }

     .permanent {
        width: 90px;
        height: auto;
     }

    .Capsules {
        width: 90px;
        height: auto;
     }

     .Pieds {
        width: auto;
        height: auto;
     }

     .vernis {
        width: auto;
        height: auto;
     }

     .logo2 {
        width: 10%;
        margin: auto;
        display: block;
     }

     .styled {
      border: 0;
      line-height: 2.5;
      padding: 0 20px;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      border-radius: 10px;
      background-color: rgba(220, 0, 0, 1);
      background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
      box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  }
  
  .styled:hover {
      background-color: rgba(255, 0, 0, 1);
  }
  
  .styled:active {
      box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  }
.plan {
   width: 80%;
   height: 80%;
        margin: auto;
        display: auto;
}  

section {
   display: flex;
 }





        -
        Edité par fonfonsd 11 juillet 2023 à 18:01:15

        • Partager sur Facebook
        • Partager sur Twitter
        gcyrillus
        • HTML / CSS
          11 juillet 2023 à 20:24:51

          Bonsoir,

          display:flex ne vient pas seul et plusieurs règle complémentaire vont servir  à déterminer comment la grille doit s'afficher et comment elle doit distribuer ses contenus .

          Si les définitions te semble écrites dans un langage incompréhensible, tu peux néanmoins tester leurs effets .

          par exemple :

          section {
  display: flex;
  justify-content:space-around;
  text-align:center
}

          modifierait le comportement par défaut.

          Tu peux aussi , styler à partir des enfants :

          section {
  display: flex;
  text-align: center;
}
section > * {
  flex-grow: 1;
  padding-inline: 2.5vw;/* ou ce que tu veut */
}
section > :nth-child(2) {
  border-inline: solid;
}

          ou par exemple aussi

          section {
  display: flex;
  justify-content:space-around;
  text-align: center;
}
section > * {
  flex-basis:30%;
  padding-inline: 2.5vw;
}
section > :nth-child(2) {
  border-inline: solid;
}

          Flex est plutôt puissant sans être aussi complexe qu'il n'y parait. MDN est pas mal pour voir les définitions avec des exemples  https://developer.mozilla.org/fr/docs/Web/CSS/flex N’hésites pas  a t'en servir en marges des tutoriels que tu utilises ;)

          Cdt



          • Partager sur Facebook
          • Partager sur Twitter

          fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

          fonfonsd
            12 juillet 2023 à 9:25:36

            bonjour

            merci le 3 ème exemple est top

            merci

            je vais étudier cela

            • Partager sur Facebook
            • Partager sur Twitter

            page contact

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown