Modifier la disposition des articles sur la home ?

LolYangccool · avril 2014

Bonjour,
J'aimerai, sur ma page d'accueil avoir la disposition suivant :
Disposition%20articles.png

J'utilise le thème duena, mon site est visible à l'adresse suivante : http://iblogitech.fr

Je ne sais pas s'il est possible de n'avoir cette disposition que sur la page 1 mais pas sur les suivantes.

Est-ce possible, si oui, comment faire ?
Merci.

Stéphane · avril 2014

Bonjour
Possible: oui.
La preuve sur le site de http://samare.net/
Si DanielSan veut bien partager la structure de sa home...

bazooka07 · avril 2014

Bonjour,
Je confirme le possible. En gros, ça donne ceci :

[== Indéfini ==]
<body>
  <div id="principal">
     <div id="haut">
        <div>
          article 1
        </div>
        <div>
          article 2
        </div>
     </div>
     <div id="bas">
        <div>
          article 4
        </div>
        <div>
          article 5
        </div>
        <div>
          article 6
        </div>
        <div>
          article 7
        </div>
        <div>
          article 8
        </div>
        <div>
          article 9
        </div>
     </div>
  </div>
  <div id="panneau-droit">
     blabla...
  </div>
  <hr />
</body>

Régles CSS
div {margin: 0;}
#principal {width: 70%; float: left;}
#panneau-droit {width: 29%; float: left;}
#bas div {width: 33%; float: left;}
hr {clear: both;}
/* pour control */
div {border: 1px solid black}

danielsan · avril 2014

Stéphane a écrit:

Bonjour
Possible: oui.
La preuve sur le site de http://samare.net/
Si DanielSan veut bien partager la structure de sa home...

l'article explicatif est ici : http://www.samare.net/article19/repartition-des-articles-en-3-6-12

ce n'est que du CSS

LolYangccool · avril 2014

Oula, pas facile tout ça !

Merci à vous.

danielsan · avril 2014

on a rien sans rien :P
les sélecteurs CSS, lorsqu'ils sont compris, rendent beaucoup de service

pour aider à la compréhension : http://www.marevueweb.com/css-html/liste-nth-child-propriete/ :P

j'utilise beaucoup les
div > p (tous les p directement enfant de div)
h3 + ul (les ul qui sont de suite après les h3 - cf sidebar)
etc ... ça allège le code des id et class à tout va

LolYangccool · avril 2014

Bonjour,
J'ai laissé tombé cette idée par manque de motivation du au manque de compétences...

Merci à vous.

Kyodev · avril 2014

si tu acceptes css3, tu rajoutes les règles à la fin (pour laisser les bourrins exploiter css1 ou 2), genre:

[== CSS ==]
div#primary article{box-sizing: border-box;}

div#primary  article:nth-child(-n+3){
  /* le stylage des 3 premiers articles, genre width 100% de primary, float */
}
div#primary  article:nth-child(n+4){
  /* le stylage des articles à partir du 4e, genre width 1/3 de primary , float */
}

liens intéressant:
les sélecteurs
MDN

edit: ajout lien d'information

Jerry Wham · avril 2014

C'est pas très gentil comme qualificatif d'autant que toutes les propriétés css3 ne sont pas forcément supportées (nth-child ne l'est que partiellement par ie 7 et 8 ). Tout dépend du public que tu cibles.

Modifier la disposition des articles sur la home ?

Réponses