Texte en surimpression

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
- - Dernière réponse : jordane45
Messages postés
25580
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2019
- 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
Afficher la suite 

Votre réponse

7 réponses

Messages postés
25580
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2019
311
0
Merci
Bonjour
quel le code html de ta div... et le css ?
Commenter la réponse de jordane45
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
0
Merci
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>
Commenter la réponse de titan3131
Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
38
0
Merci
bonjour


et quand tu parle de surimpression sa veut dire qu'il déborde ?
Commenter la réponse de @karamel
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
0
Merci
Bonjour
Non cela ne déborde pas du div, ce qui déborde s'écrit sur les premiers caractères.
Cordialement
Commenter la réponse de titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
0
Merci
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>
Commenter la réponse de titan3131
Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
38
0
Merci
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
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour
J'ai supprime tous les line-height
Merci
Commenter la réponse de @karamel
Messages postés
25580
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2019
311
0
Merci
@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
Commenter la réponse de jordane45