Faire un cadre arrondi ou graphique en CSS et XHTML (nouvelle version)

Premier cas : un cadre de largeur fixe

Cette nouvelle version du tutoriel va vous permettre de réaliser un cadre arrondi, ou graphique en général, qui ne pourra s'allonger qu'en hauteur (par exemple pour des menus dont le nombre varie), de manière simple en CSS.

Pour créer un cadre étirable dans les deux directions, passez directement Second Cas.

Nous allons réaliser ce cadre à l'aide de deux images et sans aucun tableau. Nous partirons du principe que la largueur du cadre sera fixée à 275px.

Voici les images utilisées pour le cadre :

Note : L'image bas.gif est une image globale volontairement très allongée (voir l'image en taille réelle). Dans notre exemple, elle a une hauteur de 500px; selon le contenu, seule une partie de cette image sera affiché, ce qui rend le cadre fluide en hauteur.

Voici la construction du cadre étirable en hauteur

Code CSS :

	
div#cadre {/* conteneur global et arrière-plan du titre du cadre */
width: 275px;
padding-top: 40px;
background: url(haut.gif) top left no-repeat;
}
div#bloccadre {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px;
}
div#bloccadre p {
margin: 0 30px 0 20px;
}

Et voici le code HTML complet :

	<div id="cadre">
		<div id="bloccadre">
		<p>Lorem ipsum dolor sit amet, bla bla bla....</p>
		</div>
	</div>

Revoir le résultat obtenu

Variante : la création d'un menu

Cette technique est également tout à fait adaptée à la création d'un menu entouré de cadre.

Il suffit pour cela d'utiliser les éléments de liste <li> pour chaque item de menu

Et voici le code HTML adapté à un menu (notez l'utilisation des accesskey pour faciliter l'Accessibilité aux utilisateurs sans souris) :

	<div id="cadre">
		<div id="bloccadre">
		<h1>Mon menu joli</h1>
		<ul>
		<li><a href="#" accesskey="1">Menu 1</a></li>
		<li><a href="#" accesskey="2">Menu 2</a></li>
		<li><a href="#" accesskey="3">Menu 3</a></li>
		<li><a href="#" accesskey="4">Menu 4</a></li>
		<li><a href="#" accesskey="5">Menu 5</a></li>
		</ul>
		</div>
	</div>

Voir le résultat obtenu : le menu encadré

Deuxième cas : un cadre totalement fluide

Concevoir un cadre entièrement fluide, c'est à dire étirable à la fois dans le sens de la hauteur et de la largeur est un peu plus délicat et nécessite quelques extravagances supplémentaires. Voir le résultat

La méthode qui va être exposée ici n'est qu'un moyen parmi beaucoup d'autres, pour la bonne raison qu'il n'existe aucune "bonne" méthode, chacune ayant des inconvénients.

Note : Vous trouverez sur cette documentation exhaustive (en anglais) une multitude de techniques différentes pour la création de cadres à coins arrondis.
Et voici un document francophone qui établit un rapide comparatif entre certaines de ces méthodes.

Le principal inconvénient est que toutes les méthodes (hormis l'utilisation de la propriété moz-border-radius et les pseudo-classes :before et :after) nécessitent d'ajouter des éléments de structure au code HTML, en général plusieurs balises <div> ou <img> sont nécessaires pour ce genre d'habillages, ce qui est une forme de "pollution" puisque ces balises ne servent qu'à apporter une solution purement graphique et que la règle de séparation entre le fond (HTML) et la forme (CSS) n'est plus respectée.

Voici donc une technique qui semble, à l'heure actuelle, compter parmi celles ayant le moins d'inconvénients majeurs.

Le principe général est de créer les quatre coins arrondis à l'aide d'un éditeur graphique puis de les placer un par un en position absolue dans un conteneur lui-même placé en position relative.

Nous éviterons l'usage de la balise <img> puisque dans notre cas, les coins arrondis ne constituent pas une image pertinente pourvue de sens, mais servent uniquement à la décoration. C'est donc une balise neutre qui contiendra ces quatre coins arrondis : <div>.

Voici les images utilisées pour les bordures. Notez que la couleur de fond des coins devra s'adapter à la couleur d'arrière plan de votre document !

L'objectif sera d'obtenir un habillage arrondi tel qu'il est représenté sur la figure ci-dessous.

représentation générale du cadre arrondi

Pour obtenir cet habillage, nous devons résoudre ple problème suivant : le bloc doit être étirable en largeur et en hauteur, d'où la nécessité de scinder en quatre images séparées qui seront placées dans chaque coin. Les images de droite seront placées en positionnement flottant.

La structure générale que nous cherchons à réaliser est présentée sur la figure ci-dessous :

représentation structurelle du cadre arrondi

Voici le code HTML et CSS qui ont permis la conception de ce cadre arrondi. Vous devriez à présent être capables de comprendre le principe et de le reproduire. Quelques commentaires explicatifs développent les quelques points importants.

Vous remarquerez l'inversion dans le code HTML des coins droits et gauches, ceci pour que le positionnement flottant fasse effet.

HTML :
<div id="cadre">
	<div id="hautdroit"></div><div id="hautgauche"></div>
	<div id="contenu">
		<p>Texte de contenu</p>
		<p>Texte de contenu</p>
		<p>Texte de contenu</p>
	</div>
	<div id="basdroit"></div><div id="basgauche"></div>
</div>

CSS :
body {
font: 1em black verdana, sans-serif;
background-color: white;
}
#cadre { /* taille du cadre, à titre d'exemple */
width: 15em;
background-color: #909090;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(hautgauche.gif);
}
#hautdroit {
float: right;
background: url(hautdroit.gif);
}
#basgauche {
background: url(basgauche.gif);
}
#basdroit {
float: right;
background: url(basdroit.gif);
}
#contenu p {
color: white;
margin: 0.5em; /*gestion des espaces interparagraphes */
}

Notre cadre est fini. Revoir le résultat.

Imprimer l'article

Raphaël GOETTER
www.alsacreations.com