Modifier la disposition des articles sur la home ?

LolYangccoolLolYangccool Member
avril 2014 modifié dans Entraide
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. :)

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour
    Possible: oui.
    La preuve sur le site de http://samare.net/
    Si DanielSan veut bien partager la structure de sa home...

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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}

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • danielsandanielsan Member
    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 ;)
  • LolYangccoolLolYangccool Member
    Oula, pas facile tout ça ! :/

    Merci à vous. :)
  • danielsandanielsan Member
    avril 2014 modifié
    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
  • LolYangccoolLolYangccool Member
    Bonjour,
    J'ai laissé tombé cette idée par manque de motivation du au manque de compétences...

    Merci à vous.
  • KyodevKyodev Member
    avril 2014 modifié
    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 WhamJerry Wham Member
    avril 2014 modifié
    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.
Connectez-vous ou Inscrivez-vous pour répondre.