Jeudi 1 Novembre 2007
Cadre extensible CSS
Par Jacky, Jeudi 1 Novembre 2007 à 03:41 GMT+2 dans Astuces CSS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque fringilla. Morbi venenatis purus at risus. Curabitur ornare lorem sit amet lacus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque fringilla. Morbi venenatis purus at risus. Curabitur ornare lorem sit amet lacus. Aenean lorem.Phasellus adipiscing, arcu et feugiat ultrices, arcu massa tristique lorem, eu vestibulum magna felis vitae augue. Phasellus libero elit, ullamcorper vel, auctor vel, dictum in, lorem. Mauris metus urna, pharetra vel, tincidunt vel, congue in, libero. Curabitur lacinia dui vel ipsum.
Pour réaliser ce cadre, il vous faut créer une image avec une largeur et une hauteur
de votre préférence puis coupez-la en deux parties comme celles-ci:
(Taille réelle de mon image: L 320px x H 720px)
(Cliquez pour visionner)
ensuite rendez vous dans votre feuille de style et copiez ceci:
| .cadre { width: 320px; padding-top: 45px; background:transparent url(haut.gif) top left no-repeat; border:none; } .bloccadre { background:transparent url(bas.gif) bottom left no-repeat; padding-bottom: 45px; border:none; } .bloccadre p { margin: 0 30px 0 30px; } |
Puis dans votre article en mode HTML:
<div class="cadre"><div class="bloccadre">
<p>votre texte</p></div></div>
Vous pourrez ainsi agrandir ou rétrécir le cadre à votre aise.
