[Resolu] Pbm mise en page css sans tableau

Bonjour,

j'ai un probleme pour créer un tableau juste avec des 'div' et mis en forme avec du css :

J'ai trois images :

Image 1 :


Image 2 :


Image 3 :


Je souhaite creer un tableau où l'image 1 est en haut, l'image 2 en fond et l'image 3 en bas.

Voici la partie XHtml :

a écrit :

<div id="tableau">
<div id="image2">
<div id="image1"></div>
<div id="image3"></div>

<div id="contenu">Voici le contenu du tableau</div>
</div>
</div>

Le Css correspondant :

a écrit :

#image1 {
background:url(images/top1.jpg) top left no-repeat; height: 135px;
z-index:2;
}
#image2 {
background:url(images/mid1.jpg) top left repeat-y; height: 100%;
z-index:1;
}
#image3 {
background:url(images/bot1.jpg) bottom left no-repeat; height: 153px;
z-index:2;
}
#contenu {
float: top;
z-index:3;
}

J'obtient un tableau à peu de chose près correct cependant je n'arrive pas à placer le contenu textuel correctement pour qu'il soit au dessus des images et que la hauteur de mon tableau soit fonction de la hauteur du contenu...

Je pense que j'utilise mal 'z_index' et je ne vois pas comment faire.
Si quelqu'un a une iddée
Modifié par wawa (21 Jul 2006 - 08:40)

Quand tu parles d'un « tableau », il s'agit d'une boîte avec des bords en images, chose pour laquelle on utilisait traditionnellement un tableau de neuf cellules (dont une seule cellule de contenu) ? Parce que s'il s'agit d'un tableau de contenu, l'élément table reste bien entendu tout à fait adapté.

S'il s'agit de faire une boîte avec des bords en images, les choses sont assez simple si cette boîte a au moins une dimmension fixe (hauteur ou, plus probablement, largeur). Voici un petit tutoriel pour ce cas de figure :
Boîte avec bordures en HTML et CSS.

Si la boîte est fluide également en largeur, les choses se compliquent. Voici un petit exemple de ce qui peut être fait, et une version un peu différente par clb56.

pour realiser ce job besoin simplement de 2 ou 3 containers pas plus.
Le container principal sera celui qui contient l'image 3 a l'interieur tu places le div container de image 2 et qui sera celui qui affichera le contenu textuel et en dernier tu fermes par le div contenant image 1, tu peux en profiter pour utiliser un <hn> pour le positionner

Voila j'ai reussi ! Merci à tout les deux

Je poste ma solution si ça peut etre utile à qqln

a écrit :

<div id="image2"><!-- contient l'image du bas -->
<div id="image3">
<div id="image1">
contenu du tableau
</div>
</div>
</div>

Et :

#image1 {
background:url(images/top1.jpg) top left no-repeat;
}
#image2 {
background:url(images/mid1.jpg) top left repeat-y;
}
#image3 {
background:url(images/bot1.jpg) bottom left no-repeat;
}

Bonne journée !