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.

[kokomaniak]

ok ça marche, j'utilise déjà firebug. Je tente de régler le problème ce soir et je ferai un retour soit ce soir soit demain pour dire si j'ai réussi à régler le problème et si oui comment !

En tout cas merci bien de ton aide, toujours un plaisir d’interagir avec la communauté de développez.net !

Edit : bon alors j'ai eu le temps de jeter un rapide coup d’œil hier et la balise <p> ne contient aucun style (quand je l'inspecte avec firebug). J'ai pas encore tenté d'y mettre un style, par manque de temps (et oui c'est loin d'être le seul problème que je rencontre ...). Je ne mets pas le sujet comme résolu pour l'instant, je repasserai par ici quand j'aurai eu le temps de me pencher un peu plus sur le problème.

[kokomaniak]

Alors le

Code :

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

1
2
 
padding-top:...;

ne fonctionne pas, par contre le

Code :

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

1
2
3
 
margin-top:0px;
margin-bottom:0px;

fonctionne parfaitement bien. Par défaut la balise p a donc un margin top et bottom fixé à 1em

Encore merci pour ton aide !

[EnergieZ]

Je vous conseille de mettre un css pour réinitialiser les CSS implémenter par default par les navigateurs. En plus de ca, certain navigateur n'ont pas les même valeur par default que les autres...

Donc, à titre personnel, je mets cela en début de css :

* {
margin: 0;
padding: 0;
font-size: 11px;
}

ect