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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 - 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 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
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 15112 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 13 avril 2024 159
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

Discussions similaires

la division en java
cs_aliomar -
KIRAIII -

3 réponses
CSS MAP et AREA
gabs77 -
gabs77 -

9 réponses
[Division] récupérer la partie entière d'une division avec un arrondi supérieur
Frouf85 -
Frouf85 -

8 réponses
Rogner une image
Galmiza -
Galmiza -

3 réponses
Problème avec la division des long
ammouna24 -
ammouna24 -

4 réponses
Rejoignez-nous