Une image séparant deux balises en css

[Rico59]

Bonjour,

 

Je n'arrive pas à créer un élément qui devrait être tout simple.

 

Ma page web contient 4 balises div :

- un en-tête pleine largeur,

- le menu flottant à gauche,

- le contenu à sa droite sur le reste de la largeur

- un pied de page pleine largeur

 

Et je voudrais avoir une barre noir séparant mon menu du contenu.

Au début j'avais mis une petite image en fond à droite du menu avec répétition verticale. Problème : dès que la page est plus longue, la barre noire s'arrête en bas du menu.

A l'inverse, elle devient trop courte si c'est en fond de page principale que je l'incruste à gauche et que le contenu est moins long que le menu.

 

J'ai essayé de contourner en insérant un autre <div> entre le menu et la page, faisant 10 px de largeur, 100% de la hauteur et avec fond noir.

J'ai cru au début que ça marchait, mais le bloc semble s'arrêter en bas du menu. De plus mon pied de page vient se coller sous le menu au lieu de rester en bas de l'ensemble comme il le faisait auparavant.

 

Évidemment mon but est d'avoir cette barre noire qui s'adapte à toutes les configurations menu/page pour entièrement les séparer en hauteur, et que le pied de page reste en dessous.

 

Quelqu'un aurait-il une suggestion ?

[KewlCat]

A tout hasard : mets la "barre noire" en image de fond de page, et donne des fonds non transparents à ton entête et ton pied de page ?

[Dylav]

Bonsoir Rico59, bonsoir KewlCat,

 

“Le contenu à sa droite sur le reste de la largeur”, c'est un bloc <div> (ou ça peut le devenir, d'une manière ou d'une autre). Alors, il te suffit de lui affecter un border-left, qui suivra bien entendu automatiquement la hauteur exacte de ce bloc.

 

<style type="text/css">
#entete   {  ...  }
#menu	 {  ...  }
#piedpage {  ...  } 
#contenu  {
 border-left:2px solid black;
}
</style>

...

<div id="entete"> blabla entete </div>
<div id="menu"> blabla menu </div>
<div id="contenu"> blabla contenu </div>
<div id="piedpage"> blabla piedpage </div>

Tu peux également définir une mini-image noire de 2px de largeur et 2px de hauteur, qui te servira d'image de fond de ton bloc “contenu”, en la calant en haut à gauche avec répétition verticale.

 

<style type="text/css">
#contenu  {
 background: url(monImageNoire2x2.jpg) repeat-y top left;
}
</style>

Et puis je suis sûr qu'il existe encore d'autres solutions simples