5568 sujets

Sémantique web et HTML

Une mise en page en Tableau sans <table> quelle galère!

Bonjour à vous,
Je cherche désespérément une alternative plus « sémantique » à la réalisation de la mise en page en tableau ci-dessous:
<!DOCTYPE html>
<html style="height:100%;margin:0;">
 <head>
  <title>Page d'essai</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body style="height:100%;margin:0;">
  <table style="width:100%;height:100%;border-spacing:0;margin:0;">
   <tr>
    <td style="height:50px;background-color:#aaa;vertical-align:top;" colspan="2">Barre de titre (à remplacer par &lt;header&gt;)</td>
   </tr>
   <tr>
    <td style="height:20px;background-color:#ccc;vertical-align:top;" colspan="2">Barre de navigation (à remplacer par &lt;nav&gt;)</td>
   </tr>
   <tr>
    <td style="width:200px;background-color:#eee;vertical-align:top;">Colonne du menu (à remplacer par &lt;menu&gt;)</td>
    <td style="background-color:#fff;">
     <div style="height:100%;overflow:auto;">Mon article (à remplacer par &lt;article&gt;)</div>
    </td>
   </tr>
  </table>
 </body>
</html>


Le but recherché étant que la mise en page occupe toute la hauteur de la page et que seul le bloc de l'article soit muni d'un ascenseur lorsque le contenu dépasse la hauteur de ce bloc. J'ai bien tenté d'utiliser la propriété display avec ses valeurs table, table-row , table-cell mais rien à faire, je sèche.

Je m'en remets donc à plus compétent.
Par avance, merci pour votre attention.

PS: si vous avez de la documentation qui pourrait m'être utile sur ce sujet, je prends évidemment Smiley cligne
Modifié par Pascal.Linoc (02 Dec 2011 - 10:30)
Bonjour,

Reproduire cette structure en CSS 2.1 en gardant ses caractéristiques n'est pas possible. Par contre tu peux obtenir un effet visuel identique avec la technique des colonnes factices (un article sur le sujet et un exemple).

L'exemple de mise en page «CSS Frames» (Roger Johansson) est différent, il utilise le positionnement fixe et par conséquent certains éléments vont rester toujours visibles même en cas de défilement de la page. C'est un effet séduisant mais qui a des inconvénients (problèmes de contenus masqués, espace occupé en permanence par l'interface du site au détriment du contenu, pas compatible ou pas adapté sur certains mobiles...). À utiliser avec parcimonie (ou pas du tout).
Merci fvsch pour ton intervention. Je ne suis pas parvenu à un résultat satisfaisant avec les liens que tu m'as donnés ainsi que ceux de Mabelle. J'ai bidouillé un truc (vraiment odieux) qui représente au mieux ce que j'attends (testé avec chromium 14.0.835.202). Il y a certains détails que je ne pige pas avec la propriété display:table mais j'y travaille. Aussi, je pense qu'il est possible d'obtenir le même résultat en jouant avec la propriété position:absolute pour l'entête et le menu mais est-ce beaucoup plus propre?

<!DOCTYPE html>
<html style="height:100%;">
 <head>
  <title>Page d'essai</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body style="height:100%;margin:0;">
  <div style="display:table;height:100%;width:100%;">
   <div style="display:table-row;height:70px;">
   <!--Pourquoi la largeur n'est pas de 100% mais de 200px, du coup j'suis obligé de le mettre en position:absolute-->
    <div style="position:absolute;width:100%;">
     <div style="height:50px;background-color:#aaa;">Barre de titre (à remplacer par &lt;header&gt;)</div>
     <div style="height:20px;background-color:#ccc;">Barre de navigation (à remplacer par &lt;nav&gt;)</div>
    </div>
   </div>
   <div style="display:table-row;">
    <div style="display:table-cell;width:200px;background-color:#eee;">Colonne du menu (à remplacer par &lt;menu&gt;)</div>
    <div style="display:table-cell;background-color:#fff;">
     <div style="height:100%;overflow:auto;width:100%;">Mon article (à remplacer par &lt;article&gt;)</div>
    </div>
   </div>
  </div>
 </body>
</html>
Sujet clos
Aller à