web-dev-qa-db-fra.com

Disposition HTML: ajout d'une colonne de barre latérale au site existant

J'ai un site avec un corps qui ressemble à ça:

<body>
  <div id="header">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

Aucune astuce de positionnement absolu/relatif n'est utilisée dans ces divs, mais il y a beaucoup de floats, clears, margins et paddings dans les styles de ces div et de leurs éléments internes. Tout cela donne un site qui ressemble à ça:

┌───────────────┐
│     header    │
└───────────────┘
┌───────────────┐
│    content    │
└───────────────┘
┌───────────────┐
│     footer    │
└───────────────┘

Ma question est: comment ajouter une colonne gauche (barre latérale) à largeur fixe indépendante avec du contenu supplémentaire qui contracterait le site entier (en-tête-contenu-pied de page) et les déplacer vers la droite.

┌────┐┌─────────┐
│side││ header  │
│bar │└─────────┘
│    │┌─────────┐
│    ││ content │
│    │└─────────┘
│    │┌─────────┐
│    ││ footer  │
└────┘└─────────┘

Je connais une solution presque idéale, mais elle est moche et nécessite de ré-imbriquer les divisions existantes:

<body>
  <table>
    <tr>
      <td id="sidebar">...</td>
      <td>
        <div id="header">...</div>
        <div id="content">...</div>
        <div id="footer">...</div>
      </td>
    </tr>
  </table>
</body>

Est-il possible de le faire avec élégance, en ajoutant simplement un élément de barre latérale externe quelque part dans le corps, c'est-à-dire comme ça?

<body>
  <div id="sidebar">...</div>
  <div id="header">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

J'ai essayé des approches naïves - telles que le style:

#sidebar { float: left; width: 20em; }

ou

#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }

Ce genre de travaux, mais ça casse dès clear: both ou clear: left est rencontré dans l'en-tête/le contenu/le pied de page.

Alors, existe-t-il des alternatives à la solution de table?

csscss-floathtmlhtml-table
14
GreyCat

J'aime utiliser une barre latérale absolument positionnée, puis définir le rembourrage sur l'enveloppe à la largeur de cet élément. Ensuite, je règle le remplissage de marge sur les autres éléments, ou je l'ajoute au remplissage du wrapper.

http://jsfiddle.net/jAVQv/

<div class="container">
    <div id="sidebar"></div>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

.container { position:relative; padding:0 0 0 55px; }
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
    margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
    margin:5px 0 0 0;
}
13
Gary Kenyon

J'utiliserais des éléments HTML5 pour donner un sens sémantique au balisage.

<body>
  <aside><!-- Nav bar --></aside>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
</body>

Puis style aside et article avec float: left.

6
James

J'ai fait un peu jsfiddle pour vous aider à démarrer. De plus, vous voudrez peut-être vérifier si votre contenu div ne gâche pas tout le CSS. J'espère que cela t'aides.

Modifier: toutes les couleurs et dimensions sont des mannequins utilisées pour l'exemple. Il devrait fonctionner avec n'importe quelle dimension.

html:

<body>
  <div id="sidebar">...</div>
  <div id="header">
      <div id="testLeft"></div>
      <div id="testRight"></div>
      <div class="clearFix"></div>
  </div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

css:

.clearFix {
    clear: both;
}

#sidebar {
    width: 50px;
    height: 30px;
    background-color: green;
    float: left;
}

#header {
    width: 250px;
    background-color: red;
    margin-left: 55px;
}

#testLeft {
    width: 50px;
    height: 50px;
    float: left;
    background-color: pink;
}

#testRight {
    width: 50px;
    height: 50px;
    margin-left: 55px;
    background-color: purple;
}

#content {
    width: 250px;
    height: 20px;
    background-color: blue;
    margin-left: 55px;
}

#footer {
    width: 250px;
    height: 20px;
    background-color: orange;
    margin-left: 55px;
}
2
Lapixel