Bordures, tailles et positions d'éléments

Nous allons maintenant attaquer une grosse partie, les bordures, tailles et positions d'éléments.

Taille d'un block

Pour chaque block, vous pouvez définir une hauteur et une largeur soit en pixels, soit en pourcentage.
Les deux attributs correspondants sont height (hauteur en anglais) et width (largeur en anglais). Rien de très compliquer n'est-ce pas?

Remarque: 100% représente les dimensions de la fenêtre de votre navigateur Internet (ou les dimensions du block où est inclus votre objet) donc si vous redimensionnez votre page, les éléments exprimés en pourcentage seront également redimensionnés.

Les bordures

Il peut être sympa de mettre des bordures à ces blocks, par exemple pour un menu.
Il existe plusieurs types de bordures prédéfinies plus ou moins sympathiques, nous verrons ensuite les différentes possibilités de personnalisation des bordures.

Sélection du type de bordure

Pour mettre une bordure à un élément, il faut utiliser un border-style et lui mettre comme valeur le type de bordure que l'on souhaite:
il existe 9 valeurs possibles:

• solid: Bordure continue, simples traits
• double: Bordure doubles traits
• inset: Bordure 3D avec un effet d'enfoncement dans la page
• outset: Bordure 3D donnant l'illusion que le cadre sort de la page
• groove: Bordure en creux
• ridge: Bordure en saillie
• dotted: Bordure en pointillés Attention, ne fonctionne pas avec toutes les versions d'Internet Explorer
• dashed: Bordure en tirets Attention, ne fonctionne pas avec toutes les versions d'Internet Explorer
• none: Aucune bordure

Observez le rendu de chacune de ces bordures: (Si vous utilisez une ancienne version d'Internet Explorer et que vous voulez voir les effet dashed et dotted, rendez-vous ici)

Solid

Double

Inset

Outset

Groove

Ridge

Dotted

Dashed

Taille d'une bordure

On peut personnaliser un peu ces bordures en modifiant la taille, enfin plutôt la largeur de celles-ci grâce à border-width.
Cette propriété prend une valeur en pixels.
Testez tout cela vous-même, il n'y a aucune difficulté.

Personnalisation de l'architecture des bordures

Il est possible de personnaliser chaque coté de votre bordure. Vous pouvez mettre par exemple une bordure solid en haut, une inset en bas... la syntaxe est simple:
border-nomDeLaBordure: typeDeBordure;
en remplaçant nomDeLaBordure par top, bottom, right, left selon la bordure que vous choisirez et typeDeBordure par un type de bordure parmi ceux vues précédemment.
Vous obtenez alors quatre nouvelles propriétés:

• border-top
• border-bottom
• border-right
• border-left

Encore plus fort

Et oui, encore plus fort, on peut fusionner les deux dernières propriétés (largeur d'une bordure et architecture d'une bordure) pour obtenir une seule propriété permettant de personnaliser la largeur d'un coté de votre bordure.
Pour effectuer ceci, il suffit de reprendre la syntaxe précédente et de lui ajouter -width. Par exemple, pour modifier la taille de la bordure de droite il faut utiliser:
border-right-width

Couleur des bordures

Nous allons passer très vite sur ce point car il est très simple et à déjà été traité en partie.
Utilisez border-color: couleur;
en remplaçant couleur par le nom d'une couleur, le code hexadécimal d'une couleur, ou les composantes de bleu rouge et vert avec rgb comme nous l'avons vu ici

Effet arrondi

Attention, ceci ne fonctionne pas sur Internet Explorer

Il est possible d'arrondir les angles de vos cadres grâce à une propriété css très intéressante et simple à utilisé:
border-radius: angle;
En remplaçant "angle" par la valeur de l'angle qui sera affiché dans les quatre coins de votre cadre. En réalité, il ne s'agit pas vraiment de l'angle mais de la longueur sur laquelle sera appliqué l'arrondie. Cette valeur s'exprime en pixels ou en pourcentages.
C'est cette propriété qui est utilisé sur la page d'accueil de Trivial Webz (mais sur Internet Explorer ça ne marche pas).

Une autre propriété du même genre, -moz-border-radius.
La différence avec la propriété précédente est le nombre de valeurs à placer derrière -moz-border-radius.

• Si vous n'y mettez qu'une seule valeur alors le résultat sera exactement le même qu'avec un border-radius
• Si vous y mettez deux valeurs alors la première correspondra aux angles haut-gauche et bas-droit
• Si vous y mettez quatre valeurs alors vous pouvez personnaliser les quatre angles de votre bordure

Marges intérieures, extérieures.

Par défaut, il n'existe pas de marges. Lorsque vous tracez une bordure autour d'un texte, celui ci se trouvera collé au texte comme ceci :

Ce n'est tout de même pas très esthétique !

Pour pallier à ce problème, on peut créer des marges extérieures ou intérieures selon le cas.
Deux attributs vous permettront de réaliser ceci, margin et padding

Margin

Cet attribut vous renseigne sur la position du texte à l'intérieur du block.
margin: auto vous centrera le texte horizontalement dans le block. margin: 8px créera une marge de 8 pixels tout autour du block, à l'intérieur. margin-top: 5px créera un marge en haut. De la même façon selon le shéma suivant pour margin-bottom: 5px margin-right: 5px margin-left: 5px

Padding

Celui ci fonctionne exactement de la même manière, selon le shéma précédent.

Position d'un block

Après avoir définis les dimensions d'un block, il faut le positionner. Pour cela, plusieurs méthodes.

Tout d'abord, l'attribut position. Il peut prendre 3 valeurs, pour 3 types de positionnement:

• fixed: permet de fixer le block c'est à dire faire en sorte que votre block soit visible et reste à la même position même lorsque vous faites défiler la page. Un exemple un peut plus tard sera plus parlant.
• absolute: il s'agit du positionnement classique, en haut, à droite... de votre page.
• relative: il s'agit d'un déplacement par rapport au positionnement initial de l'élément.

Positionnement absolue

Commençons par le plus simple.
Dans un premier temps il faut indiquer que l'on va utiliser le positionnement absolue de la manière suivante:
position: absolute;

Il faut ensuite positionner le Block. Voici un petit schéma pour vous expliquer le principe:

Il va donc falloir utiliser les composantes top, bottom, right, left pour placer notre block et leur donner une valeur en pixels ou en pourcentage:

Essayez vous-même différentes combinaisons:

Modifier l'exemple

Positionnement fixe

Attention: le positionnement fixe ne fonctionne pas pour toutes les versions d'Internet Explorer.

Le positionnement fixe peut être utile pour laisser un élément toujours visible sur votre page comme par exemple un menu fixe toujours visible lorsque que la page défile. Il existe tout de même d'autres solutions compatibles avec Internet Explorer pour obtenir ce type d'effet, notamment grâce à overflow.

De la même manière que précédemment, il faut indiquer que l'on va utiliser le positionnement fixe puis placer le block avec les composantes top, bottom, right et left.

Modifier l'exemple

Positionnement relatif

Le positionnement relatif est certainement le plus complexe. Il permet de placer un objet par rapport à sa position d'origine. Par exemple la position des acronymes sur trivial webz utilisent le positionnement relatif (pas uniquement le positionnement relatif): à l'origine, l'acronyme s'affiche à la suite du texte mais grâce au positionnement relatif, l'acronyme apparaît au dessus du texte (Si vous souhaitez regarder les acronymes personnalisés, c'est ici).
Regardez ce schéma:

Voyez donc la différence entre le positionnement absolue et relatif, le positionnement absolue positionne l'objet à partir du coin supérieur gauche du block dans lequel il est contenu alors que le positionnement relatif positionne l'objet à partir de sa position initiale.

Passons à la mise en oeuvre, comme précédemment, il faut mettre la ligne position: relative; puis indiquer les translations de l'objets à effectuer avec top, bottom, right, left de la manière suivante:

Modifier l'exemple