Code html natif

<h3>Ceci est une liste</h3>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li>Troisième item</li>
</ul>

On voit bien que l'ensemble de ce fragment forme un tout. Sans que cela soit obligatoire on peut donc très légitimement confirmé ce point en insérant les blocs qui le compose dans un même conteneur. Ce sera un div puisque c'est à ça que sert cette balise.

Mise en place des <div>

<div>
<h3>Ceci est une liste</h3>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li>Troisième item</li>
</ul>
</div>

Soit :

Repérage des conteneurs

Dans un premier temps il est utile de bien visualiser les conteneurs dont on dispose.

• Le div conteneur sera représenté par une bordure noire
• Le titre h3 par une couleur rouge claire
• L'ensemble de la liste ul par une couleur verte
• chaque item li de la liste par une couleur bleue

Cela en fait des conteneurs n'est ce pas ? En fait on peut voir déjà très bien comment placer les quatre coins.

Mise en place des coins arrondis

• Le div conteneur aura en image background le coin haut/gauche
• Le titre h3 le coin haut/droite
• L'ensemble de la liste ul le coin bas/gauche
• Le dernier des item li le coin bas/droite

Comme l'essai porte sur une liste ul il est nécessaire de régler d'entrée un petit souci de compatibilité. Il s'agit de la manière dont les différents navigateurs génèrent l'espace nécessaire pour le placement des puces (marge interne pour firefox et externe pour les autres). J'égalise cela sur le modèle firefox en appliquant à ul un margin-left:0; et un padding-left:40px;.

Comme on le voit quelques propriétés de style supplémentaires vont être nécessaires pour finaliser les placements.

Néanmoins à ce stade le test est en quelque sorte terminé. Les quatres coins sont bien présents, à peut près disposés où on le souhaitait, et aucune intervention n'a été nécessaire dans le code html lui même.

Pour bien placer le coin haut/droite il suffit de supprimer la marge externe supérieure de h3. Pour les coins bas/gauche et bas/droite on supprime la marge externe inférieure de ul et du dernier item de la liste.

Pour la finalisation on remplace les marges externes supprimées par des marges internes (padding), pour la marge inférieure il suffit de l'appliquer au dernier item de la liste, et on créé une marge à gauche à h3 afin de rendre visible le coin haut/gauche.

On peut maintenant supprimer les styles temporaires qui permettaient de visualiser les différents conteneurs et appliquer la couleur de fond qui convient.

Petite synthèse du code

html

<div id="conteneur_test">
<h3>Ceci est une liste</h3>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li class="last_element">Troisième item</li>
</ul>
</div>

css

div#conteneur_test {
background:#f00 url(corner_hg.jpg) no-repeat left top;
width:60%;
}

div#conteneur_test h3 {
background:url(corner_hd.jpg) no-repeat right top;
margin-top:0;
padding-top:20px;
margin-left:20px;
}

div#conteneur_test ul {
margin-left:0;
padding-left:40px;
background:#afa url(corner_bg.jpg) no-repeat left bottom;
margin-bottom:0;
}

div#conteneur_test ul li.last_element{
background:url(corner_bd.jpg) no-repeat right bottom;
margin-bottom:0;
padding-bottom:20px;
}

Résultat

Une petite coquetterie pour conclure, je réduis la largeur du tout à 60% de son conteneur ;-)