Bonsoir,
Je me suis penchée sur la question et je voudrais savoir ce que vous pensez de ma méthode svp, de boite avec coins arrondis, fluide, en largeur et en hauteur, avec 8 images, pour permettre d'obtenir une boite avec ombres.
J'ai pris le design sur le site de Florent V., j'espère qu'il ne m'en voudra pas
Voici le code css :
* {padding: 0; margin: 0;}
html, body {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
#boiteConteneur { /* boite centree */
width: 95%;
height: 95%;
margin: 10px auto;
text-align: left;
}
#boiteContenu {
background: #fff url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/centre_droit.png) top right repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: justify;
margin-left: 30px; /* placement du contenu */
margin-right: -60px; /* placement du cote droit de la boite */
padding-right: 30px; /* placement du contenu */
}
#boiteCoinHautGauche {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/coin_haut_gauche.png) no-repeat;
width: 30px;
height: 30px;
float: left;
}
#boiteHautCentre {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/centre_haut.png) repeat-x;
width: 91%; /* adapter selon l image, prevoir 1% de moins pour les resolutions 800x600 */
height: 30px;
float: left;
}
#boiteCoinHautDroit {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/coin_haut_droit.png) no-repeat;
width: 30px;
height: 30px;
float: left;
}
#boiteCentreGauche {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/centre_gauche.png) repeat-y;
width: 91%; /* adapter selon l image, prevoir 1% de moins pour les resolutions 800x600 */
height: 100%;
float: left;
clear: both;
padding-right: 60px; /* placement du cote droit de la boite pour IE */
}
#boiteCoinBasGauche {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/coin_bas_gauche.png) no-repeat;
width: 30px;
height: 30px;
float: left;
clear: both;
}
#boiteBasCentre {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/centre_bas.png) repeat-x;
width: 91%; /* adapter selon l image, prevoir 1% de moins pour les resolutions 800x600 */
height: 30px;
float: left;
}
#boiteCoinBasDroit {
background: transparent url(http://www.bluesmilies.eu/boite_fluide_coins_arrondis_8_images/coin_bas_droit.png) no-repeat;
width: 30px;
height: 30px;
float: left;
}
et le code html :
<div id="boiteConteneur">
<div id="boiteCoinHautGauche"></div>
<div id="boiteHautCentre"></div>
<div id="boiteCoinHautDroit"></div>
<div id="boiteCentreGauche">
<div id="boiteContenu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In elementum, dui a consectetuer interdum, turpis libero malesuada ipsum, ut hendrerit nisl pede a risus. Donec nonummy nulla eu lorem. Vestibulum molestie. Aliquam vestibulum congue augue. In hac habitasse platea dictumst. Nunc volutpat egestas augue. Aenean adipiscing turpis eu nibh. Etiam mi felis, dignissim nec, dapibus vel, bibendum volutpat, justo. Donec gravida, augue dictum hendrerit bibendum, erat elit bibendum sapien, eu varius lectus nibh nec urna. Vivamus laoreet ultrices libero. Pellentesque et est. Donec imperdiet sapien vitae turpis. Nam laoreet iaculis elit. Sed hendrerit. Nam magna arcu, venenatis vitae, rutrum nec, volutpat quis, eros. Aliquam non nulla vitae dolor dictum lobortis. Fusce sit amet sem. Quisque quam augue, hendrerit eget, sagittis sed, auctor tempus, turpis. Maecenas sed odio sed enim aliquam eleifend.</p>
<br /><p>Pellentesque diam risus, nonummy at, molestie nec, lacinia sed, massa. Morbi convallis, eros non facilisis venenatis, quam mi dignissim lectus, ut tristique erat tortor ac libero. Nulla congue. Proin sapien nulla, adipiscing ac, suscipit a, tristique sed, quam. Nunc mi lectus, lacinia vel, pulvinar sit amet, volutpat pulvinar, turpis. Nunc diam pede, porta vitae, placerat ac, interdum vel, odio. Sed id tortor ac orci sagittis rutrum. Donec congue commodo dolor. Maecenas vitae dolor et erat luctus scelerisque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br /><p>Etiam nec nisl. Sed scelerisque commodo eros. Suspendisse ultricies ipsum ac pede. Phasellus vel risus. Ut non odio ut neque eleifend varius. Fusce mattis porta mi. Sed sollicitudin elit quis sem. In congue diam eu tellus. Maecenas rhoncus viverra mauris. Aliquam semper, quam sit amet ullamcorper tempus, felis tortor feugiat tellus, sit amet rutrum libero purus nec ante. In sit amet lectus in massa rutrum tempor. Pellentesque tempus. Vestibulum vitae nulla ac lectus ultrices sollicitudin. Suspendisse potenti. Vivamus porta venenatis felis. Quisque mollis vulputate ligula. Aenean vel tellus. Sed magna leo, convallis et, faucibus nec, euismod a, nulla.</p>
<br /><p>Integer lectus. Etiam malesuada. Ut sed pede non risus facilisis adipiscing. Pellentesque nec turpis. Ut ullamcorper convallis leo. Nullam gravida nisl sed magna. Vestibulum cursus ultricies diam. Pellentesque molestie nonummy eros. Nam nisi justo, convallis id, fermentum eu, viverra at, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at magna quis massa gravida hendrerit. Mauris enim urna, eleifend nec, vestibulum lobortis, fermentum ac, nisl. Aliquam nec justo rutrum turpis sodales rhoncus. Integer diam ante, mattis ac, varius at, pellentesque nec, enim. Donec nec enim. Vestibulum consectetuer metus a arcu.</p>
<br /><p>Quisque viverra dignissim tellus. Nulla nec nisl. Quisque hendrerit. Vestibulum sodales euismod mauris. Sed faucibus lacinia tortor. Mauris a nisl. Vivamus mollis sem. Nam nulla nunc, tempus a, rutrum et, commodo at, quam. In eget eros id leo tempus sodales. Integer ut sapien. In porttitor elit. Sed scelerisque elit in massa. Nunc dapibus elementum mauris.</p>
</div>
</div>
<div id="boiteCoinBasGauche"></div>
<div id="boiteBasCentre"></div>
<div id="boiteCoinBasDroit"></div>
</div>
Testée avec IE et FF
Modifié par blue (28 Aug 2007 - 08:28)
