Sommaire en images

Un sommaire tout en images utilisant les CSS et les logos des articles

Présentation

Une image vaut parfois mieux qu’un long sommaire pour communiquer l’envie de découvrir un article.

Un sommaire en image permet également d’introduire un mode de navigation différent au sein du site et de découvrir des articles que l’on n’aurait pas parcouru autrement.

Le résultat est une page sur laquelle s’affiche les logos des différents articles. Au survol de chaque logo, la rubrique, le titre et le descriptif s’affichent à côté du logo.

Le tout est très simple à mettre en oeuvre et sans javascript.

Exemple

Le mieux est de commencer par un exemple. Je l’ai mis en oeuvre sur mon site : Chez Tom

La boucle

La boucle donnée en exemple prend tous les articles dans un ordre aléatoire. A l’intérieur de cette boucle on a un lien et à l’intérieur de ce lien deux blocs DIV ayant les classes “som_img”(bloc contenant le logo) et “som_txt”(bloc contenant la description de l’article).

<BOUCLE_articles_hasard(ARTICLES){par hasard}>
<a href="#URL_ARTICLE" class="img">
<div class="som_img">#LOGO_ARTICLE</div>
<div class="som_txt">
<h4>
<BOUCLE_rubriquedelarticle(RUBRIQUES){id_secteur}{racine}>#TITRE</BOUCLE_rubriquedelarticle>
</h4>
<p><b>["(#TITRE|supprimer_numero)"]</b></p>
<p><i>[(#DESCRIPTIF)]</i></p>
</div>
</a> 
</BOUCLE_articles_hasard>....

Les CSS

Le code CSS est lui même assez simple. On donne des dimensions identiques aux blocs som_txt et som_img. On indique que par défaut il faut afficher som_img et pas som_txt mais qu’au survol d’un lien contenant un bloc som_txt il faut afficher celui-ci.

.som_txt,.som_img{
 float: left;
 width: 150px;/* fonction de la taille des logos*/
 height: 100px;
}

.som_img{display: block;}

/* par defaut ne pas afficher le bolc som_txt*/
a div.som_txt{display: none;}

/* afficher som_txt au survol */
a:hover div.som_txt{display: block;}

updated on 4 July 2007

Discussion

2 discussions

  • 1

    Salut

    La chose qui me gène c’est qu’on peut pas mettre de div dans un a en xhtml, ceci étant dit il doit y avoir un moyen pour de faire autremant.

    • La chose qui me gène c’est qu’on peut pas mettre de div dans un a en xhtml, ceci étant dit il doit y avoir un moyen pour de faire autrement.

      oui, un span, un display: block; au bon endroit... si tu touches ta bille en xhtml tu peux t’autoriser les quelques minutes pour faire le code qui va bien et dans la foulée, la contrib’ ou la correction dans ce forum...

      Merci d’avance :-)

    Reply to this message

  • 2

    Bonjour

    Joli et pratique, bravo et merci

    je voudrais adapter votre contrib, aux rubriques et non aux articles puis qu’elles soient dans l’ordre, le code devient donc :

    <BOUCLE_rubriques_accueil(RUBRIQUES){par titre}>
    <a href="#URL_RUBRIQUE" class="img">
    <div class="som_img">#LOGO_RUBRIQUE</div>
    <div class="som_txt">
    <p><b>[(#TITRE|supprimer_numero)]</b></p>
    <p><i>[(#DESCRIPTIF|textebrut|entites_html)]</i></p>
    </div>
    </a> 
    </BOUCLE_rubriques_accueil>

    Au passage j’ai fait sauter une ligne car elle répétait le nom de la rubrique.

    Premier soucis, un logo et son texte sont depliés lors de l’ouverture de ma page sommaire, et ce n’est pas la premiere rubrique ?
    Deuxième , jai placé le tout dans un

    pour que cette contrib soit placé au dessus d’une image de fond qui elle est centré dans ma page, comment faire pour que le dépliment (au survol d’un logo se fasse sur la meme ligne et non sur la ligne du dessous ?
    • Vous auriez une page ou on peut voir ce que ca donne car à première vue je n’ai pas assez d’éléments.

    • C’est en local pour l’instant

      Qu’aimeriez vous avoir comme autres infos ?

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom