Sujet Précédent Sujet Suivant

Texte en surimpression

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 24 mai 2016 à 16:52
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 25 mai 2016 à 15:46

Bonjour,
J'ai créé en dynamique une div avec à l'intérieur de cette div un paragraphe
Lorsque je veux y mettre du texte celui-ci de met en surimpression dés que je dépasse la longueur de la div soit 135px
Je ne comprend pas pourquoi


document.getElementById('p1').innerHTML = "Dans l'attente de votre réponse"

Cordialement

A voir également:

Texte en surimpression
Souligner texte illustrator - Forum Graphisme/design
Html texte défilant en boucle - Forum Javascript / DHTML
Vba convertir nombre en texte - Forum Visual Basic
Conversion nombre en texte ✓ - Forum VBA Office (Excel, Word ...)
Texte défilant - Forum PHP

7 réponses

Réponse 1 / 7

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
24 mai 2016 à 19:21

Bonjour
quel le code html de ta div... et le css ?

Réponse 2 / 7

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
Modifié par titan3131 le 24/05/2016 à 20:25

Bonjour
et merci pour vos réponses


.divleft {
            display:inline-block;
            margin-left: 2px;
            margin-top: 5px;
            width: 155px;
            height: 698px;
            border:solid 2px black;
            
            border-radius:10px;
            background-color: deeppink;
         }
 .divobjectif {
             
            position: absolute;
            width: 145px;
            height: 550px;
            text-align: center;
            margin-top: 5px;
            border: solid 1px black;
            
            border-radius: 5px;
            border: 5px groove #38fff8;
            background-color: white;
           
            line-height: 10%;
        }
             .paragraphe {
            position: relative;
            width: 135px;
            height: 50px;
            text-align: center;
            margin-top: 5px;
            border: solid 1px black;
            border-radius: 5px;
            border: 5px groove #38fff8;
            background-color: white;
           line-height: 10%;
           
        }
// construction des objectifs
            var drag = document.createElement("div");
            drag.id = "divobjectif";
            drag.className = "divobjectif";
            document.querySelector(".divleft").appendChild(drag);
            for (var i = 1; i < 8; i++) {
                var drag = document.createElement("p");
                drag.id = "p" + i;
                drag.className = "paragraphe";
                document.querySelector(".divobjectif").appendChild(drag);
            }
            document.getElementById('p1').innerHTML = "Dans l'attente de votre réponse";

<div id='divleft' class='divleft'>
             </div>

Réponse 3 / 7

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
25 mai 2016 à 09:21

bonjour

et quand tu parle de surimpression sa veut dire qu'il déborde ?

Réponse 4 / 7

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
25 mai 2016 à 09:23

Bonjour
Non cela ne déborde pas du div, ce qui déborde s'écrit sur les premiers caractères.
Cordialement

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
25 mai 2016 à 10:04

voici le code en entier


<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Chifukoo</title>
    <link rel="stylesheet" href="style.css" />
    <style type="text/css">
        .container {
            margin-left: auto;
            margin-right: auto;
            width: 750px;
            height: 780px;
            border:solid 10px black;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
            position: relative;
        }
        .header {
            display:inline-block;
            margin-left: 2px;
            margin-top: 5px;
            width: 740px;
            height: 60px;
            border:solid 2px black;
           -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
           background-color: deeppink;
         }
        .sheader1 {
		    margin: 2px;
            display: inline-block;
            width: 270px;
            height: 44px;
            text-align: center;
            margin-left: 2px;
            border: solid 1px black;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            border: 5px groove #38fff8;
          
            position: absolute;
	     }

         .ssheader1 {
		
            display: inline-block;
            width: 50px;
            height: 34px;
            text-align: center;
            margin-left: 182px;
            
            font-family: EraserDust;
            font-size: 40px;
           
	    }
            
            
            .divleft {
            display:inline-block;
            margin-left: 2px;
            margin-top: 5px;
            width: 155px;
            height: 698px;
            border:solid 2px black;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
            background-color: deeppink;
         }
            
            
            
        .cadrescore {
         margin: 5px;
         display: inline-block;
         width: 140px;
         height: 110px;
         text-align: center;
         margin-left: 2px;
         border: solid 1px black;
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
         border-radius: 5px;
         border: 5px groove #38fff8;
     }
         
            .objectif {
		    margin: 5px;
            display: inline-block;
            width: 140px;
            height: 50px;
            text-align: center;
            margin-left: 8px;
            border: solid 1px black;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            border: 5px groove #38fff8;
            background: url(objectif.png);
	    }

            
            
             .divobjectif {
            position: absolute;
            width: 145px;
            height: 550px;
            text-align: center;
            margin-top: 5px;
            border: solid 1px black;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            border: 5px groove #38fff8;
            background-color: white;
           
            line-height: 10%;
        }
             .paragraphe {
            position: relative;
            width: 135px;
            height: 50px;
            text-align: center;
            margin-top: 5px;
            border: solid 1px black;
            border-radius: 5px;
            border: 5px groove #38fff8;
            background-color: white;
           line-height: 10%;
           
        }
             .paragraphehidden {
            visibility: hidden;
            position: relative;
            width: 135px;
            height: 50px;
            text-align: center;
            margin-top: 5px;
            border: solid 1px black;
            border-radius: 5px;
            border: 5px groove #38fff8;
            background-color: white;
           line-height: 10%;
           
        }

           
</style>
</head>
<body>
<script type="text/javascript">
//***************************************************************************************************************
    function chifukoo() {
        
        this.objectif = [];
        this.objectif[1] = "je vous prie de recevoir";
        this.objectif[2] = "Objectif2";
        this.objectif[3] = "Objectif3";
        this.objectif[4] = "Objectif4";
        this.objectif[5] = "Objectif5";
        this.objectif[6] = "Objectif6";
        this.objectif[7] = "";
        
        this.init();
    }
    //***************************************************************************************************************
  
//*********************************************************************************************************************************************************

    chifukoo.prototype.init = function () {


        //construction du left****************************************************************************************


        // construction des objectifs
        var drag = document.createElement("div");
        drag.id = "divobjectif";
        drag.className = "divobjectif";
        document.querySelector(".divleft").appendChild(drag);
        for (var i = 1; i < 8; i++) {
            var drag = document.createElement("p");
            drag.id = "p" + i;
            drag.className = "paragraphe";
            if (this.objectif[i] == "") { drag.className = "paragraphehidden"; }

            document.querySelector(".divobjectif").appendChild(drag);
            document.getElementById('p' + i).innerHTML = this.objectif[i];

        }
    }
//*********************************************************************************************************************************************************
    onload = function () { new chifukoo() }
// *****************************************************************************************************
  </script>
    <div id='cadre' class='container'>

            <div id='header' class='header'>
                <div id='sheader1' class='sheader1'>
                    <div id='ssheader1' class='ssheader1'></div>
                    </div>
                
               
            </div>
            <div id='divleft' class='divleft'>
                <div id='cadrescore' class='cadrescore'>
                     
                </div>
                 

             </div>
        <div id='plateau' class='plateau'>
            <div id='plateaucadre' class='plateaucadre'>
                 
                
            </div>
        </div>
        <div id='footer' class='footer'>

            <div id='footercadre' class='footercadre'>
                
            </div>
        </div>
    </div>
    
</body>
</html>

Réponse 6 / 7

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
25 mai 2016 à 13:23

dans la class paragraphe en mettant une valeur en px au ligne-height c'est bon

line-height: 20px;

ou alors supprime tous les line-height et utilise plutôt padding-top

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
25 mai 2016 à 14:43

Bonjour
J'ai supprime tous les line-height
Merci

Réponse 7 / 7

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
25 mai 2016 à 15:46

@titan
Pas besoin de nous "signaler" le sujet comme résolu... il te suffit de le mettre toi même en résolu.(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

Cordialement,
Jordane

Discussions similaires

coder un Tchat comme roulettechat.fr/chat/texte.php

Texte aléatoire

Text Aleatoire

texte qui defile en boucle sans espace entre le debut et la fin

Conversion d'un nombre entier en une chaine de caractère

Votre réponse

Discussions similaires