1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Coller deux div avec du css

Signaler
Messages postés
16
Date d'inscription
mardi 10 juillet 2018
Statut
Membre
Dernière intervention
1 janvier 2019
 -
Messages postés
32403
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 mai 2021
 -
Bonjour,
j'ai ecrit un code dans le quel je veux mettre deux boutons me pemettant d'acceder a d'autres pages web mais, j'obtient , pas un , mais deux div .
le but est d'avoir un seul div contenant les deux boutons "hypertexte" si je peux me permet de le dire comme ca. AIDEZ MOI svp.
j'envoi mes codes html et css:

(HTML) 
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="container2">
            <form id="contact" action=" cible.html" method="post">
               <h3> nom App</h3>
               <fieldset>
                     <button name="submit" type="submit" id="contact-submit">Je suis un Etablissement</button>
               </fieldset>
            </form>
            <form id="contact" action="cible.html method="post">
               <fieldset>
                     <button name="submit" type="submit" id="contact-submit">je suis un Parent / eleve</button>
               </fieldset>
            </form>
    </div>
        </body>



(CSS : style.css) 

* {
  margin:0;
  padding: -5;
  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 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
}

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

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

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

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

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

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 40px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

2 réponses

Réponse 1 / 2
Messages postés
32403
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 mai 2021
 347
Bonjour,

Sans oublier les quelques erreurs de syntaxe dans le code. Des quotes manquantes par exemples....

Mais.. si ton but est juste de faire des "boutons" (liens) vers d'autres pages... quel est l'interet d'avoir des FORM ?? (en plus tu as déjà une question identique sur le forum... faut éviter les doublons ! )

Bref
je te suggère plutôt de faire : 
<div class="container2">
<a href="cible.html" class="btn" id="">Je suis un Etablissement</a>
<a href="cible.html" class="btn" id="">je suis un Parent / eleve</a>
</div>


et en CSS 
 .container2{
  width: 400px;
  margin: 0 auto;
  position: relative;
  display:inline-block;
  padding:10px;
}

 .btn {
     border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
   
}

Réponse 2 / 2
Messages postés
14788
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
1 mai 2021
 155
Si tu veux dire "je voudrais mettre les 2 boutons côte à côte, mais il sont sur 2 lignes" , ce serait plus cohérent.
Ne pas oublier de faire attention aux termes utilisés.

Je commence déjà par une petite erreur de syntaxe, regardes la coloration syntaxique et corriges le " manquant.

Ensuite, chaque <form> fait un retour à la ligne, il faut donc agir sur la balise form et non sur la div.
Répondre Posez votre question