CCS3 - Les dimensions

-  Propriétés width, height, padding, margin, overflow, word-wrap, etc ...  -

Rappel concernant le chapitre précédent :

Vous allez maintenant améliorer la présentation de votre page web à l'aide des propriétés CSS ci-dessous.

1 - Largeurs et hauteurs

width, min-width et max-width fixent une largeur au bloc et sont exprimées en pixels (px) ou en pourcentage (%).
height, min-height et max-height sont utilisées pour fixer une hauteur et sont également exprimées en px ou en % .

Les pourcentages seront utiles pour créer un design qui s'adaptera automatiquement à la résolution d'écran du visiteur.

body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: url("../Images/tux.png") fixed no-repeat center right, url("../Images/fondgristraitrouge.png") fixed repeat-x center;
background-color: #CCCCCC;
opacity: 0.97;
width: 900px;  /* On fixe la largeur du corps de notre page */
}

header, footer
{
width: 900px;   /* Largeur des blocs header et footer */
background-color: #808080;   /* Fond gris foncé commun aux deux blocs */
border: 1px solid black;   /* Bordure largeur 1 pixel, trait continu noir */
}

section
{
width: 900px;   /* Largeur du bloc section */
border: 1px solid blue;   /* Bordure largeur 1 pixel, trait continu bleu */
}

article
{
width: 750px;   /* Largeur du bloc article */
background-color: #FFFFDC;   /* Fond jaune clair */
border: 1px solid green;   /* Bordure largeur 1 pixel, trait continu vert */
}

aside
{
width: 132px;   /* Largeur du bloc aside */
background-color: #FFFA32;   /* Fond jaune foncé */
border: 1px solid red;   /* Bordure largeur 1 pixel, trait continu rouge */
}

p
{
color: maroon;
font-size: 0.8em;
width: 95%;    /* Largeur des paragraphes */
min-width: 400px;
}

2 - Marges intérieures et extérieures

padding ( marge intérieure ) et margin ( marge extérieure ) sont utilisées pour dimensionner les marges

Il faut savoir que tous les blocs possèdent des marges. Il existe deux types de marges :
  • les marges intérieures
  • les marges extérieures

Regardez bien le schéma qui se trouve à la figure suivante.

Liste des variantes possibles de padding et margin :
  • margin-top : marge extérieure en haut
  • margin-bottom : marge extérieure en bas
  • margin-left : marge extérieure à gauche
  • margin-right : marge extérieure à droite
  • padding-top : marge intérieure en haut
  • padding-bottom : marge intérieure en bas
  • padding-left : marge intérieure à gauche
  • padding-right : marge intérieure à droite

Centrer des blocs
Il est tout à fait possible de centrer des blocs. C'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.
Pour centrer, il faut respecter les règles suivantes :
• donnez une largeur au bloc avec la propriété width.
• indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto;.

body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
background: url("../Images/tux.png") fixed no-repeat center right, url("../Images/fondgristraitrouge.png") fixed repeat-x center;
background-color: #CCCCCC;
opacity: 0.97;
width: 900px;
margin: auto;  /* On centre le corps de la page */
}

header
{
margin-bottom: 10px;   /* Marge extérieure basse */
color: white;   /* Couleur du texte */
}

header h1, header h4
{
padding-left: 20px;   /* Marge intérieure gauche */
}

footer
{
margin-top: 10px;   /* Marge extérieure haute */
}

article
{
width: 750px;
background-color: #FFFFDC;
border: 1px solid green;
margin: 3px;   /* Marge extérieure haute, basse, gauche et droite */
}

aside h4
{
padding-left: 15px;   /* Marge intérieure gauche */
}

p
{
color: maroon;
font-size: 0.8em;
width: 95%;
min-width: 400px;
padding-left: 20px;   /* Marge intérieure gauche */
padding-right: 20px;   /* Marge intérieure droite */ }

article h5, article h2
{
margin-left: 10px;    /* Marge extérieure gauche */
margin-right: 10px;    /* Marge extérieure droite */
}

3 - Les dépassements

overflow permet de gérer les dépassements de texte à l'intérieur d'un bloc de taille fixe ( propriétés width et height ).
Elle peut prendre les valeurs suivantes :
• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement
  pour qu'on puisse lire l'ensemble du texte. C'est un peu comme un cadre à l'intérieur de la page.
• auto : c'est le mode « pilote automatique ». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement (il n'en mettra
  que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent.

.introduction
{
color: rgb(183,26,194);
width: 750px;
height: 45px;
overflow: auto;   /* Affichage de l'ascenseur à l'initiative du navigateur */
}

word-wrap permet de couper les textes trop larges

.introduction
{
color: rgb(183,26,194);
width: 750px;
height: 45px;
overflow: auto;
word-wrap: break-word;   /* Les mots trop larges seront coupés et contenus à l'intérieur du bloc paragraphe */
}

4 - Le positionnement flottant

float que l'on a déjà vu avec les images flottantes peut également être appliqué à l'élément aside.

Cette technique présentée ici à titre d'information est encore utilisée par la majorité des sites mais comporte un certain nombre de défauts.
Une meilleure technique, le positionnement inline-block, sera présentée un peu plus loin : je vous encourage à l'utiliser autant que possible.

Nous allons à l'intérieur du bloc section essayer de placer l'élément aside à droite de l'élément article.
Pour cela, nous allons faire flotter l'élément aside à droite et laisser l'élément article se placer automatiquement à sa gauche.

aside
{
width: 132px;
background-color: #FFFA32;
border: 1px solid red;
float: right;   /* Elément aside flottant placé à droite */
}

Il y a un défaut dans le résultat :
• La bordure de l'élément aside touche la bordure de l'élément section. Il manque une marge en haut et à droite.

Pour résoudre ce problème, il faut ajouter une marge extérieure en haut et à droite de notre élément aside

aside
{
width: 132px;
background-color: #FFFA32;
border: 1px solid red;
float: right;
margin-top: 3px;   /* Marge extérieure haute */
margin-right: 3px;   /* Marge extérieure droite */
}

display pour transformer n'importe quel élément de votre page d'un type vers un autre.
Avec cette propriété magique, vous pouvez par exemple imposer aux liens (originellement de type inline) d'apparaître sous forme de blocs :

a
{
display: block;   /* traite la balise de type inline comme un bloc, celle-ci sera donc placée sous l'élément précédent et non à côté */
}

- inline : Les éléments se placent les uns à côté des autres.
- block : Les éléments se placent les uns en-dessous des autres et peuvent être redimensionnés.
- inline-block : Les éléments sont positionnés les uns à côté des autres (comme les inlines) mais peuvent être redimensionnés (comme les blocs).
- none : Les éléments ne sont pas affichés.

Si le positionnement flottant reste, de loin, le mode de positionnement le plus utilisé sur le Web à l'heure actuelle, d'autres techniques existent :
Nous allons transformer en inline-block les deux éléments que nous voulons placer côte à côte : aside et article.

aside
{
width: 132px;
background-color: #FFFA32;
border: 1px solid red;
/* float: right; */
/* margin-top: 3px; */
/* margin-right: 3px; */
display: inline-block;    /* Transforme le bloc aside en élément inline */
}

article
{
width: 750px;
background-color: #FFFFDC;
border: 1px solid green;
margin: 3px;
display: inline-block;    /* Placement de l'élément article sur la même ligne que l'élément aside */
}

Ce n'est pas tout à fait ce qu'on voulait :
- D'une part et c'est normal, les éléments inline-block se positionnent sur une même ligne de base (appelée baseline), en bas.
- D'autre part l'élement aside se trouve placé à gauche.

Pour mettre de nouveau l'élément aside à droite, déplacez celui-ci entre la balise </article> et la balise </section>.

Appliquons également la propriété display sur l'élément nav afin d'obtenir un menu horizontal.

nav li
{
display: inline-block;   /* Alignement horizontal du menu */
margin-right: 15px;   /* Marge extérieure droite */
}

5 - L'alignement vertical

vertical-align permet de modifier l'alignement vertical des éléments. Voici quelques-unes des valeurs possibles pour cette propriété :
• baseline : aligne la base de l'élément avec celle de l'élément parent (par défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).

Il ne nous reste plus qu'à aligner nos éléments aside et section

aside
{
width: 132px;
background-color: #FFFA32;
border: 1px solid red;
/* float: right; */
/* margin-top: 3px; */
/* margin-right: 3px; */
display: inline-block;
vertical-align: top;   /* Alignement en haut */
}

Le positionnement inline-block est parfaitement compris par Internet Explorer à partir de IE8.
Pour les anciennes versions, IE6 et IE7 en particulier, le positionnement inline-block fonctionne… mais uniquement sur les éléments
qui étaient des inline à la base !

Pour régler ce problème, il va falloir créer une seconde feuille de style CSS spéciale pour Internet Explorer 6 et 7.
On va utiliser pour cela un commentaire conditionnel, que nous avions déjà aperçu auparavant, qui ne sera lu que par IE6 et IE7 :

Code HTML :

<head>
<!-- Appel du fichier style_ie.css pour la compatibilité du positionnement inline-block avec IE 6 et 7 -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="../Styles/style_ie.css" /></script>
<![endif]-->
</head>

Dans style_ie.css rajouter simplement le code suivant :

nav li
{
display: inline;
zoom: 1;
}

6 - Le positionnement :

position permet de placer un élément en positon abolue, fixe ou relative avec les valeurs suivantes :
absolute : • Le positionnement absolu : il nous permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.).
fixed : • Le positionnement fixe : identique au positionnement absolu mais, cette fois, l'élément reste toujours visible, même si on descend plus bas dans la page.
relative : • Le positionnement relatif : permet de décaler l'élément par rapport à sa position normale.
static : • Le positionnement statique : permet de revenir à la valeur par défaut.

6.1 - absolu

Utiliser les 4 propriétés suivantes pour placer votre élément en position abolue :
• left : position par rapport à la gauche de la page ;
• right : position par rapport à la droite de la page ;
• top : position par rapport au haut de la page ;
• bottom : position par rapport au bas de la page.

Les valeurs de ces 4 propriétés peuvent s'exprimer en pixels (px) ou en pourcentage (%).

Les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page !
Par ailleurs, si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher.
Dans ce cas, utilisez la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres.

aside
{
width: 132px;
background-color: #FFFA32;
border: 1px solid red;
/* float: right; */
/* margin-top: 3px; */
/* margin-right: 3px; */
display: inline-block;
/* vertical-align: top; */
position: absolute;   /* Déclaration de position absolue */
top: 450px;   /* position absolue par rapport au haut de la page */
}

element_1
{
position: absolute;
right: 30px;
bottom: 10px;
z-index: 1;
}

element_2
{
position: absolute;
right: 60px;
bottom: 15px;
z-index: 2;
}

L'élément ayant la valeur de z-index la plus élevée sera placé par dessus les autres, comme le montre la figure suivante.

6.2 - fixe

Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc reste fixe à sa position,
même si on descend plus bas dans la page.

element
{
position: fixed;
right: 60px;
bottom: 15px;
}

6.3 - relatif

Plus délicat, le positionnement relatif peut vite devenir difficile à utiliser.
Ce positionnement permet d'effectuer des « ajustements » : l'élément est décalé par rapport à sa position initiale.

strong
{
background-color: red;
color: yellow:
position: relative;
left: 55px;
top: 10px;
}

Suite...