Texte en surimpression

Signaler
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Messages postés
29627
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 septembre 2020
-
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

7 réponses

Messages postés
29627
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 septembre 2020
337
Bonjour
quel le code html de ta div... et le css ?
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

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>
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
29 septembre 2020
103
bonjour


et quand tu parle de surimpression sa veut dire qu'il déborde ?
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

Bonjour
Non cela ne déborde pas du div, ce qui déborde s'écrit sur les premiers caractères.
Cordialement
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

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>
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
29 septembre 2020
103
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
Statut
Membre
Dernière intervention
8 juin 2016

Bonjour
J'ai supprime tous les line-height
Merci
Messages postés
29627
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 septembre 2020
337
@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