Astuces Blog

Un petit blog sans prétentions pour vous aider à créer le votre. Trucs et astuces, questions, aides et entraides…

10 août 2007

LA STRUCTURE DE LA PAGE D'ACCUEIL


La page d'écran est divisée en blocs délimités par les balises <div> et
</div>

Ce qui donne dans le code :

(Des remarques ont été ajoutées. Elles sont ignorées par le navigateur. Elles ne sont donc pas nécessaires mais vous aideront à comprendre le code).

<body>
  <!-- Début de définition de l'espace utilisé dans l'écran -->
  <div id="container">
    <!-- Début de définition de la zone du haut (zone titre) -->
    <div id="topbar">
          Contenu de la zone de titre
    </div>
    <!-- Fin de définition de la zone du haut (zone titre) -->

    <!-- Début de définition de la zone de gauche  -->
    <div id="leftbar">
           Code du contenu de la zone de gauche
    </div>
    <!-- Fin de définition de la zone de gauche  -->

    <!-- Début de définition de la zone centrale  -->
    <div id="content">
      <!-- Début de définition de la zone des articles -->
      <div class="blogbody">
           Code du contenu de la zone des article
      </div>
      <!-- Fin de définition de la zone des articles -->
    </div>
    <!-- Fin de définition de la zone centrale  -->

    <!-- Début de définition de la zone de droite  -->
    <div id="rightbar">
           Code du contenu de la zone de gauche
    </div>
    <!-- Fin de définition de la zone de droite  -->

    <!-- Met fin aux zones qui sont côte à côte  -->
    <div style="clear: both;height:0px;">&nbsp;</div>
  </div>
  <!-- Fin de définition de l'espace utilisé dans l'écran -->
</body>

Dans notre code, nous avons mis une commande par ligne et à chaque fois que l'on trouve une balise <div> la ligne suivante est décalée vers la droite. A l'inverse, à chaque  balise </div> le décalage est annulé. Cela permet de mieux voir les différents blocs. La lecture du code est ainsi simplifiée.

Posté par Naneu à 00:03 o Tout sur Canalblog Commentaires [2] - Permalien [#]

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * -

Commentaires

    ce site est formidablesensationnel !!! mais comment je peux mettre (dans le modèle avancé) un titre original avec une photo à la place du titre que j'ai tapé au départ ?

    Posté par abuelita, 24 novembre 2007 à 13:52
  • Merci

    Bonjour,

    merci pour le travail fourni qui aidera bon nombre de personne

    Bonne continuation

    Posté par Quick, 31 mars 2007 à 08:06

Poster un commentaire