Les différentes boîtes

Différentes boîtes 'corporate' sont à disposition pour mettre en page votre contenu. Ces dernières sont intégrées dans les feuilles styles (feuille CSS centrale).

Nous vous recommandons de décortiquer le code pour bien comprendre en cas de souci.

 

Class box001

La boîte box001 est composée de deux éléments principaux, le sommet appelé par le tag <H2> ou <H3> et le fond appelé par la class box001.

Le contenu est appelé par la class box001_content et comporte une petite marge et d'autres attributs

<H2> propose un petit F stylisé au sommet et un bleu pour titrer
<H3> reprend la même apparence sans le F

Le résultat est le suivant:

Titre en H2

Contenu dans la class box001_content

Lien standard

 

Titre en H3

Contenu dans la class box001_content

Lien standard

En regardant le code:

<div class="box001">
   <h2>Titre en H2</h2>
   <div class="box001_content">
     <p>Contenu dans la class box001_content</p>
     <p><a href="#">Lien standard </a></p>
     <ul class="arrowDG">
      <li>Liste, él 1</li>
      <li><a href="#">Liste él 2 lien</a> </li>
    </ul>
  </div>
</div>

 

Class Box002

La class box002 convient parfaitement pour une navigation secondaire par exemple. L'arrière-fond coloré convient parfaitement aux petites lignes séparatrices par exemple dans le cas d'une liste.

Elle prend l'apparence suivante. Les tags <H2> et <H3> définissent un titre différent au sommet

Titre en H2

Titre en H3

 

Class Box003

La class box003 convient parfaitement pour une boîte par exemple au sein d'une page ou dans une tierce colonne sur la droite par exemple. Elle dispose un liseret gris autour de la zone sélectionnée.

Comme les boîtes précédentes, elle dispose également d'un système titre et sous titre en appliquant des class title, subtitle, subtitle2, subtitle3, subtitle4 pour structurer vos informations.

Titre de type title

Contenu contenu contenu contenu contenu contenu

Titre subtitle

Contenu contenu contenu contenu contenu contenu

Titre subtitle2

Contenu contenu contenu contenu contenu contenu

Titre subtitle3

Contenu contenu contenu contenu contenu contenu

Titre subtitle4

Contenu contenu contenu contenu contenu contenu

En code:

<div class="box003">
  <p class="title">Titre de type title</p>
    <p>Contenu contenu contenu contenu contenu contenu</p>
  <p class="subtitle">Titre subtitle</p>
    <p>Contenu contenu contenu contenu contenu contenu</p>
  <p class="subtitle2">Titre subtitle2</p>
    <p>Contenu contenu contenu contenu contenu contenu</p>
  <p class="subtitle3">Titre subtitle3</p>
    <p>Contenu contenu contenu contenu contenu contenu</p>
  <p class="subtitle4">Titre subtitle4</p>
    <p>Contenu contenu contenu contenu contenu contenu</p>
</div>

 

Weboffice - Unicom Communication & Médias   -   Av. Europe 20    -   1700 Fribourg   -  Tel +41 26 / 300 7034    -   Fax +41 26 / 300 9703   -  
webmaster [at] unifr.ch   -   Swiss University