• L
  • M
  • M
  • J
  • V
  • S
  • D
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

Un fois le design terminé (Cf. Design d'île Avalon, 1ère partie), vient la dure tâche de la découpe. Plusieurs difficultés vont alors se présenter : Va t'on utiliser des DIV ou des TABLE ? Combien d'éléments et combien de couches allons-nous avoir ? Etc.

De part la conception même du design, on sait déjà que notre page va comporter :

  • 1 bordure d'entête,
  • 1 bannière de page,
  • 1 menu horizontal,
  • 1 menu vertical,
  • 1 corps de texte,
  • 1 zone pour le calendrier,
  • 1 pied de page.

De plus, on sait que l'ensemble du site, à l'exception de la bordure d'entête, va être centrer et mesurer 955 pixels de large. On doit donc prévoir un conteneur de site supplémentaire qui va englober la bannière de page, les menus et le corps du texte, peut-être aussi le pied de page mais là c'est moins sur.

DIV ou TABLE ?

C'est toujours un choix difficile, faut-il concevoir le site à l'aide de tableaux (TABLE) ou de DIV ? Quand on voit la répartition des différents éléments du site notre première idée serait d'opter pour les TABLE. Mais très vite on va voir que le DIV est plus approprié :

On va utiliser la propriété Background de nos objet pour intégrer les images du design. Or la propriété background des TABLE n'est pas reconnu par l'ensemble des navigateurs alors que celle des DIV ne pose aucun problème.

Ensuite, on a oublié un petit détail important, mais certains éléments vont empiéter sur d'autres. Or on peut superposer des DIV mais pas des TABLE et créer un effet d'empilement d'objets avec des TABLE s'avère un véritable casse-tête.

Et dernier point non négligeable, mais il faut penser au poids de notre page HTML. L'usage des TABLE alourdi grandement le poids d'une page comparé à l'usage des DIV. De base, l'usage des TABLE est, comme son nom le préconise, réservé à la conception de tableaux et non pas à une mise en page...

Le choix se portera donc sur une utilisation des DIV.

"Une TABLE pour les gouverner tous"

Le DIV est loin d'être parfait, au contraire, lui aussi a ces petits défauts et il en est un qui s'avère fort ennuyeux dans notre situation : Lorsqu'on place un DIV de taille variable dans un autre DIV, le changement de taille du DIV contenu n'entraîne pas nécessairement un changement de taille du DIV contenant. Résultat, on constate un empilement non volontaire de DIV suite à un changement de taille d'un ou plusieurs DIV. Hors dans notre cas, nous avons deux DIV de hauteur variable : Le menu vertical et le corps de texte, et lorsque ces derniers viennent à grandir il s'avère que l'information ne remonte pas au DIV conteneur et du coup ces deux DIV vont passer par dessus le pied de site.

Seul solution pour corriger ce bug : Faire appel à une TABLE qui va se charger de transmettre les variations de taille entre les DIV contenus et le DIV conteneur.

<div id="header">(...)</div>
<table id="container">
 <tr>
  <td>
   <div id="page">
    <div id="banner"></div>
    <div id="calendrier">(...)</div>
    <div id="menuvertical">(...)</div>
    <div id="menuhorizontal">(...)</div>
    <div id="zonedetexte">(...)</div>
   </div>
  </td>
 </tr>
</table>
<div id="footer">(...)</div>

Bien évidemment, la mise en place des DIV et leur dimensionnement ne va pas se faire tout seul, c'est donc par le biais d'une feuille de style (CSS) que l'on va procéder.

body {
   width: 100%;
   background: #808080 url('images/bg-body.jpg') top center no-repeat;
   margin: 0px;
   padding: 0px;
   text-align: center;
}

table#container {
   margin: 0px auto 0px auto;
   width: 955px;
   border-collapse: collapse;
   border: none;
}

table#container tr {
   width: 955px;
   margin: 0px;
   padding: 0px;
}

table#container td {
   width: 955px;
   margin: 0px;
   padding: 0px;
}

div#header {
   margin: 0px auto 0px auto;
   padding: 0px;
   width: 100%;
   height: 28px;
   background: #808080 url('images/bg-header.png') top left repeat-x;
}

div#page {
   margin: 0px auto auto auto;
   width: 955px;
   height: 100%;
   min-height: 300px;
   background: #ffffff url('images/bg-page.png') bottom left repeat-y;
}

div#banner {
   position: relative;
   margin: auto 0px auto auto;
   width: 955px;
   height: 300px;
   background: #808080 url('images/bg-banner.jpg') top left no-repeat;
}

div#zonedetexte {
   position: relative;
   float: right;
   margin: 0px 0px auto auto;
   width: 745px;
   min-height: 400px;
   background: transparent url('images/bg-zonedetexte.jpg') top right no-repeat;
}

div#footer {
   margin: 0px auto auto auto;
   position: relative;
   width: 955px;
   height: 28px;
   background: transparent url('images/bg-footer.png') top left no-repeat;
}

div#menuvertical {
   position: relative;
   float: left;
   margin: 150px auto auto -210px;
   width: 210px;
   min-height: 200px;
   background: transparent url('images/bg-menuvertical.jpg') top left no-repeat;
   text-align: left;
   overflow:visible;
}

div#menuhorizontal {
   position: relative;
   float: right;
   margin: -28px 0px auto auto;
   padding: 0px;
   width: 645px;
   height: 28px;
   background: transparent url('images/bg-menuhorizontal.jpg') bottom right no-repeat;
   z-index: 1;
}

Voila, vous savez (presque) tout sur la mise en page du site. Je n'ai pas parlé de la zone dédiée à l'image du jour car son usage n'est pas encore définitif, ni de l'élaboration des menus et du calendrier qui feront l'objet d'un autre article. Et puis si je vous dévoile tout, cela va vous gâcher le plaisir de fouiller un peu...

Revenir à la 1ère partie du Design d'île Avalon ou poursuivre avec la 3ème partie du Design d'île Avalon pour avoir un aperçu de quelques designs des rubriques du site ile-avalon.