Sujet Précédent Sujet Suivant

Coller deux div avec du css

leon237 Messages postés 16 Date d'inscription mardi 10 juillet 2018 Statut Membre Dernière intervention 1 janvier 2019 - 14 juil. 2018 à 11:54
jordane45 Messages postés 37537 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 juin 2023 - 14 juil. 2018 à 13:55
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
jordane45 Messages postés 37537 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 juin 2023 341
14 juil. 2018 à 13:55
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;
   
}

1
Réponse 2 / 2
NHenry Messages postés 15069 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 29 mai 2023 158
14 juil. 2018 à 12:03
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.
0
Rejoignez-nous