Discussion :

[kokomaniak]

Bonjour à toutes et à tous,

je viens vers vous en espérant que quelqu'un ait déjà rencontré le problème auquel je suis confronté, en effet il me parait échapper à toute logique. Je vous explique :

voici mon code :

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="conteneur">
   <div class="image">
        <img src="...">
   </div>
 
   <div class="texte">
       {{texte|raw}}
   </div>
</div>

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
15
16
17
18
19
20
 
.conteneur
{
   height:300px;
   width:100px;
}
 
.image
{
   display:block;
   height:150px;
   width:100px;
}
 
.texte
{
   display:block;
   height:150px;
   width:100px;
}

et en gros quand je mets le filtre raw, ça baisse ma div texte de à peu près 15px vers le bas ...

ce que je trouve quand même très bizarre.

Du coup pour l'instant la "bidouille" que j'ai trouvée c'est de rajouter un margin-top négatif, mais bon c'est vraiment pas élégant ... et puis si jamais le texte est vide et bah la div est surélevée de 15 px ...

Voilà n’hésitez pas à me demander des informations supplémentaires, et merci d'avance à ceux qui se pencheront sur mon problème.

Bonne journée à tous !

[pc.bertineau]

Bonjour,

Tu n'aurais pas de code HTML dans ta variable texte par hasard ?

[kokomaniak]

si, j'ai du code html, c'est du texte enrichi, c'est pour ça que j'utilise le filtre raw.

Sans le filtre raw j'ai [gras]texte[/gras], et avec j'ai texte.

Mais je ne vois pas en quoi cela modifie le positionnement de mon bloc texte. Il y a surement quelque chose qui m'échappe, peut être peux tu m'éclairer ?

[pc.bertineau]

Il faudrait que tu montres le contenu de ta variable pour s'en assurer, mais je m'attends à trouver des balises <p> par exemple, qui peuvent être margées par ton CSS ou même par défaut par le navigateur.

[kokomaniak]

Malheureusement, je suis au travail, et ceci est un projet perso, je n'ai pas les codes sous la main, par contre je peux te confirmer qu'il y a des balises <p>.

en gros le texte enrichi se présente de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<p>
   <gras>
       texte
   </gras>
</p>

Que me conseilles tu de faire :

Supprimer les balises <p> avec un peu de javascript?
Est ce que si je leur applique du css le comportement pas défaut sera ignoré?

[pc.bertineau]

Pour moi tu devrais plutôt appliquer du CSS sur ces balises <p>, un truc dans ce style () :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.texte p {
    padding-top: ??;
}

Utilise Firebug ou équivalent pour voir déjà le style appliqué par défaut sur les balises <p>, et tu sauras comment le "contrer" dans ces div.texte.