[résolu] Un modèle de page de largeur fixe à 3 colonnes ?

Salut,
Ci-dessous une url d'un site.
http://www.oscommerce.com/osCommerce22ms2/
La presentation me plait mais je trouve que le code est archi lourd. J'aime bien cette notion de 3 colonnes.
Néanmoins, ces codes sont à base de <table> et me parraissent de surcroit assez lourds.
Quelqu'un peut-il me conseiller et eventuellement me recommander des exemples de sites où le codage est rationnel.
J'ai l'impression, surtout quand la fenetre est centrée comme sur le 2eme exemple et que l'on est obligé en css à travailler avec position:absolute pour les div, cela devient vite la galère et que les tableaux restent une bonne solution.
Merci
Modifié par alibaba (21 Mar 2005 - 07:44)

Tu souhaites un modèle de page de largeur fixe à 3 colonnes ?
A priori rien d'insurmontable

Un truc dans ce goût là :

<div id="conteneur">
  <h1 id="header">Titre</h1>
  <div id="menu1">
    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>

    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>
  </div>

  <div id="contenu">
    <h2>Ton contenu</h2>
    <p>bla bla</p>
  </div>

  <div id="menu2">
    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>

    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>
  </div>

  <p id="footer">ton pied de page</p>
</div>

* { margin: 0; padding: 0}

body
{
text-align: center;
}

div#conteneur
{
margin: 0 auto;
width: 770px;
text-align: left;
}

div#menu1
{
width: 180px;
float: left;
}

div#menu2
{
width: 180px;
float: right;
}

div#contenu
{
margin: 0 180px;
}

p#footer
{
clear: both;
}

C'est une base comme ça vite fait, à priori ça devrait le faire sans soucis

ps : je déplace dans le salon CSS, parcequ'on va vite arriver aux notions de mise en page.
Si tu hésites pour savoir où poster, préfère le salon général plutôt que le bar

Olivier a écrit :
A priori rien d'insurmontable

Je confirme

<div id="conteneur">
  <h1 id="header">Titre</h1>
  <div id="menu1">
    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>

    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>
  </div>

  <div id="menu2">
    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>

    <h2>rubrique</h2>
    <ul>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ul>
  </div>

  <div id="contenu">
    <h2>Ton contenu</h2>
    <p>bla bla</p>
  </div>
  
  <p id="footer">ton pied de page</p>
</div>

J'ai simplement inversé les div menu2 et contenu car sinon il y avait un décalage vertical sur la colonne la plus à droite (sous IE6)
Merci beaucoup

Tu as bien fait, c'est d'ailleurs mieux de regrouper les 2 menus

Un truc qui serait encore mieux, c'est de mettre div#contenu avant div#menu1 div#menu2 dans le code source HTML.

Je vais essayer, c'est une bonne idée sachant que d'un point de vue referencement, les informations pertinentes etant dans ma div#contenu, j'ai intérré à la placer le plus haut possible, au plus près de la balise <boby>
Merci, en tout cas, de l'interet que tu portes à mes problèmes.
En plus, je decouvre que l'on peu être prévenu par mail pour les topcs auquels on repnd et c'est super. Je vais donc essayer de plus participer au forum dans la limite de mes capacité qui sont très basses

Plus tu pars de bas, plus c'est facile d'evoluer
Nul doute que tu puisses apporter ta pierre à l'édifice. Mais ça n'a rien d'obligatoire

Etre poli, cordial, respectueux de ceux qui t'aident, c'est déjà très bien, et je t'en remerci.