Le petit théatre de votre blog

Comment améliorer votre CanalBlog

01 janvier 2005

Structure de la page d'accueil

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



Ce qui donne dans le code (Nous avons ajouté des remarques qui 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 Babouze à 12:30 - 1- Mode avancé - B.A. BA - Commentaires [4] - Permalien [#]

Commentaires

    bonjour, merci pour ce nouveau site d'aide à blog, il ne sera pas superflu! j'ai un problème sur mon blog: les colonnes ne sont pas alignées entre elles. Comment faire pour que les colonnes de droite et de gauche descendent jusqu'en bas comme celle du milieu? merci de votre aide.

    Posté par tica, 31 mai 2006 à 13:48
  • Bonjour. Effectivement très utile ce blog ! Je voudrais modifier la largeur de ma colonne de droite, mais quand je la modifie dans le rss, son contenu disparait ! Une idée de ce qui cloche ?

    Posté par Lagrandemarie, 04 juin 2006 à 23:27
  • (css pas rss) j'ai trouvé : il suffit de changer aussi la taille du tableau principal.

    Posté par Lagrandemarie, 05 juin 2006 à 00:44
  • Espacer les blocs

    Bonjour , j'aimerais espacer mes blocs pour qu'on voit davantages mon image de fond. Est ce possible?

    Merci de me répondre par mail ou par commentaire sur monblog

    merci!!

    Posté par DjOu, 06 juin 2007 à 14:23

Poster un commentaire