Css et mise en page complexe (bis)

Bonjour,

Je travaille actuellement sur une mise en page plutôt complexe (enfin, pour moi). J'ai déjà réussi à mettre en place la structure principale grâce à quelques membres de ce forum (merci ^_^)

J'attaque une partie plutot difficile, la mise en forme du bloc contenu.
C'est ce bloc qui contiendra le texte, les images...etc
Je joins un petit shéma explicatif.
Avez vous une idée pour que je puisse réaliser cela ?
A priori je dois gérer des parties étirables en image(haut+ bas et droite+gauche) ainsi que des parties fixes : l'etoile en haut à gauche et les 3 autres coins (le bloc jaune en bas est plus du contenu, n'en tenez pas compte)
Puis la partie bleue avec les étoiles qui doit être un background.

J'ai déjà fait plusieurs tentatives infructueuses et je commence à me demander si finalement c possible...

Hmm...

Alors alors, comment allons nous nous y prendre cette fois ci

Tu as un titre dans cette boite ? (un titre de niveau <hN> en haut de la boite)

Disons que tu en as un, sinon on fera autrement.

<div id="contenu">
<div class="boite">
<h2>Ton titre de contenu</h2> <!-- je met <h2>, c'est classiquement à ce niveau qu'on arrive pour un titre de contenu, à toi d'adapter à la valeur qu'il faut -->
<p>Ton contenu bla bla</p>
<p>Ton contenu bla bla</p>
</div>
<div class="infos">
<p>Des infos bla bla</p>
</div>
</div>

Ca c'est pour la structure HTML

Ensuite pour la partie CSS

div#contenu
{
width: XX%;
background: url(imagemillieu.png) repeat-y;
/* ici, une image (large, disons 1000px pour être sûr, et haut d'environ 30px), c'est la partie blanche contenant l'ombre de gauche */
}

div.boite
{
margin: 5px;
background: url(imageetoiles.png) repeat;
/* une image disons de 30x30px (régler pour que la répétition des étoiles tombe juste) */
}

div.boite h2
{
position: relative;
left: -25px;
top: -25px;
height: 50px;
line-height: 50px;
background: url(partietoileEthautdeboite.png) no-repeat;
/*là tu fais ton image avec l'etoile et le haut de la boite, idem suffisament large (1000px)*/
}

div.boite p
{
/* tes styles pour les textes */
}

div.info
{
 background: url(tonfondjaune.png);
/* encore une fois, un fond suffisament large et qui contient les etoiles jaune les coins de gauche et la partie basse de la boite blanche*/
}

En gros, c'est ça, après faut ajouter quelques <div> ou <span> suivant l'endroit pour faire les morceaux de droite.
Modifié par Olivier (22 Jul 2005 - 17:35)