Problème de CSS

santini · août 2020

Bonsoir à toutes et a à tous,
Je ne parvient pas a comprendre mon problème:

Je souhaite avoir des cadre comme sur l'exemple ci-dessous (voir photos):
https://www.casimages.com/i/200810124327707196.png.html

Sur mon site en page d'accueil j'affiche les articles sous forme de cadre, sous la date de publication de ces derniers j'aimerais afficher "la categorie" "nom d'utilisateur" "nombre de com" dans le meme esprit que la photo ci-dessus.
Jusque là pas trop de probleme, en revanche l'affichage ne correspond pas a ce que j'aimerais (comme sur la photo.)

Je ne parviens pas a prendre toute la largeur du cadre pour afficher ces 3 informations, j'ai du utiliser du margin "left" et "right" sur chaque div pour que sa prenne de la place...

Sur la photo ont voie un trait gris symétrique, je trouve que sa fait jolie et je n'arrive pas a reproduire la même chose, afin que tout soit jolie a regarder.
(J'ai vulgairement intégrer une DIV avec un "Border Top" pour avoir un trait qui ne prend même pas toute la largeur .)
Autre problème, j'aimerais réduire l'espace entre le titre et l'image d'accroche ?.

Voici ci-dessous la partie de mon css réserver au cadre en page d'accueil, si vous avais une idée du problème vous me sauver merci.

/* ---------- VIGNETTE ---------- */
.vignette img {
width: 100%;
height: 125px;
}

/* ---------- Home avec 2 colonnes ---------- */
.home2col {
float: left;
overflow: hidden;
width: 30%;
height: 280px;
margin: 10px;
padding: 0px;
background-color: #FFF;
border: solid 0px #FFF;
}

/* Logo custom lire la suite */
.more a {
background:url(../img/more.png) no-repeat;
display: block;
height: 32px;
width: 32px;
text-indent: -999px;
}

/* ---------- AUTEUR INFOS EN FIN ARTICLE ---------- */
.author-infos {
padding: 10px;
font-size: 12px;
background-color: #f9f9f9;
border: 2px solid #ccc;
}
.author-infos img {
border: 1px solid #dedede;
padding: 3px;
margin-right: 10px;
}

.author-infos span {
font-size: 16px;
font-weight: bold;
}

/* ---------- INFOS CADRE HOME ---------- */
.art-datehome {
position: absolute;
bottom: 2.5rem;
font-size: 13px;
font-weight: bold;
}

.traitlargeur {
border-top: 3px solid #efefef;
width: 100%
}

.homeinfosbas {
position: absolute;
bottom:0;
}

.classified-inhome {
font-size: 14px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}

.written-byhome {
border-left: 3px solid #efefef;
border-right: 3px solid #efefef;
font-size: 14px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}

.art-nb-comhome {
font-size: 14px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}

kowalsky · août 2020

Bonjour Santini,

Puisque tu utilises PluCSS, je t'invite à relire la documentation "Grille - Imbriquer des colonnes" https://plucss.pluxml.org/#grid qui devrait t'aider à réaliser ta présentation en 3 colonnes.

<div class="col sml-12">
    <div class="grid">
        <div class="col sml-4">
        </div>
        <div class="col sml-4">
        </div>
        <div class="col sml-4">
        </div>
    </div>
</div>

(pour information et t'éviter d'y passer du temps pour rien, il y aura un très petit décalage d'alignement latéral due à une margin latérale qui s'applique à chaque "grid", c'est codé comme ça dans PluCSS)

Tu appliqueras les mêmes grid imbriquées pour réaliser les 3 cases de la fin de chaque article.
Ton trait horizontal ne prend pas toute la largeur car il est contenu dans le header, qui a des margin latérales de 10px
A noter qu'il il serait plus simple à faire apparaître en configurant une bordure d'épaisseur 1px et de même couleur que ton fond à tes div
Le bas de tes articles est tronqué car tu as donné une hauteur fixe à "home2col"
L'espace entre la vignette et le titre vient du margin-top de 3rm de "h2", tu peux corriger cela en rajoutant une margin-top inférieure à theme.css ligne 198:
.article header h2, .article header h2 a {
margin-top: 2px;
}

santini · août 2020

kowalsky merci beaucoup de ton aide, j'ai reussie a faire ce que je voulais a peut prêt.
Je vais encore t’embêter

Je doit faire comment pour que le bas prenne toute la largeur ? (rubrique, utilisateur, nombre de com)
Et pour faire un trait verticale Gris entre (rubrique & utilisateur) et entre (utilisateur & nombre de com) ?
J'ai essayer d'insérer un div mais le trait fait uniquement la taille du texte et je voudrais que ce soit comme sur la photo
Merci de ta patience

Problème de CSS

Réponses