8 - Création d'une interface

Nous traiterons ici de la façon de placer précisement et définitivement(au pixel près) les éléments de votre page.

Jusqu'à présent, nous avons travaillé avec des éléments placés uniquement en fonction de :

• Leur nature display : block, inline-block ou inline.
• Leur taille via height et width.
• Leur marge externe et interne : margin et padding.
• La propriété float éventuelle.

Nous allons voir aujourd'hui comment déplacer les éléments affichés où vous voulez en donnant directement et de façon fixe les coordonnées en x et en y.

Voici les axes de coordonnées utilisés :

L'avantage est que le placement des éléments est assez intuitif :

• Plus x est grand, plus on est à droite
• Plus y est grand, plus on est en bas

Le désavantage est qu'on ne gère pas réellement la taille des écrans.

Nous allons ici créer une interface pour un jeu où il faudra détecter les animaux féroces.

1 - Première version sans utiliser position

Nous avons 9 animaux, féroces ou non. Nous voudrions pouvoir les afficher selon un regroupement en 3x3 sans utiliation de tableau.

Commençons par voir ce que cela donne en plaçant simplement les images :

ANIMAUX FEROCES

On peut voir que les éléments sont tous sauf bien alignés. De plus, si vous modifiez la taille de la fenêtre, vous pourrez constatez que les images changent de place. Pourquoi ?

Comme nous affichons des images, elles sont donc placées les unes derrière les autres.

Voici le code :

Comme nous voudrions des cases 'images' de taille identique, nous allons placer chaque image dans des balises div, elles-mêmes contenues dans une div nommée "conteneur".

Voici le code :

On obtient alors ceci, ce qui n'est pas beaucoup mieux pour l'instant :

ANIMAUX FEROCES v2

01° Téléchargez le fichier HTML, le fichier CSS et les 9 images. Placez le tout dans un même dossier.

02° Lancer à nouveau l'ensemble avec cette fois les modifications faites au css. Vous devriez avoir quelque chose qui ressemble à cela :

ANIMAUX FEROCES v3

03° Ouvrir le fichier css dasn Notepad++. Vous pourrez constater que nous y avons inséré quelques régles.

Explications :

On commence par modifier les marges de la balise qui va contenir l'ensemble.

• On modifie le style de la div d'id "conteneur" de façon à mettre à zéro sa bordure externe (margin) et interne (padding).
• On rajoute une bordure noire d'un pixel de façon à la visualiser.

Nous allons maintenant modifier la façon dont les balises div contenant les photos vont s'afficher :

• On commence par demander à changer l'affichage : on désire que ces div deviennent des inline-block.
• On impose une marge externe (margin: 0px) et interne (padding: 0px) de 0 pixel de façon à ne gérer la largeur réelle qu'avec width.
• On impose alors à la div d'avoir une largeur et une hauteur de 300 pixels. On entoure avec une bordure pour voir clairement la limite de la div.

Erreur typique : une fois sur deux lorsqu'on m'appele sur ce type d'activité, c'est que l'affichage ne gère pas bien les largeurs. D'où vient souvent problème ? Du fait que vous laissez un espace entre les valeurs et le px qui indique l'unité. Ainsi 300 px ne sera pas compris correctement, là où 300px fonctionnent. Attention aux espaces donc.

Reste la gestion CSS des images. On les transforme en balise block (elles sont initialement en inline-block) et on supprime les marges internes et externes.

Comme vous pouvez le voir, c'est mieux mais nous n'avons pas 3x3 images.

04° Rajouter dans votre code HTML quelques balises br (entre les balises div) pour passer à la ligne de façon à avoir 3 images par lignes.

Relancez. C'est mieux mais l'image n'est toujours pas centrée dans la div. Comment faire ?

05° Pour centrer horizontalement, c'est simple, il suffit d'utiliser une marge extérieur automatique : on passe donc de margin: 0px à margin : auto.

ANIMAUX FEROCES v4

C'est bien beau, mais ca reste encore mal centré verticalement !

06° Modifier le code CSS des images pour décaler l'image de 50% de la taille de la div.

ANIMAUX FEROCES v5

Bon, toujours pas top car on sort carrèment l'image de la place disponible. Mais on a bien le début de l'image à 50% de la hauteur de la div.

Il nous reste à remonter les images. De combien ? Et bien, nous aimerions que la moitié de la div corresponde à la moitié de l'image. Il faudrait donc remonter l'image de 50% de sa propre hauteur. Ca tombe bien, il existe une propriété qui permet de faire cela : transform: translateY(-50%).

07° Modifiez une dernière fois le CSS de façon à obtenir l'affichage ci-dessous.

ANIMAUX FEROCES v6

08° Réduire la taille de l'écran. Est-ce que cela fonctionne encore ?

Pour imposer la taille du conteneur et éviter le retour à la ligne, il suffit de le signaler via le CSS :.

09° Tester. Cette fois, on gardera la bonne disposition même si l'écran devient trop petit.

Néanmoins, cela ne suprime pas les effets du site infoforall vis à vis des tailles d'écran mais chez vous, cela ne devrait pas poser de problème.

ANIMAUX FEROCES v7

Ce n'est pas si difficile à comprendre une fois qu'on a compris l'intérêt de chaque ligne de code mais il faut avouer qu'il faut penser à beaucoup de choses.

Nous allons voir maintenant des méthodes de placement plus directes.

2- Avec position: relative

Nous allons voir maintenant une méthode plus directe et préicse pour positonner les éléments dans un élément conteneur.

Imaginons que nous voulions obtenir ceci : un affichage de 800 pixels sur 650 pixels (un carreau correspondant à 50 pixels).

Ainsi le carré bleu commence en (x=50;y=50). Le carré orange commence en (x=300;y=50)...

Avec la gestion habituelle, il est possible de les placer exactement à ses endroits mais cela va demander un certain temps de réflexion (gestion des marges ...).

Nous allons voir comment faire cela plus rapidement avec position: relative.

Le 'relative' veut dire qu'on va pouvoir modifier la position de l'élément relativement à la position 'normale' qu'aurait l'élément.

Voici la partie HTML :

Regardons ce que donne le positionnement 'normal' dans une div de 800px sur 650px :

Et voici un début de code CSS :

On commence avec la div-conteneur :

Je définis une balise div-conteneur en lui donnant la bonne largeur (800px) et hauteur (650px).

On passe maintenant au CSS commun des div de couleurs contenues dans la div-conteneur. Nous créons des carrés de 150px de côté :

Nous pouvons maintenant décrire le CSS de chaque div de couleur, une à une :

On précise que cette balise aura un positionnement relatif par rapport à sa position normale.

On donne ensuite en pixels le décalage à effectuer à la boite à l'aide de top et left.

Nous aurions également pu donner d'autres points de coordonnées : right pour le bord droit et bottom pour le bord bas. Attention néanmoins : si vous imposez left et right, vous ne pouvez pas en même temps imposer width puisqu'on trouve la largeur en fonction de la position du bord gauche et du bord droit !

Nous aurions également pu donner des valeurs négatives.

Ce sont les autres balises div colorées.

Voici le résultat pour l'instant :

Voici une image qui vous permettra de comprendre pourquoi les balises sont positionnées ainsi : on y trace un point corresopndant la position 'normale" du coin supérieure gauche et le trajet jusqu'à la position actuelle.

Comme on le voit, positionner un ou deux éléments de cette façon est possible mais le faire pour la totalité est plutôt délicat. En effet, nous devons d'abord avoir une idée précise de la position de l'élément AVANT modification pour ensuite modifier sa position... Ce n'est pas très intuitif puisqu'il n'existe par d'origine commune de coordonnées.

C'est normal, nous aurions dû utiliser une autre valeur pour cette propriété : position: absolute.

10° Positionner néanmoins les trois premiers carrés correctement avec position: relative par rapport à l'interface voulue. Pour rappel :

3- Avec position: absolute

Cette fois, nous allons pouvoir placer les éléments par rapport à une orgine de coordonnées commune à toutes nos balises.

Une subtilité néanmoins : si la div-conteneur ne possède pas elle-même de propriété position, l'élément possèdant une propriété position: absolute va se positionner par rapport à l'origine de la page elle-même ! Le point (0,0) serait alors le coin supérieur gauche de la page elle-même. Il faut faire extrêmement attention à cette subtilité.

Regardons un code HTML et CSS utilisant ce principe :

Et pour le CSS :

11° Cette div possède-t-elle une propriété 'position' ? Dans la mesure où on ne précise rien, comment va-t-elle être positionnée ?

On retrouve ensuite les données communes des div-carrés colorés :

Regardons maintenant les div colorées : les carrés bleu, vert et rouge sont déclarées en position absolue : les indications données sur le coin supérieur gauche va donc correspondre à leurs coordonnées finales dans la div-conteneur. Cette fois, il ne s'agit plus d'un décalage par rapport à leur postion 'normale', mais d'un décalage par rapport à l'origine de la div-conteneur.

Le résultat en image :

12° Vérifier que les coordonnées des trois div bleu, vert et rouge soient bien cohérentes avec le code. Modifier quelques coordonnées pour bien comprendre le principe.

13° Modifier le CSS en supprimant la référence postion: relative de la div-conteneur. Que constatez-vous ?

14° Modifier maintenant le CSS pour obtenir l'interface voulue depuis le début, à savoir :

4- Les autres valeurs possibles de position

Nous allons voir rapidement deux autres valeurs possibles :

Premièrement, postion: static veut dire que la div ne possède pas en réalité de valeur de position : elle est gérée automatiquement par le navigateur. Pourquoi l'utiliser au lieu de ne rien préciser ? Il est possible que le CSS impose une valeur à position à un ensemble de div via une classe et que vous vouliez uniquement placer certaines d'entre elles de façon "automatique". Attention, une valeur de ce type sur une balise conteneur veut dire qu'elle ne possède pas de propriété position. Attention pour les autres balises contenues dans celle-ci.

Deuxième nouvelle valeur : postion: fixed. Cette fois, vous fixez la balise sur l'écran et elle apparaitra toujours au même endroit même en bougeant la molette de la souris et en faisant dérouler la page. C'est pratique pour les menus de sélections ou autre.

Voici pour le positionnement précis de vos éléments sur vos interfaces graphiques.