Discussion :

[PseT34]

Salut,
J'affiche des articles sur une largeur de 1000px, chaque page commence par une image de 1000px, donc le DIV qui contient l'article a un padding Left et Right a 0.

Le Soucis est que pour le texte j'ai besoin d'un padding de 5 de chaque coté afin d'améliorer la lisibilité, comment faire?

Une solution serait de jouer sur <p></p> mais comment différencier si il s'agit d'une image ou d'un texte?

PS : Les articles sont rédiger en backoffice sous TinyMCE.

Merci pour votre aide.

[pop_up]

ajoute dans ta css

Code :

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

1
2
3
4
 
p {
padding: 0 5px 0 5px;
}

sinon si tes images sont aussi dans des <p> alors tu rajoutes en plus :

Code :

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

1
2
3
4
 
p img {
padding:0;
}

[PseT34]

et bien j'y ai cru mais non j'ai toujours les 5px sur les img, étrange.

[FraK]

Dans ton code HTML regarde si tu n'as pas un attribut valign ou autres sur ton image.

[pop_up]

Le mieux c'est que tu nous montres un bout de ton code (ou un lien vers le site) où l'on puisse constater le problème et te proposer une solution.

[PseT34]

http://www.dev3dvf.com/dossier-2-2-d...staphylas.html

Voici la page d'exemple concerné.

Merci pour votre aide.

[FraK]

Code :

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

1
2
3
4
5
6
 
<div class="entry"><p style="text-align: center;"><font color="#685936" face="Arial, Helvetica, sans-serif" size="3"><strong><img alt="" src="http://www.dev3dvf.com/DATA/PUBLICATION/image/publish/kungfupanda_itw/page3/titre1.jpg" height="782" width="1000"><br>
</strong></font></p>
<p>&nbsp;</p>
<p><font color="#685936" face="Arial, Helvetica, sans-serif" size="3"><strong>3DVF : Bonjour Olivier et merci à l'avance pour le temps          que tu nous accordes.<br>
Tout d'abord, peux tu te présenter aux lecteurs 3DVF ?</strong><br>

Pour moi y a beaucoup de balises inutiles ici

Code :

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

1
2
3
4
5
 
<div class="entry"><img alt="" src="http://www.dev3dvf.com/DATA/PUBLICATION/image/publish/kungfupanda_itw/page3/titre1.jpg" height="782" width="1000"><br>
<p>&nbsp;</p>
<p><font color="#685936" face="Arial, Helvetica, sans-serif" size="3"><strong>3DVF : Bonjour Olivier et merci à l'avance pour le temps          que tu nous accordes.<br>
Tout d'abord, peux tu te présenter aux lecteurs 3DVF ?</strong><br>

La tu allèges un peu le code déjà, après de là à dire que ca va résoudre le problème, je pense pas ...

Ton image se place dans le div #entry, pourrait tu nous mettre le code de ce div stp ?

[PseT34]

.entry a strong{
color: #242e32;
text-decoration: underline;
}
.entry a:hover strong{
color: #242e32;
text-decoration: underline overline;
}

[FraK]

Ca c'est pour les liens ...
Tu dois avoir un truc ressemblant à ça pour le conteneur : #entry{...}
non ?

[PseT34]

non rien.

[FraK]

Eh béh ...
Moi perso je sèche la ... je saurais pas te dire ...
Au pire compares avec une page quasi similaire du site, tu verras ptet ce qui cloche

[pop_up]

concernant le padding pour les paragraphes, le probleme c'est que meme tes images sont dans des balises <p> donc tu ne peux pas mettre de padding sur la balise <p> sinon tes images l'auront aussi car en ecrivant :

Code :

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

1
2
3
4
 
p img {
    padding:0;
}

Tout ce que ça fait c'est que ça met un padding de 0, mais a ton image et pas au paragraphe.

Une solution serait peut etre de mettre un padding à tout élément <span> contenu dans un <p> mais la aussi, tes images sont dans des spans aussi.

Le mieux serait peut etre de regarder ce que fait tinymce pour modifier le code qu'il te génère en fonction de ce que tu mets.

Mais la c'est plus complexe.

[PseT34]

J'ai ajouté cette ligne dans mon CSS :
.entry pre {padding:0px;}

Et j'applique le tag <pre> à mon image, et le tour est jouer.

Merci à vous deux pour les éclaircissement que vous m'avez apporté.