Posez votre question Signaler

Coller deux div avec du css

Messages postés
16
Date d'inscription
mardi 10 juillet 2018
Dernière intervention
1 janvier 2019
 - - Dernière réponse : jordane45
Messages postés
24555
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 février 2019
 - 14 juil. 2018 à 13:55
Javascript / DHTML Posez votre question Signaler
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;
}
Afficher la suite 

Votre réponse

Répondre au sujet

2 réponses

Meilleure réponse
Signaler Commenter la réponse de jordane45
Messages postés
24555
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 février 2019
 362
1
Merci
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;
   
}

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CodeS-SourceS

Codes Sources 117 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Signaler Commenter la réponse de NHenry
Messages postés
14384
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 février 2019
 153
0
Merci
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.
Commenter la réponse de NHenry

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.