Texte en surimpression

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- 24 mai 2016 à 16:52 - Dernière réponse :
Messages postés
23302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2018
- 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

8 réponses

Messages postés
23302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2018
24 mai 2016 à 19:21
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
Dernière intervention
8 juin 2016
Modifié par titan3131 le 24/05/2016 à 20:25
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
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
25 mai 2016 à 09:21
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
Dernière intervention
8 juin 2016
25 mai 2016 à 09:23
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
Dernière intervention
8 juin 2016
25 mai 2016 à 10:04
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
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
25 mai 2016 à 13:23
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
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- 25 mai 2016 à 14:43
Bonjour
J'ai supprime tous les line-height
Merci
Commenter la réponse de @karamel
Messages postés
23302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 novembre 2018
25 mai 2016 à 15:46
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

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.