Prob d'affichage des articles avec img : débordements/chevauchemt sur autres articles

[sodo7363]

Bonjour à tous,

J'ai un soucis d'affichage des articles en mode blog :

J'ai par exemple (dans ce cas la) une image en portrait, disposée à gauche avec le texte à droite.
L'image est plus haute que le texte, et lorsque j'ai un autre article publié (mode blog), celle ci chevauche l'article (comme on peut le voir sur cette page : http://www.fka-marseille.com/index.php/le-blog
Or j'utilise ce meme article sur cette page dans un autre "blog" http://www.fka-marseille.com/index.php/

J'ai été obligé de tout passer en 1 seule colonne car tout buggait...


Est il possible de remédier à ce problème ?

1. Faire en sorte que la zone de l'article comprenne l'image (l'image délimiterait en gros la zone et ne pourrait en sortir)
2. Réduire les images lorsque on est en mode colonne ou lorsque la page est plus étroite

J'ai pas trop d'idées...


Merci d'avance

Cédric

[PATSXM971]

Re : Prob d'affichage des articles avec img : débordements/chevauchemt sur autres art

sujet déplacé : Joomla! 1.7 Questions Générales ---> Gestion des Templates, Design et CSS

[bagou01]

Re : Prob d'affichage des articles avec img : débordements/chevauchemt sur autres art

une idée serait de modifier ton css pour que les articles soient plus séparés l'un de l'autre. (exemple: rajoute dans ton template.css à la ligne 2166 un margin-top:40px et modifie le margin-bottom:40px aussi... mais c'est de la bidouille)

ou alors de diminuer tes photos (tu peux le faire directement à l'insertion, tapper les dimensions de cette derniere, pas besoin de le faire avant d'uploader, si tu utilise JCEeditor)

sinon une idée encore est de mettre cette photo plus petite et si tu veux la voir plus grande, la rendre clickable en popup avec mediabox...)

mais faire en sorte que joomla réduise tout seul la taille, je ne connais pas de solution...

[sodo7363]

Re : Prob d'affichage des articles avec img : débordements/chevauchemt sur autres art

une idée serait de modifier ton css pour que les articles soient plus séparés l'un de l'autre. (exemple: rajoute dans ton template.css à la ligne 2166 un margin-top:40px et modifie le margin-bottom:40px aussi... mais c'est de la bidouille)

ou alors de diminuer tes photos (tu peux le faire directement à l'insertion, tapper les dimensions de cette derniere, pas besoin de le faire avant d'uploader, si tu utilise JCEeditor)

sinon une idée encore est de mettre cette photo plus petite et si tu veux la voir plus grande, la rendre clickable en popup avec mediabox...)

mais faire en sorte que joomla réduise tout seul la taille, je ne connais pas de solution...

Merci pour l'astuce lightbox avec mediabox, je vais tester.

J'ai trouvé une solution (qui ne me plait pas du tout mais qui marche pour l'instant) : J'ai fait un tableau sans bordure 1x1, j'ai coupé collé tout le contenu dedans, et là l'article se termine à la fin du tableau, l'image étant à l'intérieur ca marche.

Est ce que vous verriez une solution afin que le bloc correspondant à l'article se termine à la fin de tout (image, texte, tableau, vidéo, ....) et non à la fin du texte seulement...


Si vous souhaitez je peux faire des imprim écran vu que je modifie le site tt le temps.


Merci

[bagou01]

Re : Prob d'affichage des articles avec img : débordements/chevauchemt sur autres art

je ne saisis pas trop...

[sodo7363]

Re : Prob d'affichage des articles avec img : débordements/chevauchemt sur autres art

En fait le soucis (je viens de m'en rendre compte) est le suivant :

Les articles (avec mon template) ne sont pas séparés, et ca porte à confusion.

J'ai voulu mettre un espace (margin-bottom) ou un trait (border bottom) à la fin de l'article.

On voit que le trait passe sous l'image...


Regardez ce que j'ai modifié dans le template.css de mon template :
(j'avais lu ca sur un forum)


/* ----- SECTION / CATEGORY BLOG LAYOUT ----- */
/* SEPARATOR BETWEEN ARTICLES */

span.article_separator {
/*display: block;
height: 0.5em;*/
display: block;
border-bottom: 2px solid #e2e2e2;
margin-bottom: 10px
}


voila

Si vs pouvez m'aider c'est coooool !