[RÉGLÉ] Separation entre chaque article

[Biboun]

Bonjour la communauté ! Avant de commencer, voici l'adresse de mon site web : www.esplweb.fr/eta101/

(A cause de mon niveau de merde) J'ai un problème. Sur ma page d'accueil, on voit un joli cadre jaune dans lequel il est inscrit "Test article 1" et "Test article 2". Ce qui n'est pas évident de voir au premier clic, c'est que ce sont deux articles distinct. Mon souhait, presque mon rêve depuis le temps que je recherche une solution, serai que mon joli cadre jaune fasse le contour de mon article 1, et qu'un second cadre jaune fasse le contour de mon article 2, le tout séparer par une marge de 15 px.

L'exemple de mon rêve : http://nsa37.casimages.com/img/2016/...2848936247.jpg

Sur l'exemple, on voit bien que les cadres sont séparer par une petite marge.

Je m'en remet a votre savoir !

[PhilJ]

Re : Separation entre chaque article

Essayez ceci :


1 – Modification :

#center > div.inner {

/* Supprimer les 3 déclarations de propriété suivantes :

background: #ebdc0c;
border: 3px solid #ffffff;
border-radius: 20px;

*/

margin: 0 10px; /* <= conserver */
padding: 5px; /* <= conserver ou non à votre gré */

}


2 – Ajout :

.items-leading,
.items-row {

background: #ebdc0c;
border: 3px solid #fff;
border-radius: 20px;
padding: 0 5px;

margin-bottom: 10px;

}

[Biboun]

Re : Separation entre chaque article

Merci pour votre réponse.

J'ai bien essayé d’intégrer ce code à mon template, j'ai bien trouver la ligne et tout. Mais quand je retelecharge mon template qui s'active automatiquement sur le site, cela ne résout pas le soucis. J'ai laissé la modification active sur mon site. J'ai peut-être fait une erreur, j'ai vraiment pas un grand niveau. La création de ce site web est un travail scolaire.

[PhilJ]

Re : Separation entre chaque article

[...] J'ai peut-être fait une erreur

Il semble que oui. Voici votre code dans le template.css :

#center > div.inner {
margin: 10px;
padding: 5px;

...où il manque l'accolade fermante. Corrigez ainsi :


#center > div.inner {

margin: 10px;
padding: 5px;

}

Ensuite, c'est le contraire, il y a 2 accolades fermantes :

.items-leading,
.items-row {
background: #ebdc0c;
border: 3px solid #fff;
border-radius: 20px;
padding: 0 5px;
margin-bottom: 10px;
}
}


Il n'en faut qu'une :

.items-leading,
.items-row {

background: #ebdc0c;
border: 3px solid #fff;
border-radius: 20px;
padding: 0 5px;
margin-bottom: 10px;

}

[Biboun]

Re : Separation entre chaque article

Super ! Juste ce que je voulais ! Çà marche du feu de Dieu !

Merci beaucoup pour votre disponibilité ! Sujet Résolu

*S'en va poursuivre la construction de son site web en sautillant de joie*

[PhilJ]

Re : Separation entre chaque article

Sujet Résolu

*S'en va poursuivre la construction de son site web en sautillant de joie*

Dans ce cas vous devriez passer votre fil de discussion en RÉGLÉ afin d'aider les autres utilisateurs du forum.


Bonne continuation,

[Biboun]

Re : Separation entre chaque article

Je reviens rapidement vers vous pour le soucis que j'avais eu hier sur la séparation entre mes articles. Tout me semblait bien fonctionner, puis je commence la rédaction de mes articles et je me rend compte qu'en cliquant sur les articles en eux-même (accessible via le bouton "Lire plus") je n'ai plus du tout de structure (plus de bordures, ni de background).

Du code que vous m'aviez donner, j'ai juste modifier la couleur du background et l’épaisseur de la bordure. J'ai normalement fait ça correctement, je ne pense pas que le soucis vienne de cette modification. Vous auriez une solution ?

[pmleconte]

Re : Separation entre chaque article

Bonjour,

C'est "normal". Vous passez d'une page "Blog Featured" qui utilise la classe "items.leading" à une page "Article" qui utilise la classe "item-page".

Essayez de mettre les mêmes modifications dans votre default.css en ligne 178 pour la classe item-page.

Pascal

[PhilJ]

Re : Separation entre chaque article

Bonjour,

[...] je commence la rédaction de mes articles et je me rend compte qu'en cliquant sur les articles en eux-même (accessible via le bouton "Lire plus") je n'ai plus du tout de structure (plus de bordures, ni de background).

C'est tout à fait normal, parce que votre page d'accueil affiche un blog d'articles alors qu'en cliquant sur 'Lire plus', vous accédez à un article unique. Les classes CSS sont bien sûr différentes dans les deux types de pages.

=> Si vous souhaitez le même formatage pour vos articles uniques et pour les articles de vos pages au format blog, il suffit d'ajouter la classe du container accueillant l'article lui-même, en l'occurrence .item-page, à la liste des classes devant être formatées selon vos vœux.

Donc, :

.items-leading,
.items-row,
.item-page {

background: #333333;
border: 1px solid #fff;
border-radius: 5px;
margin-bottom: 10px;

padding: 0 20px;

}



Cordialement,

[Biboun]

Re : Separation entre chaque article

Merci beaucoup pour votre aide.