Retrouvez cet article dans : Linux Pratique 39
Cas d'un bloc " figé "
(1) Voir les futures spécifications pour arrière-plans et bordures : http://www.w3.org/TR/css3-background/ Nous allons tout d'abord considérer le cas d'un bloc de largeur fixe, mais étirable en hauteur. Classiquement, nous créons un bloc
-  la bordure supérieure du bloc constituera une image ;
-  le contenu et la bordure inférieure du bloc constitueront notre deuxième image.
- un conteneur
<div>, qui va contenir l'ensemble des éléments ; il aura pour arrière-plan l'image de la partie supérieure du bloc ; - un " sous-conteneur "
<div>, qui va recevoir le contenu textuel ainsi que la bordure inférieure du bloc.
<body> <div id="conteneur"> <div id="bloc"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur luctus mauris sit amet metus. Cras tincidunt neque nec arcu. Praesent elit sapien, egestas ac, blandit quis, eleifend a, est. Nunc quis arcu. Vivamus tortor. Cras blandit semper nibh. Vivamus risus est, auctor ac, eleifend non, lacinia ut, mauris. Maecenas tristique, risus id fringilla rhoncus, pede neque egestas neque.</p> </div> </div> </body> </html>Associé à la feuille de style suivante :
#conteneur {
width: 250px;
padding-top: 40px; /* Ã ajuster...*/
background: url(chapeau.png) left top no-repeat;
}
#bloc {
background: url(contenu.png) left bottom no-repeat;
padding-bottom: 40px;
}
#bloc p {
margin: 0 40px 40px 40px;
}
La propriété
Cas d'un bloc " étirable "
Nous venons de considérer le cas où le bloc doit être étirable en hauteur. À présent, considérons le cas plus complexe où l'on souhaiterait que notre bloc soit étirable aussi bien en hauteur qu'en largeur.La propriété -moz-border-radius
Il existe une propriété qui permet d'arrondir automatiquement les angles des éléments de type bloc. Il s'agit de la propriété<p class="curve">blandit quis, eleifend a, est. Nunc quis arcu. Vivamus tortor. Cras blandit semper nibh. Vivamus risus est, auctor ac, eleifend non, lacinia ut, mauris. Maecenas tristique, risus</p>
.curve {
width: 300px;
background-color: #CCCCFF;
border: 3px solid #0033FF;
-moz-border-radius: 30px;
padding: 20px;
}
Cette propriété règle notre problème : nous obtenons un bloc étirable dans les deux sens.
Cependant, comme le laisse entendre son intitulé, seuls les navigateurs Web basés sur Gecko (le moteur de rendu de Mozilla) savent interpréter cette propriété... Elle sera donc inefficace aux yeux des internautes utilisant Internet Explorer. Espérons que le W3C inclura une propriété du même genre dans la norme CSS 3, ce qui simplifierait la vie de nombreux webmestres.
Utilisation de 4 images en coin
La technique que nous allons employer ici consiste à créer les quatre coins arrondis du bloc à l'aide d'un logiciel de dessin, puis à les positionner en absolu dans un conteneur. Le plus important ici est de veiller à ce que la couleur de fond des 4 images soit identique à la couleur d'arrière-plan de votre page. Il ne faut pas songer à créer un cadre avec bordure (ou rempli d'un dégradé, ou tout autre " effet " visuel). En effet, vous allez voir que seuls les 4 coins du cadre seront constitués d'une image. Pour que notre bloc donne l'impression d'être extensible, on se contentera de lui appliquer une couleur d’arrière-plan (la même couleur que les 4 coins bien sûr). Les 4 coins se positionneront automatiquement en fonction des dimensions du bloc. Comme précédemment, le plus simple pour réaliser vos coins-images est de dessiner un rectangle aux coins arrondis dans Inkscape, puis de l'exporter en bitmap pour finir par découper les 4 coins à l'aide de The Gimp. Nous obtenons les 4 images suivantes :
 <body> <div id="cadre4"> <div id="coinhd"></div> <div id="coinhg"></div> <div id="contenu"> <p>Duis ligula augue, dignissim lacinia, commodo quis, tempus sit amet, justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat eleifend arcu. Maecenas blandit rutrum risus. Sed fringilla. Quisque nulla. Nulla facilisi. Aliquam erat volutpat. Duis in risus ut metus aliquet fringilla.</p> </div> <div id="coinbd"></div> <div id="coinbg"></div> </div> </body>Notez qu'on définit ici, dans un ordre logique : les coins supérieurs, suivis du contenu textuel pour terminer par les coins inférieurs. Mais remarquez que les coins de droite sont déclarés AVANT les coins de gauche. En effet, dans le cas contraire, le coin supérieur droit se positionne bien à droite, mais au-dessous du coin gauche (de manière à ce qu'ils ne se trouvent pas sur la même ligne). Notre feuille de style ressemble à ceci :
body {
font-family: verdana, arial, sans-serif;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
#cadre4 {
width: 400px;
background-color: #53937a;
}
#coinhd, #coinhg, #coinbd, #coinbg {
height: 45px;
width: 45px;
}
#coinhd {
background-image: url(coin4hd.png);
float: right;
}
#coinhg {
background-image: url(coin4hg.png);
}
#coinbd {
background-image: url(coin4bd.png);
float: right;
}
#coinbg {
background-image: url(coin4bg.png);
}
#contenu p {
margin: 0;
padding: 0 45px 0 45px;
color: #FFFFCC;
}
Remarquez que nous avons précisé une couleur d'arrière-plan (blanc) pour 
 Fig. 6
Donnez votre avis
Vous devez avoir ouvert une session pour écrire un commentaire.