[RESOLU] Faire une section "news"

Bonjour à tous,


(Je ne suis pas sûr de la section où poster le topic donc je le met ici)


Etant relativement nouveau et débutant en la matière, j'aurais besoin d'aide afin de savoir quelle technique utiliser pour réaliser la chose suivante :

Quelle structure / architecture / support (code, position des balise, php, base de donnée ?) utiliser pour créer un espace dans une page dédiée aux "news" (=mise à jour effectuées dans le site), sans forcément avoir recours à une multiplication des balises div et qui soit facilement modifiable ?



Je m'explique : c'est un site photo et sur la page d'accueil, j'aimerai créer une section news comme on voit dans de nombreux sites (exemples : http://www.clubic.com/ , http://www.macbidouille.com/ , ...).

La structure désirée est relativement basique : une icône, la date et le nom de la news. Avec uniquement affiché les 5 plus récentes (par date décroissante) sur la page d'accueil (et idéalement une page à part, qui elle, regroupe l'intégralité des news).

Etant donné la fonction principale du site (juste pour mes photos) les news seront peu fréquentes donc je ne recherche pas une structure très complexe et très poussée.


Vous trouverez ci-dessus, le code utilisé pour la section concernée (et que je sais pas bon mais qui donne une idée du design que je souhaite):

 <div id="conteneur_bas">
      <div id="news">
        <div id="news_titre">
          <div id="news_titre_titre">NEWS</div>
        </div>
        <div id="news_1">
          <div id="news_1_texte">12/03/2010 - Test dans la section news</div>
          <div id="incone_1"><img src="images/icone1.gif" width="40" height="40" alt="incone_photo" /></div>
         </div>
        <div id="news_2">Placez ici le contenu de  id &quot;news_2&quot;</div>
        <div id="news_3">Placez ici le contenu de  id &quot;news_3&quot;</div>
        <div id="news_4">Placez ici le contenu de  id &quot;news_4&quot;</div>
        <div id="news_5">Placez ici le contenu de  id "news_5"</div>
      </div>
      <div id="incrustation"></div>
    </div>

Ici, la page (descendre un peu pour arriver là où il y a le titre NEWS) : http://dro0one.free.fr/alsacration_aide/index.html

Et là, l'ensemble de mon dossier de travail : http://dro0one.free.fr/alsacration_aide/sitephoto_news.zip


En vous remerciant pour votre aide précieuse pour un débutant

Cordialement
Modifié par dark.tonin (17 Mar 2010 - 19:06)

Bonjour,

Premièrement : quelle est ta question exactement ?

Deuxièmement : une archive zip ce n'est vraiment pas pratique, une page en ligne avec la copie des code php ici serait plus simple à utiliser pour nous.

Merci d'avoir jeté un oeil à mon topic

Alors j'ai précisé la question dans mon premier post en espérant que c'est plus clair; si c'est pas le cas, je tenterais d'expliquer différemment

Pour ce qui est de la page en ligne, je suis en cours (je sais c'est pas très sérieux) et la connexion internet bloque le up, donc je ne pourrai le faire que dans 1h en rentrant chez moi

EDIT : c'est fait

Merci pour votre compréhension (c'est pas toujours évident de trouver les bons mots quand on à pas le vocabulaire adapté)
Modifié par dark.tonin (12 Mar 2010 - 17:28)

Ok, je vois un peu mieux ce que tu veux.

Alors, il y a deux solutions :
- statique : tu as ta page HTML et tu la mets à jour à la main et dans ce cas ton code peut très largement être simplifié :

 <div id="conteneur_bas">
      <div id="news">
        <hn>NEWS</hn> <!-- n correspondant au niveau de titre nécessaire, tout dépends de ta hiérarchie de titres -->
        <ul id="news_1">
          <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li> <!-- le alt est vide car l'icone n'apporte pas d'info juste de la déco -->
          <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
          <li><img src="images/icone2.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
          <li><img src="images/icone3.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
          <li><img src="images/icone4.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
          <li><img src="images/icone5.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
        </ul>
      </div>
    </div>

Tu peux, bien évidement rajouter des span sur les éléments du li pour les styler différement.

Si tu veux un système de news "automatisé", c'est-à-dire avec une base de données, alors, il te faudra une DB (normalement une table suffit) et du PHP pour générer le code du dessus.

Merci pour la réponse,

Je pense que je vais opter pour la solution simple à la main même si je sais qu'il faudra que je me mette un jour aux BD (chaque chose en son temps)

Je vais tenter de modifier le code et je vous dis si tout marche nickel

Je vais également tenter d'intégrer les spans, car pour le moment, je changais le font pour modifier la police

Cordialement
Modifié par dark.tonin (12 Mar 2010 - 17:32)

Bonjour très chère modératrice et bonjour à tous,

Bon finalement, l'utilisation d'une liste est vraiment celle la plus simple et la plus évidente (donc parfaite) ... je me demande pourquoi je n'y ai pas pensé ...

Donc un grand merci pour l'aide

Avant de fermer le topic, j'aurais juste une dernière question (avant la prochaine):

Comment fait on pour aligner verticalement l'image par rapport au texte (histoire que son centre soit positionné au niveau du texte) dans une liste?

Sous dreamweaver, je sais faire monter l'image mais pas la descendre (Espace V dans les propriétés de l'image qui accepte que les valeurs positives)

Vous trouverez ici ma page mise à jour : http://dro0one.free.fr/alsacration_aide/liste/accueil3.html

et là mon code :

<div id="news_texte">
          <h2><ul>
            <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section </li>
            <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
            <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
            <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
            <li><img src="images/icone1.gif" width="40" height="40" alt="" />12/03/2010 - Test dans la section news</li>
          </ul></h2>
        </div>

Merci encore pour tout

EDIT : j'ai trouvé le code, il s'agit de : style="vertical-align: middle"
Modifié par dark.tonin (17 Mar 2010 - 20:07)