Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club Avatar de animalx123
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    janvier 2015
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : janvier 2015
    Messages : 81
    Points : 49
    Points
    49

    Par défaut le float ne marche plut en presence de la position absolute et relative

    Bonjour
    depuis 3 jours je bloque et je ne trouve auqu'une solution a mon probleme qui est de deplacer mes 2 buttons(add et submit) a la fin de ma div et a droite,
    pour que chaque fois que je clique sur add ca cree un nouveau champ et les button desendent mais ya pas moyen, si je met les position relative a la div parent et absolute a la child ca se deplace vers le bas mas le float : right ne fonctione plut,je suis debutant en devloppment web et je fait le maximum Croyez moi !!
    bref voice mon
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     <div class="f" id="labrep">
     <label>écrire votre question:</label>
     <textarea class="form-control" id="area" ></textarea>
     <input type="text" class="form-control re" id="rep" placeholder="reponse 1">
     <div class="btn btn-success btn-xs bb " >Submit</div>
     <div onclick="AjRep()" class="btn btn-success btn-xs bb" id='badd'>Add</div>

    mon css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .bb{
     
    	margin-right : 5px;
    	margin-top : 5px;
    	margin-bottom : 5px;
    	position : absolute;
    	bottom : 0;
    	float : right;
     
    }
     
    #labrep{
    	position : relative;
    }

    et mon Js:
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var num =2;
     
    function AjRep  (){
    var ligne = "<input type='text' class='form-control re' placeholder='reponse"+ num +"'>";
     
    if(num > 5){
    	alert("pas plus de 5 reponses Merci Saha");
    }
    else {
     
    	document.getElementById('labrep').innerHTML += ligne;
     
        num++;
    }
     
    };

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 253
    Points : 4 355
    Points
    4 355

    Par défaut

    ton css est uncohérent

    si tu donnes à un élément une position absolue il ne peut pas avoir de marges, et il ne peut pas non plus être " flottant "

    https://developer.mozilla.org/fr/docs/Web/CSS/position
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 654
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 654
    Points : 29 690
    Points
    29 690

    Par défaut

    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .bb {
    	position : absolute; 
    	right : 5px; 
    	top : 5px; 
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre du Club Avatar de animalx123
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    janvier 2015
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : janvier 2015
    Messages : 81
    Points : 49
    Points
    49

    Par défaut

    j'ai bien lu la documentation en description et essayer de faire fonctioner mon code mais ca ne marche pas, moi je veux just que quand je clique sur add les 2 buttons de la class ".bb" soit en desous du nouvelle input qui se cree

  5. #5
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 253
    Points : 4 355
    Points
    4 355

    Par défaut

    Ça on a bien compris, mais ton code est un gros mélange de tout et rien tu y utilises d'autres classes css qui peuvent elles aussi interagir avec la disposition des éléments, ce code est visiblement parcellaire, il y a peut-être un héritage de style qu'on ne peut pas connaître ici, etc..
    On n'est pas des devins, et vu d'ici, ton problème n'a ni queue ni tête
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  6. #6
    Membre du Club Avatar de animalx123
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    janvier 2015
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : janvier 2015
    Messages : 81
    Points : 49
    Points
    49

    Par défaut

    le
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!DOCTYPE html>
    <html>
    <head>
     
    <meta charset="utf-8"/>
     
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="style2.css"/>
    <title>Poser la question</title>
     
     
    </head>
     
     
     
    <body>
     
    <div class="container cate f">
     
    <p>Selectionez une categorie</p>
    <div class="dropdown f" id="b">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>  
      <div class="dropdown-menu f"  aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
     
    </div>
     <div class="f" id="labrep">
     <label>écrire votre question:</label>
     <textarea class="form-control" id="area" ></textarea>
     <input type="text" class="form-control re" id="rep" placeholder="reponse 1">
     <div class="btn btn-success btn-xs bb " >Submit</div>
     <div onclick="AjRep()" class="btn btn-success btn-xs bb" id='badd'>Add</div>
     
     
     
     </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
    </body>
     
    </html>


    le
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    .catego{
    margin-top : 50px;
    text-align : left;
    min-width : auto;
    min-height:600px;
    height : auto;
    width : auto;
    border-radius: 10px;
    background-color : white;
    }
     
    .rep{
     
    	margin-bottom : 50px;
    	max-width:auto;
    	margin-left: auto;
        margin-right: auto;
    	padding-bottom : auto;
    }
     
    body{
    	background-color : #EDEDED;
    }
     
    .b{
    margin-top : 50px;
    padding-bottom: 50px;
    float : center;
     
    }
     
    #area{
     
    resize : both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom : 50px;
    padding-bottom: 50px;	
     min-height : 100;
     min-width : 250;
     max-width : 350;
     max-height : 200px;
    }
     
    .bb{
     
    	margin-right : 5px;
        margin-top : 5px; 
    	margin-bottom : 5px;
    	position: absolute;
    	bottom : 0;
    	float : right;
     
    }
     
    #labrep{
    	position : relative;
    }
    #badd{
     
    }



    le
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var num =2;
     
    function AjRep  (){
    var ligne = "<input type='text' class='form-control re' placeholder='reponse"+ num +"'>";
     
    if(num > 5){
    	alert("pas plus de 5 reponses Merci Saha");
    }
    else {
     
    	document.getElementById('labrep').innerHTML += ligne;
     
        num++;
    }
     
    };

  7. #7
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 253
    Points : 4 355
    Points
    4 355

    Par défaut

    Oki, on vois que tu utilises Bootstrap, (mince, quelle bétise de notre part de ne pas l'avoir deviné) mais sans vraiment en respecter les règles d'utilisation, alors forcément ça va être compliqué de vouloir à la fois utiliser Bootstrap et utiliser une mise en forme à une autre sauce personnelle.

    Pourtant, faire un formulaire avec Bootstrap, c'est grandement facilité par tous les exemples présents dans la doc => https://getbootstrap.com/docs/4.3/components/forms/
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  8. #8
    Membre du Club Avatar de animalx123
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    janvier 2015
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : janvier 2015
    Messages : 81
    Points : 49
    Points
    49

    Par défaut

    Oui,j'utilise les classes bootstrap pour le designe de mes elements et je fait quelques modification si besoin , mais je vois pas pourquoi le bootstrap a un lien dans le deplacement de mes 2 elements , j'ai essayer aussi avec le dom en js mais rien a faire

  9. #9
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 253
    Points : 4 355
    Points
    4 355

    Par défaut

    Non, Bootstrap c'est un tout; l'utiliser en picorant 2 trois trucs qu'on choisi dedans ça peut pas marcher.
    La feuille de style de Bootstrap attribue un style CSS à l'ensemble des éléments HTML.

    Quand on code une page HTML avec Bootstrap, on peut difficilement dévier du cadre de design prévu par Bootstrap, sinon on se retrouve avec des conflits comme ceux que tu rencontre, et ça peut être très compliqué à " redresser ".

    Pour ton problème, et comme je l'ai écrit plus haut Bootstrap permet tout de même pas mal de choses, et avoir des boutons à droite ou à gauche, en haut ou en bas est quelque chose de complètement prévu, pas besoin d'ajouter des commandes css pour ça, celles qui existent dans BS e font très bien en respectant l'ensemble des canons de design de ce framework

    https://www.google.com/search?q=tutoriel+bootstrap+4
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  10. #10
    Membre du Club Avatar de animalx123
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    janvier 2015
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Chercheur en informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : janvier 2015
    Messages : 81
    Points : 49
    Points
    49

    Par défaut

    je viens de resoudre enfin le probleme , le HIC etait les deux buttons qui soient dans la div "labrep" , je les aient sortie de la div en testant quelque chose comme par hasar ca marché ,merci de m'aider psychadelic

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Projet qui marche sous Eclipse ne marche plus en JAR
    Par leminipouce dans le forum Eclipse Java
    Réponses: 7
    Dernier message: 26/10/2005, 18h59
  2. [SEND TO]Menu contextuel "send to" ne marche plus
    Par Hoegaarden dans le forum Windows XP
    Réponses: 8
    Dernier message: 13/10/2005, 11h41
  3. [FOP] Le generation de PDF ne marche plus
    Par Sherkhan dans le forum Tomcat et TomEE
    Réponses: 4
    Dernier message: 23/03/2005, 08h26
  4. [CR] Mes rapports (.PDF) ne marche plus depuis acrobat 7
    Par theflamme dans le forum SAP Crystal Reports
    Réponses: 2
    Dernier message: 10/01/2005, 15h21
  5. ma fonction marche plus sur le serveur...
    Par CDRIK dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 18/10/2004, 04h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo