Guide pratique et progressif du langage HTML

Démo Menu Table - explications

Inventaire

Pour fabriquer ce type de panneau, il est nécessaire d'avoir un certain nombre d'éléments graphiques (c'est le plus dur à faire) dont on connaît la taille au pixel près. Pour cet exemple, il faut:

Les onglets non sélectionnés et sélectionnés	Les bords gauche droite
Le bas
Une table et composants: <TABLE> <TR> <TD>

Et on mélange

Et il ne reste plus qu'à assembler tout ça comme ça:


	Cellule texte (et éventuellement images, links, etc...)

Comment ?

C'est à dire en fait, comme ça:

<TABLE ALIGN="CENTER" BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD COLSPAN="3">
      <A HREF="m1.html"><IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="menu1.s.gif" ALT="Menu 1"></A>
      <A HREF="m2.html"><IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="menu2.d.gif" ALT="Menu 2"></A>
      <A HREF="m3.html"><IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="menu3.d.gif" ALT="Menu 3"></A>
    </TD>
  </TR>
  <TR>
    <TD>
      <IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="pics/aide/gauche.gif">
    </TD>
    <TD WIDTH="430" HEIGHT="196" BGCOLOR="#C0C0C0" VALIGN="MIDDLE" ALIGN="CENTER">
      Texte/images/liens de la cellule principale
    </TD>
    <TD>
      <IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="pics/aide/droite.gif">
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="3">
      <IMG HSPACE="0" VSPACE="0" BORDER="0" SRC="pics/aide/bas.gif">
    </TD>
  </TR>
</TABLE>

Au secour !

Et voici les explications (j'ai entendu ouf ?):

On peut coller les 3 index (menu 1, 2 et 3) ensemble dans première ligne et dans la même case du tableau (en fait si je les sépare, j'obtient inexplicablement des petits espaces entre les images, ce que je ne souhaite bien évidemment pas).
Dans la seconde ligne on place le bord de gauche (sans blague), puis la cellule principale en réservant la largeur et la hauteur prévue et définie par les images (indispensable) et son contenu, puis le bord de droite (si).
Et enfin on colle le bas du panneau (à la bonne place).

Attention !

Si on colle trop de texte dans la cellule principale (de taille fixe), on risque des ennuis, car la taille du texte est variable (vous devriez être au courant depuis le temps que je le serine), et si le texte prend trop de place, l'assemblage "éclate" et devient moche à faire peur. Prévoyez donc de la marge pour ce cas-là.

C'est pas fini !

Trois index, impliquent trois pages différentes, et il n'y a pas que le contenu de la cellule centrale à changer, il faut aussi penser à changer les images des index, dans cet exemple c'est l'index "Menu 1" qui est sélectionné (SRC="menu1.s.gif") et les autres pas ("menu2.d.gif" et "menu3.d.gif"), j'espère que vous avez compris ce qu'il vous reste à faire...

Cadeau

...sinon regardez les pages sources menu1, menu2 et menu3.

Retour Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs:

depuis le 6 avril 2002