28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'espère ne pas m'être trompé de forum. Smiley lol
J'ai rentré une boucle php qui permet de mettre les nouveaux articles en premier sur ma page d'accueil. J'ai réduit le nombre d'articles à ma page d'accueil à 3. Sur ma page d'accueil on peut donc accéder au 3 articles les plus récents. (logique Smiley langue )
Voilà la boucle (image ci dessous) :
upload/1574342110-77627-capturedaeacran2019-11-21aa15.png
Seulement cette boucle m'affiche les 3 derniers articles l'un en dessous de l'autre, et j'aimerais pouvoir mettre 2 articles à gauche, 1 à droite, mais pour cela je dois avoir accès à chacun des trois articles, pour leur attribuer un css différent.
J'aimerais donc savoir quel code je peux rentrer qui me permettrait d'avoir accès à article(1), article(2), article(3)...

Merci d'avance !
Bonjour,

En wordpress, il y a moyen de récupérer plein d'informations des posts dont l'id.
Pourquoi ne pas mettre un clss dynamique sur chaque post en vous basant sur l'id ?
Ca donnerait par exemple :
<div class="article-1">...</div>
<div class="article-2">...</div>
<div class="article-3">...</div>

Avec ça vous pourrez mettre le css désiré
Bonjour Gus,
Merci pour Ta réponse, en effet cela pourrait marcher, le problème est que je devrais changer l'ID dans ma feuille de style à chaque nouvel article (car ils auront tous un ID différent)... J'aimerais trouver un code qui reconnaitrait le premier article (article1) et le dernier article (article3) sans toucher à l'ID propre de l'article, mais plutôt... à l'ID de ça place ? Smiley hum
Pour cela tu peux incrémenter une variable dans ta boucle


$i = 1;
while ()
{
  echo 'article-' . $i;
  // ....
  $i++; // Incrémente i de 1
}
Bonjour,
Tu peux utiliser :nth-child (voir la doc) avec quelque chose du genre:

.article article:nth-child(1) {
    /*CSS du 1er article; */
}
.article article:nth-child(2) {
    /*CSS du 2ème article; */
}
.article article:nth-child(3) {
    /*CSS du 3ème article; */
}

Et si tu veux juste rendre différent le premier ou le dernier, sur le même principe tu peux utiliser :first-child et :last-child

Attention: rien à voir mais évite les accents dans les noms de classe...
Modifié par Mathieu8337 (21 Nov 2019 - 15:47)