• Un certain contenu est présent dans le document. ce contenu a été pensé par son rédacteur comme formant un tout !
  • Les différents éléments de ce contenu sont décrits par le balisage html : <p>, <ul>, <a>...
  • Comme ce contenu forme un tout alors la place qu'il occupe dans le flux du document html est annoncée par un titre <hn>. Parce que c'est à cela que sert cette balise.

Cela donnera par exemple ce fragment quelconque d'un document html :

Code html natif

<h3>Texte factice</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae.
</p>
<p>
Nam nisi. Vestibulum urna lectus, gravida sed, convallis id, ornare vel, quam. Aliquam neque nisl, interdum non, facilisis sit amet, gravida id, ligula. Vestibulum in nunc. Morbi at nunc. Morbi malesuada. Nullam id mauris. Curabitur ac dolor vel magna tincidunt ultricies. Aliquam consequat tortor et nisi. Phasellus nisl pede, accumsan sed, tempor et, dignissim vel, erat. Praesent euismod risus in massa. Sed hendrerit dolor vel purus. Nunc tempor.
</p>
<p>
Etiam tincidunt. Ut fermentum nunc eu nibh. Donec convallis consectetuer augue. Etiam condimentum tincidunt nisi. Mauris hendrerit pede et diam. Mauris eget magna eget enim malesuada elementum. Sed facilisis, quam sed bibendum gravida, pede metus fringilla elit, sit amet interdum urna risus id mauris. Nullam tortor erat, ultrices ac, congue nec, cursus ullamcorper, lectus. Sed elit ligula, pulvinar sit amet, lacinia sed, rhoncus ut, purus. Donec a lectus ac sapien dapibus consectetuer. Vivamus rutrum mauris id nunc. Mauris placerat, lacus feugiat vestibulum auctor, urna tortor facilisis orci, vitae rutrum sapien risus a quam. Sed posuere massa eget eros. Integer laoreet pretium sapien. Vestibulum et leo. Aliquam iaculis. Praesent pretium nunc quis magna.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus. Sed ligula felis, sodales sit amet, mattis non, malesuada nec, lorem. Nunc mauris. Vivamus mollis malesuada nulla. Nullam ipsum lacus, fermentum non, molestie id, condimentum vel, metus. Quisque et mi. Etiam in tellus rutrum nisl lacinia rhoncus. Morbi ut nunc in metus dignissim rhoncus. Mauris congue pretium eros.
</p>

Voici le point très important ! Vous allez vous rendre compte que la simple présence de ce type de balisage dans un document entraine une possibilité de mise en place de quatre coins arrondis de manière très aisée et sans courrir dans tous les sens après des éléments vides ;-)

Oui Mais ! ... Si je n'ai pas ce type de balisage dans mon document ? Si par exemple je n'ai qu'une suite de paragraphes sans titre.

Dans ce cas la réponse est très simple et très catégorique. La question n'est pas de savoir si on a ce type de forme (titre + un certain contenu) dans notre code source mais bien de savoir dans quelle perception du document on peut bien être enfermé pour que cette forme ne soit pas présente.

Mise en place des <div>

On regroupe l'ensemble du contenu lui même dans un conteneur <div id="contenu_section"> et l'ensemble contenu + titre qui l'annonce dans un conteneur <div id="global_section">. Enfin on caractérise le dernier élément de la section par class="last_element".

On obtient donc le code suivant :

<div id="global_section">
<h3>Texte factice</h3>
<div id="contenu_section">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae.
</p>
<p>
Nam nisi. Vestibulum urna lectus, gravida sed, convallis id, ornare vel, quam. Aliquam neque nisl, interdum non, facilisis sit amet, gravida id, ligula. Vestibulum in nunc. Morbi at nunc. Morbi malesuada. Nullam id mauris. Curabitur ac dolor vel magna tincidunt ultricies. Aliquam consequat tortor et nisi. Phasellus nisl pede, accumsan sed, tempor et, dignissim vel, erat. Praesent euismod risus in massa. Sed hendrerit dolor vel purus. Nunc tempor.
</p>
<p>
Etiam tincidunt. Ut fermentum nunc eu nibh. Donec convallis consectetuer augue. Etiam condimentum tincidunt nisi. Mauris hendrerit pede et diam. Mauris eget magna eget enim malesuada elementum. Sed facilisis, quam sed bibendum gravida, pede metus fringilla elit, sit amet interdum urna risus id mauris. Nullam tortor erat, ultrices ac, congue nec, cursus ullamcorper, lectus. Sed elit ligula, pulvinar sit amet, lacinia sed, rhoncus ut, purus. Donec a lectus ac sapien dapibus consectetuer. Vivamus rutrum mauris id nunc. Mauris placerat, lacus feugiat vestibulum auctor, urna tortor facilisis orci, vitae rutrum sapien risus a quam. Sed posuere massa eget eros. Integer laoreet pretium sapien. Vestibulum et leo. Aliquam iaculis. Praesent pretium nunc quis magna.
</p>
<p class="last_element">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus. Sed ligula felis, sodales sit amet, mattis non, malesuada nec, lorem. Nunc mauris. Vivamus mollis malesuada nulla. Nullam ipsum lacus, fermentum non, molestie id, condimentum vel, metus. Quisque et mi. Etiam in tellus rutrum nisl lacinia rhoncus. Morbi ut nunc in metus dignissim rhoncus. Mauris congue pretium eros.
</p>
</div><!-- fin contenu_section -->
</div><!-- fin global_section -->

Repérage des conteneurs

On commence, comme dans le premier essai, par visualiser les différents conteneurs dont on dispose.

  • Le div id="global_section" sera repérable par une bordure
  • Le titre par un fond rouge clair
  • Le div id="contenu_section" sera repérable par une épaisse bordure rouge
  • Les différents paragraphes par un fond vert

Texte factice

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus.

Nam nisi. Vestibulum urna lectus, gravida sed, convallis id, ornare vel, quam. Aliquam neque nisl, interdum non, facilisis sit amet, gravida id, ligula. Vestibulum in nunc. Morbi at nunc. Morbi malesuada. Nullam id mauris. Curabitur ac dolor vel magna tincidunt ultricies. Aliquam consequat tortor et nisi. Phasellus nisl pede, accumsan sed, tempor et, dignissim vel, erat. Praesent euismod risus in massa. Sed hendrerit dolor vel purus. Nunc tempor.

Etiam tincidunt. Ut fermentum nunc eu nibh. Donec convallis consectetuer augue. Etiam condimentum tincidunt nisi. Mauris hendrerit pede et diam. Mauris eget magna eget enim malesuada elementum. Sed facilisis, quam sed bibendum gravida, pede metus fringilla elit, sit amet interdum urna risus id mauris. Nullam tortor erat, ultrices ac, congue nec, cursus ullamcorper, lectus. Sed elit ligula, pulvinar sit amet, lacinia sed, rhoncus ut, purus. Donec a lectus ac sapien dapibus consectetuer. Vivamus rutrum mauris id nunc. Mauris placerat, lacus feugiat vestibulum auctor, urna tortor facilisis orci, vitae rutrum sapien risus a quam. Sed posuere massa eget eros. Integer laoreet pretium sapien. Vestibulum et leo. Aliquam iaculis. Praesent pretium nunc quis magna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus. Sed ligula felis, sodales sit amet, mattis non, malesuada nec, lorem. Nunc mauris. Vivamus mollis malesuada nulla. Nullam ipsum lacus, fermentum non, molestie id, condimentum vel, metus. Quisque et mi. Etiam in tellus rutrum nisl lacinia rhoncus. Morbi ut nunc in metus dignissim rhoncus. Mauris congue pretium eros.

Mise en place des coins arrondis

Cette fois encore les différents coins arrondis trouvent un conteneur sans problème.

  • Le div id="global_section" prend le coin "gauche/haut" en image background
  • Le titre prend le coin "droite/haut"
  • Le div id="contenu_section" prend le coin "gauche/bas" en image background
  • Le "dernier élément" du flux le coin "droite/bas"

Ce qui donne, avec l'application des marges externes et internes qui conviennent :

Texte factice

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus.

Nam nisi. Vestibulum urna lectus, gravida sed, convallis id, ornare vel, quam. Aliquam neque nisl, interdum non, facilisis sit amet, gravida id, ligula. Vestibulum in nunc. Morbi at nunc. Morbi malesuada. Nullam id mauris. Curabitur ac dolor vel magna tincidunt ultricies. Aliquam consequat tortor et nisi. Phasellus nisl pede, accumsan sed, tempor et, dignissim vel, erat. Praesent euismod risus in massa. Sed hendrerit dolor vel purus. Nunc tempor.

Etiam tincidunt. Ut fermentum nunc eu nibh. Donec convallis consectetuer augue. Etiam condimentum tincidunt nisi. Mauris hendrerit pede et diam. Mauris eget magna eget enim malesuada elementum. Sed facilisis, quam sed bibendum gravida, pede metus fringilla elit, sit amet interdum urna risus id mauris. Nullam tortor erat, ultrices ac, congue nec, cursus ullamcorper, lectus. Sed elit ligula, pulvinar sit amet, lacinia sed, rhoncus ut, purus. Donec a lectus ac sapien dapibus consectetuer. Vivamus rutrum mauris id nunc. Mauris placerat, lacus feugiat vestibulum auctor, urna tortor facilisis orci, vitae rutrum sapien risus a quam. Sed posuere massa eget eros. Integer laoreet pretium sapien. Vestibulum et leo. Aliquam iaculis. Praesent pretium nunc quis magna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus. Sed ligula felis, sodales sit amet, mattis non, malesuada nec, lorem. Nunc mauris. Vivamus mollis malesuada nulla. Nullam ipsum lacus, fermentum non, molestie id, condimentum vel, metus. Quisque et mi. Etiam in tellus rutrum nisl lacinia rhoncus. Morbi ut nunc in metus dignissim rhoncus. Mauris congue pretium eros.

Voici le code html, la feuille de style et le résultat final.

Synthèse du code

<div id="global_section">
<h3 class="first_element">Texte factice</h3>
<div id="contenu_section">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus.
</p>
<p>
Nam nisi. Vestibulum ... etc...
</p>
<p>
Etiam tincidunt. Ut fermentum ... etc...
</p>
<p class="last_element">
Lorem ipsum dolor sit amet ... etc...
</p>
</div><!-- Fin contenu_section -->
</div><!-- Fin global_section -->

#global_section {
background:red url(corner_hg.jpg) no-repeat left top;
display:inline-block; /* bug IE, on aurait aussi pu utiliser width:100%; pour le contrecarrer */
}
.first_element {
background:url(corner_hd.jpg) no-repeat right top;
margin-top:0;
margin-right:0;
margin-left:20px;
padding-top:20px;
padding-right:20px;
}
#contenu_section {
background:url(corner_bg.jpg) no-repeat left bottom;
}
.last_element {
background:url(corner_bd.jpg) no-repeat right bottom;
margin-bottom:0;
padding-bottom:20px;
padding-right:20px;
margin-right:0;
} p {
margin-left:20px;
margin-right:20px;
}

Résultat

Texte factice

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus.

Nam nisi. Vestibulum urna lectus, gravida sed, convallis id, ornare vel, quam. Aliquam neque nisl, interdum non, facilisis sit amet, gravida id, ligula. Vestibulum in nunc. Morbi at nunc. Morbi malesuada. Nullam id mauris. Curabitur ac dolor vel magna tincidunt ultricies. Aliquam consequat tortor et nisi. Phasellus nisl pede, accumsan sed, tempor et, dignissim vel, erat. Praesent euismod risus in massa. Sed hendrerit dolor vel purus. Nunc tempor.

Etiam tincidunt. Ut fermentum nunc eu nibh. Donec convallis consectetuer augue. Etiam condimentum tincidunt nisi. Mauris hendrerit pede et diam. Mauris eget magna eget enim malesuada elementum. Sed facilisis, quam sed bibendum gravida, pede metus fringilla elit, sit amet interdum urna risus id mauris. Nullam tortor erat, ultrices ac, congue nec, cursus ullamcorper, lectus. Sed elit ligula, pulvinar sit amet, lacinia sed, rhoncus ut, purus. Donec a lectus ac sapien dapibus consectetuer. Vivamus rutrum mauris id nunc. Mauris placerat, lacus feugiat vestibulum auctor, urna tortor facilisis orci, vitae rutrum sapien risus a quam. Sed posuere massa eget eros. Integer laoreet pretium sapien. Vestibulum et leo. Aliquam iaculis. Praesent pretium nunc quis magna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed lorem. Aenean risus mauris, consectetuer pellentesque, nonummy ac, posuere vitae, lectus. Sed ligula felis, sodales sit amet, mattis non, malesuada nec, lorem. Nunc mauris. Vivamus mollis malesuada nulla. Nullam ipsum lacus, fermentum non, molestie id, condimentum vel, metus. Quisque et mi. Etiam in tellus rutrum nisl lacinia rhoncus. Morbi ut nunc in metus dignissim rhoncus. Mauris congue pretium eros.

Voilà, la question de la mise en place de quatre coins arrondis étant maintenant réglée on peut s'attaquer à celle de la mise en place de 4 bordures graphiques en design fluide.