1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
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
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 - 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
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
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
14927
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 162
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