Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Faire un cadre arrondi ou graphique en CSS

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par Antoine, le 22 mai 2005

Ce 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. Nous allons réaliser ce cadre avec une autre technique, à l'aide de trois images et sans aucun tableau ni aucune balise <div>

Voici les images utilisées pour le cadre :

  • haut.gif (partie haute. Dimension : 275px X 40px)

  • milieu.gif (partie centrale qui va se répéter. Dimension réelle: 275px X 1px)

  • bas.gif (partie basse qui va se coller en bas. Dimension : 275px X 40px)

NB : les liens sont cassés mais je ne retrouve pas les fichiers d'origine

Note : Nous aurions très bien pu n'utiliser que deux images pour construire le cadre (en liant milieu.gif et bas.gif pour créer une image globale très allongée). Cependant, cette technique aurait pu être lourde pour des cadres très graphiques en jpg par exemple.

Nous utiliserons les Listes de Définition (balises <dl>, <dt> et <dd> ) pour structurer notre cadre. La balise <dl> englobera l'ensemble. Le <dt> sera le titre du cadre et la balise <dd> désignera le contenu du cadre (possibilité d'utiliser plusieurs <dd> pour des éléments de menu par exemple).

Listes de Définition ?

Notre structure sera de la forme “titre + description” (la description étant le contenu du tableau qui va se rapporter au titre et le définir). Sémantiquement parlant, les listes de définitions sont idéales pour structurer ce genre de cadre.

En effet, les spécifications du W3C suggèrent que les listes de définitions peuvent s'appliquer à partir du moment où il existe une relation directe entre les éléments “titre” et “élément(s)”.

Une liste de définition est composée de trois balises : <dl> est le conteneur global (comme la balise <ul> des listes simples); <dt> indique le titre de la liste et <dd> est un élément de la liste qui est décrit par le titre. Certains sites ont développé assez loin cette structuration, je vous recommande la lecture de cet article très clair : "Les listes de définitions : mal utilisées ou mal comprises ?" Le CSS se contentera de définir notre cadre global (dl), notre titre (dt) et le contenu (dd).

Voici la construction du cadre étirable en hauteur

Code CSS, à placer entre les balises <head> ou sur une feuille séparée :

<style type="text/css">
<!--
dl {   /* positionnement du cadre, que vous pouvez modifier */
position: absolute;
left: 50px;
top: 20px;
width: 275px;  /* largeur du cadre, selon votre image de fond */
}
 
dl, dt, dd {   /* suppression de toutes les marges */
margin: 0;
padding: 0;
}
 
dl {   /* image qui sera fixée en bas du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px; /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}
 
dt {   /* définitions du titre du cadre */
height: 40px;
background: url(haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
 
dd {
padding: 0 20px 0 10px; /* gestion des espaces internes du cadre */
text-align: justify;
background: url(milieu.gif) top left;  /* arrière-plan intérieur qui va se répéter */
}
 
p {
margin:0; /* marges des paragraphes */
}
-->
</style>

Et voici le code HTML complet :

 
<body>
<dl>
 <dt>Mon cadre joli</dt>
 <dd>
  <p>Lorem ipsum dolor sit amet, bla bla bla bla...</p>
 </dd>
</dl>
</body>

(Revoir le résultat à obtenir)

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 <dd> 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) :

<body>
<dl>
 <dt>Mon menu joli</dt>
 <dd><a href="#" title="menu1" accesskey="1">Menu 1</a></dd>
 <dd><a href="#" title="menu2" accesskey="2">Menu 2</a></dd>
 <dd><a href="#" title="menu3" accesskey="3">Menu 3</a></dd>
 <dd><a href="#" title="menu4" accesskey="4">Menu 4</a></dd>
 <dd><a href="#" title="menu5" accesskey="5">Menu 5</a></dd>
</dl>
</body>

(Voir le résultat obtenu : le menu encadré)