Comment intégrer un ruban sur un site web.

J'ai crée un ruban sur Photoshop afin d'apprendre la technique. Cependant je ne parviens pas à l'intégrer correctement. L'image s'affiche correctement mais je ne parviens pas à réaliser l'effet ruban.

Vous trouverez en pièce jointe le ruban crée. Ce n'est un travail abouti mais juste pour m'entrainer sur Photoshop.

Merci de votre aide.

Cliquez sur l'image pour la voir s'afficher en grand.
Modifié par mln95400 (30 Jun 2012 - 22:59)

Page en ligne ou à défaut code + description de ce que tu obtiens et de ce que tu souhaites obtenir.

Voila le language HTML et CSS.

<div id="menu">
</div><!--Menu-->
<div id="contenu">
</div><!--Contenu-->

#menu{
background-image: url(ruban.png);
width: 660px;
height: 101px;
}
#contenu{
width: 500px; 
height: 800px;
background-color: #FFFFFF;
}

Ce que je voulais obtenir c'est que le div conteneur soit en dessous du ruban et que les deux extrémités du ruban aillent derrière le bloc conteneur. J'ai pensé naïvement que cela fonctionnerait, mais l'image reste au dessus du bloc conteneur.

J'ai donc par la suite utilise centré le div menu et utiliser position relative pour mettre le ruban au dessus du conteneur. Cela a fonctionné mais les deux extrémités restent au dessus du conteneur.

#menu{
width: 500px;
height: 800px;
margin: 0 auto;
position: relative;
}

Ensuite pour position relative j'ai ajuster les valeurs pour que le div menu qui comprend le ruban se place au dessus du conteneur et son background blanc. Cependant l'effet ruban ne fonctionne pas.

Le genre d'effet que j'aimerai se trouve en pièce jointe.