Mettre en boîte

Mettre en boîte

Juste avant d'étudier le positionnement en css (qui est un chaputre assez lourd), nous
allons voir le formatage des éléments de type bloc (on les appelle couramment boîtes...).

// Taille du bloc

Il existe six propriétés CSS à retenir pour définir la taille d'un bloc.

La première est width elle définit la largeur. La seconde est height et définit la hauteur du bloc.

On exprime la valeur en px pour une taille fixe ou en % pour parler d'une taille relative.

width: 80%; affichera un bloc qui aura pour largeur 80% de celle de la fenêtre.

Les quatre autres propriétés sont assez semblables : min-width et min-height, qui permettent de définir la largeur/hauteur minimum du bloc.

De la même manière, les propriétés max-width et max-height indiquent la largeur/hauteur maximum du bloc.

Note : Ces quatres dernières balises semblent avoir des problèmes de compatiblité avec
internet explorer version 6.

// les bordures

Nous en avons déjà parlé rapidement précédamment, nous allons les expliquer ici en détail :
les bordures.

La propriété fondamentale est border, elle concerne les quatres bordures sans distinction. Elle se décline en plusieures sous-propriétés :

• border-top : bordure du
  haut


• border-left : bordure de
  gauche


• border-bottom : bordure
  du bas


• border-right : bordure
  de droite

Ces balises auront pour valeur [épaisseur]px [couleur] [style] (l'ordre n'est pas important, mais les trois indications doivent être présentes).

On définit toujours l'épaisseur en pixel, ou à l'aide des mots clés :

• thin : fin


• medium : intermédiaire
  


• thick : épais
  

La couleur peut être définie par les mots clés, la valeur héxadécimale ou encore en code
rgb, avec la syntaxe rgb([rouge],[vert],[bleu]). Les styles de bordure existants sont :

• none : pas de bordure
  (par défaut)


• solid : un trait simple
  


• dotted : pointillés
  


• dashed : tirets
  


• double : bordure double
  


• groove : en relief
  


• ridge : effet 3D
  


• inset : le bloc forme un
  creux


• outset : le bloc est
  surélevé

Il existe encore quelques autres sous-propriétés issues de border.

• border-width : pour ne
  définir que l'épaisseur


• border-color : pour ne
  définir que la couleur


• border-style : pour ne
  définir que le style de la bordure

Il est également possible de faire des combinaisons, tel que border-top-style, ou
border-right-color, etc...

// les marges

Il y a deux sortes de marges : les marges exterieures, qui possèdent la propriété
margin, et les marges interieures, gérées avec padding.

Ces deux propriétés possèdent toutes les deux 4 sous-propriétés similaires :

margin-left, margin-right, margin-top et margin-bottom.

Ainsi que :

padding-left, padding-right, padding-top et padding-bottom.

Voici une petite illustration pour faire la différence :

La zone symbolise la marge extérieure (margin).

Le trait noir est la bordure du bloc, et la zone rouge, la marge intérieure (padding).
Le contenu du bloc (le texte par exemple) sera placé dans le rectangle du centre.

Voici trois utilisations différentes pour cette propriété :

   1  /* l'exemple est aussi valable pour la propriété padding */
   2  margin: 5px;
   3  margin: [largeur des 4 marges]px;
   4  /* Les quatres marges feront 5px. */
   5  margin: 10px 0px;
   6  margin: [marges du haut et du bas]px [marges de gauche et droite]px;
   7  /* les marges du haut et du bas font 10px, les marges de droite et de
      gauche en font 0 */
   8  margin: [haut]px [droite]px [bas]px [gauche]px;

Il est donc possible de donner une taille à toutes les marges, ou de détailler plus ou moins
précisément.

Mais il est encore possible de décomposer autrement :

   1  margin-top: [valeur]px;
   2  margin-right: [valeur]px;
   3  margin-bottom: [valeur]px;
   4  margin-left: [valeur]px;

// Standards Microsoft et W3C

Le traitement de ces propriétés CSS est différent selon l'interprétation par microsoft ou par les
navigateurs respectant les normes du W3C.

En effet, Microsoft considère que la valeur de width est la largeur totale du bloc, et donc que l'on inclue la taille des marges dedans, alors que le W3C considère qu'il faut ajouter à la largeur,
les marges et la bordure.

Pour cette feuille de style, l'interprétation sera différente :

    1  .bloc
     2    {
      3      width: 250px;
       4      margin: 12px;
        5      padding: 12px;
         6      border: 2px #000000 solid;
          7    }

l'affichage sera différent :

Chez microsoft, la taille de la zone de texte sera 250 - 12*2 - 12*2 - 2*2 = 200px. (il y a une bordure de chaque côté).

Pour le W3C, on trouve que la taille du bloc sera 250+12*2 + 12*2 + 2*2.

Pour éviter les problèmes de compatibilité, on utilise une méthode appellée le Doctype Switching (voir ici).
Cette méthode consiste à forcer un mode d'interprétation à Internet Explorer en
fonction du DTD choisi :

l'utilisation d'un DTD HTML strict ou XHTML forcera l'affichage type W3C.

Note : En ajoutant le prologue XML <?xml version="1.0"?>, Internet explorer 6 utilisera le modèle Microsoft Comme Internet Explorer 5.5 ne connait que le modèle Microsoft, on peut aussi utiliser le fait que ce navigateur ne connaisse pas toute la syntaxe CSS pour cacher certaines informations :

    1  .bloc
    2    {
    3      /* on indique ici la taille pour microsoft */
    4      width: 300px;
    5      margin: 12px;
    6      padding: 12px;
    7     /* Ces deux lignes permettent de cacher ce suit à IE 5 sous windows */
    8     voice-family: "\"}\"";
    9      voice-family: inherit; /* On annule l'information précédente */
    10      width: 250px;
    11    }
    12  /* pour IE 6, il faut utiliser le fait que la syntaxe élément>élément
     soit inconnue */
    13  html>body .bloc
    14    {
    15      width: 250px;
    16    }

Nous avons ici exploité un bug de l'analyse des css d'internet explorer pour indiquer la valeur "spécial Microsoft", et ainsi
dissimuler la vraie valeur. Vous pouvez consulter la page de "l'auteur" de ce Hack sur cette page pouvez aussi consulter l'article d'OpenWeb

// Décorer sa boîte

La première des décorations est l'arrière plan (le fond), géré par la propriété background
(et ses sous propriétés) .Il est possible de définir un fond en couleur, ou avec une image :

    1  background-color: #FFFFFF;
    2  background-image: url("./images/monimage.png");
 

Pour placer une image en fond, on utilise la syntaxe url([adresse]);, l'adresse indiquée sera soit l'adresse absolue (http://www.monsite.com/images/monimage.png) ou l'adresse relative, en fonction de l'emplacement de l'image par rapport à la feuille de style (et non de la page HTML).

Pour gérer l'image, il existe quelques popriétés supplémentaires, telque background-position, qui admet les valeurs top, bottom, right, left et center, placer le fond dans le bloc.

La propriété background-repeat, indique si le fond doit être répété en mosaïque (avec la valeur repeat), verticalement (repeat-y), horizontalement (repeat-x), ou pas du tout
(no-repeat).

Il existe aussi la propriété background-attachment, qui permet de choisir si le fond doit rester fixe (valeur fixed), ou alors doit monter/descendre avec le scroll (défilement de la page), on emploie alors la valeur scroll. La valeur par défaut est couramment scroll. Cette propriété n'est utile que pour définir le fond de la page (on définie la balise body dans la feuille de style) ou d'un cadre utilisant la technologie overflow, que nous allons étudier.

La propriété overflow (disponible uniquement sur les navigateurs récents, de génération IE 6 windows, IE 5 mac, mozilla, etc...) permet d'ajouter une barre de défilement (ou scroll/ascenseur) dans le cas où le contenu du cadre serai plus grand que la taille limite définie par les propriété width et height.

Cette propriété admet les valeurs auto, qui affichera les barres seulement si le contenu dépasse, visible qui affichera toujours la barre, hidden qui ne l'affichera jamais.

// placer le texte

Pour le placer horizontalement, il suffit d'utiliser la propriété text-align, qui admet les valeurs

• left


• center


• right


• justify

Pour centrer verticalement, la propriété à utiliser est vertical-align, avec les valeurs

• top : aligner en haut
  


• middle : aligner au
  milieu.


• bottom : aligner en bas.
  


• baseline : aligner sur
  la ligne de base (ou en bas s'il n'y a pas de ligne de base).


• sub : mettre en indice
  (sans réduire la taille de la police).


• super : mettre en
  exposant (sans réduire la taille de la police).


• text-top : aligner sur
  le bord supérieur de l'écriture.


• text-bottom : aligner
  sur le bord inférieur de l'écriture.

> retour au sommaire

> voir la suite