[Problème] Liste en blog , décalage horizontal

[krak69]

Bonjour,

j'ai un truc que me pose des soucis depuis quelques temps et dont je n'arrive pas a trouver une solution "prpre"

J'ai souvent des listes d'articles sous forme de blog d'une catégorie, et j'affiche les articles en pleine largeur avec souvent une image à gauche.

Jusque là c'est nickel, tout fonctionne.

Par contre j'ai souvent des décalage entre les articles , par exemple , le titre qui se décale vers la droite :
(voir la flêche ci-dessous )



Je "triche" en mettant des retours chariots sur l'article du dessus, mais c'est franchement pas élégant ...
J'ai testé avec les différentes options du menu ( 1 colonne / 0 colonne / succession par ligne / ...) sans résultat

une idée pour forcer le retour à la ligne d'un article et éviter ces décalages ?

je précise que je suis sous Protostar

Merci par avance

[dolmenhir]

C'est un principe de mise en forme, qui s'explique simplement via du html et du css
En fait, tu as peut-être ici deux blocs qui occupent chacun une colonne.
Le premier ne contient que l'image, le second le texte avec le lien.
Comme ces blocs s'alignent l'un par rapport à l'autre, le lien reste sous le texte et ne revient pas sous le bloc image.
En code simple cela pourrait être, par exemple pour chaque ligne :

<div stle="border-top:1px solid #ccc">
<div style="display:inline-block">image</div>
<div style="display:inline-block">texte + lien</div>
</div>

ou alors tu as un truc comme ça :

<div stle="border-top:1px solid #ccc">
<div style="float:left;margin-bottom:30px">image</div>
<p>texte + lien</p>
</div>

ce dernier exemple c'est à peu près ce qu'on a avec le template par défaut protostar. Ici l'attribut css "float" du div qui contient l'image positionne le bloc à gauche du paragraphe texte, et s'accompagne d'un "margin" dont la hauteur obligera un certain nombre de lignes à se décaler à droite.
Réduire la taille de cette margin inférieure permettra au texte de revenir sous l'image.

Mais il faut identifier le template, car certains définissent leur propres règles pour la mise en forme des pages, sauf s'ils reprennent les mêmes règles que le template protostar.

Dol.

[krak69]

merci pour ta réponse ...

J'ai fait une surcharge de l'affichage en blog des catégories et "entouré" l'item (qui affiche l'image et le texte) d'un div que j'ai mis avec un

.GO_Blog{
  display: block;
  clear: both;
  } 

ça a l'air de fonctionner : c'est pas trop bidouille ?

[dolmenhir]

Donc tu as ajouté un div parent.
Je ne vois pas en quoi ça peut résoudre ton problème.
Après je ne vois qu'une infime parti du code, donc je ne sais pas quelles sont les interactions entres les éléments et les classes.

A savoir que

display:block
+
clear:both

est en soit redondant, puisque display:block induit un "line-break" (saut de ligne) qui oblige normalement tous les autres éléments à passer à la ligne suivante, sauf des éléments avec un attribut "float"

Ce qui signifie que dans ton cas, ce qui forcerait le retour à la ligne c'est le clear:both

mais encore une fois, je ne vois rien du code en action, donc je peux pas te dire si c'est pertinent ou pas.

[krak69]

Effectivement seul le clear:both ; suffit ... merci !

pour lde code c'est du protostar de base :

dans blog.php ( surcharge de Content / category)


Lors de l'affichage d'un item : ligne 78 - 90

<?php foreach ($this->lead_items as &$item) : ?>

<div class="GO_Blog">

<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">                    

 <?php
            $this->item = &$item; echo $this->loadTemplate('item');  ?>
</div>                  

<?php
       $leadingcount++;
?>              

</div>            
 <?php endforeach; ?>          
</div><!-- end items-leading -->

J'ai ajouté la div "<divclass="GO_Blog">"

Lié au CSS

[COLOR=#d7ba7d].GO_Blog[/COLOR][COLOR=#d4d4d4]{[/COLOR]
[COLOR=#9cdcfe]clear[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#ce9178]both[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]}[/COLOR]

[dolmenhir]

Bon, j'avais mal lu ton schéma initial (ben quoi ? c'est dimanche aussi... )

En fait, ton problème c'est que le titre de l'article suivant est chassé à droite à cause de l'image de l'article précédent (sans doute un peu haute ce qui implique que son margin-bottom "rayonne" trop près du titre et l'oblige à s'écarter.

Pour résoudre ton problème, pas besoin d'une surcouche.
Un simple attribut "clear:left" à la classe .page-header fera l'affaire.

.page-header {
    clear: left;
}

Pour faire ça proprement, tu ajoutes une feuille de style que tu nommes "custom.css" dans le dossier css du template Protostar, et tu y écris la classe que je t'ai indiquée.
Et bien sur, tu supprimes ta surcouche sinon ça marchera pas.

En fait, avant de faire des surcouches, il est préférable de voir si des méthodes plus simples fonctionnent.

[krak69]

je viens de tester , ( sans la "surcouche") , mais cela ne fonctionne pas ... j'ai toujours le décalage ...

J'ai même créé dans le doute le fichier "custom.css" , même si j'ai déjà un fichier "user.css" ... c'est pas la même chose ?

[dolmenhir]

J'ai testé cela avec le template Protostar et ça marche.
Tu as peut-être un autre template, ou alors des modifications faites ailleurs qui interfèrent.
Si tu donnais un lien qui permette d'aller voir exactement ce qui se passe, on pourrait sans doute te donner la solution.
Mais diagnostiquer à l'aveugle a ses limites.

[lefabdu51]

salut,

J'ai même créé dans le doute le fichier "custom.css" , même si j'ai déjà un fichier "user.css" ... c'est pas la même chose ?

Si c est la même chose... recopies ton fichier custom.css dans user.css et cela marchera direct