Disposer ses éléments

Cette étape sera est importante car elle est la clef de toute construction de page, organisation d'éléments, que ce soit pour le contenu d'un message ou à plus grande échelle d'une page web. Chaque fois que vous aurez en tête des éléments à placer vous aurez toujours cette question qui reviendra : quelle stratégie dois-je adopter pour les disposer selon mon idée ?
Il peut s'agir de disposer deux éléments entre eux, tout comme de découper et coder un design, le raisonnement de base reste le même. Vous aurez à la sortie de cette étape plusieurs outils ou clefs pour disposer des éléments, avec leur avantages et leur inconvénients, ce sera à vous de choisir celui qui vous parait le meilleur selon les circonstances.

Le "Float" simple

"Float" signifie "flottement". Ca ne vous avance pas ? Alors disons qu'il s'agit de faire "flotter" un élément à côté d'un autre, de le rejeter d'un côté ou de l'autre en forçant cette position pour qu'il se place à côté d'un autre élément plutôt qu'en dessous. Et puisqu'un exemple vaut milles paroles, voici ce qu'apporte un "float" simple entre une image et un texte.
Nous avons donc une image, puis un texte. Positionnés naturellement sans effet quelconque, cela donne quelque chose comme ceci :

Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Code:

<img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Ce n'est pas terrible, n'est-ce pas ? C'est là qu'intervient le float que nous allons tout simplement appliquer à l'image par le biais du css. Vous avez normalement vu dans les étapes précédentes que l'on pouvait appliquer du css à une image, pour y mettre une bordure ou la redimensionner, et bien le float va être d'un des attributs que l'on va lui donner.

Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Code:

<img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Et voilà ! C'est quand même plus présentable ainsi, non ? Alors évidemment, j'ai choisis un "float: left", donc flottement à gauche, mais vous pouvez très bien décider de mettre l'image à droite du texte... voire même d'alterner les deux, mettant une images à gauche, puis la suivante à droite, etc...
(Remarque : l'affichage sur forum étant un peu différent, j'ai dû préciser la taille de l'image pour que le float s'effectue).
Alors vous allez me dire que le texte collé à l'image ce n'est pas trop joli, et vous avez entièrement raison ! Mais vous avez ce qu'il faut pour corriger cela, n'est-ce pas ? x)
Allons-y donc pour les marges !

Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Code:

<img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

Notre placement d'image commence à ressembler à quelque chose. Mais il faut encore mettre en forme le texte. Je vais aller assez vite sur ce dernier code car ce n'est qu'un rappel des éléments vus aux étapes précédentes.

Code:

<div style="width: 80%; margin: auto; padding: 5px; background: #d0d0d0; border: 1px solid #acacac; color: #767676; text-align: justify; font-size: 11px;"><img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px; border: 1px solid #ffffff;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>

Code:

<div style="width: 80%; min-height: 100px; margin: auto; padding: 5px; background: #d0d0d0; border: 1px solid #acacac; color: #767676; text-align: justify; font-size: 11px;"><img src="http://img4.hostingpics.net/pics/438043362.jpg" alt="A ta santé Jack" style="width: 100px; height: 100px; float: left; margin-right: 10px; margin-bottom; 10px; border: 1px solid #ffffff;" />Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>

Voilà qui est mieux. Vous pouvez vous servir de cette méthode pour vos descriptions de catégories par exemple.

Le "Float" sur un bloc

Aie aie... Nous arrivons en terrain glissant, non pas parce que c'est difficile, mais parce que c'est à éviter.



Et bien déjà parce que ça existe, et qu'il faut le savoir, mais aussi parce qu'il y aura des cas où vous ne pourrez pas faire autrement que de vous servir de ce float.

Le principe est le même que pour une image, à la différence près que le résultat est plus aléatoire. En effet, selon les navigateurs vos blocs seront l'un à côté de l'autre ou l'un en dessous de l'autre... C'est donc plus difficile à mettre en place pour avoir un bon résultat, c'est la raison pour laquelle il sera préférable d'utiliser une mise en forme en tableau dès que vous en aurez la possibilité.
Bien, essayons tout de même de comprendre le "float" pour un bloc, plus compliqué que celui qu'une image.

1) Que fait l'attribut "float" ?
Pour bien comprendre les dangers de cette utilisation, il faut comprendre ce qu'elle produit sur l'élément. Mettre un "float: left" sur un bloc, revient à lui dire "Toi, tu t'en vas complètement à gauche, le plus que tu peux." Il faut avoir conscience de ce "le plus que tu peux", car si vous avez une page web vierge, votre bloc sera contre la bordure gauche, puisque rien hormis le bord de page ne stoppe votre bloc, et qu'il suit votre ordre d'aller le plus à gauche possible. Là où il y a un problème, c'est que selon les utilisateurs, les pages web ne font pas le même nombre de pixel en largeur... Donc si vous imaginez pouvoir construire un site web avec juste une navigation flottant à gauche et votre corps flottant à droite, ce n'est pas si simple, surtout si vous voulez une largeur fixe pour vos blocs. Dans certains cas ils seront trop éloignés l'un de l'autre, et pour des résolutions plus petites, ils vont se chevaucher, ce qui est encore pire.

Il est donc important de limiter une zone en pixel pour que vos blocs en float se calent à l'intérieur de lui et n'en sortent pas. Ainsi, vous pourrez définir leur largeur en pixel, tout écran aura la même et votre disposition fonctionnera.







Dans les messages des forum, vous n'aurez pas ce problème puisque la zone c'est le message en lui-même, votre bloc même en float ne pourra pas sortir du message. Je vous explique simplement le principe du float pour que vous l'ayez en tête, ou bien que le souvenir de l'avoir lu quelque part revienne lorsque l'on en parlera dans la conception d'une page web x).

2) L'importance des largeurs et des marges
Parce que vous verrez tout cela plus facilement en image qu'avec des descriptifs, je vous présente des schémas de ce qui est possible et de ce qui va décaler vos blocs.







Dans le premier exemple, les tailles des blocs permettent l'alignement horizontal.

Dans le second cas, l'un des blocs, trop large, est automatiquement renvoyé à la ligne car il ne rentre pas dans la zone définie.

Dans le dernier exemple, les largeurs des blocs sont bonnes et pourraient tenir ensemble sur une ligne, mais la marge imposée entre les blocs ajoute des pixels à l'ensemble, et du coup, même si les blocs seuls pourraient tenir sur la ligne, la marge les décale et nous avons le même résultat que dans le cas précédent : le bloc de droite est renvoyé à la ligne.



3) L'Outils magique du "clear: both"
Oui je sais, ce petit bout de code ne vous parle absolument pas, et pour cause : il est rare qu'on l'explique au gens ou qu'on l'aborde dès les premières leçons d'un cours de codage, pourtant il est VITAL dès que l'on bouge des éléments et qu'on les met en place.



Vous savez, dans la Chatbox du forum, lorsque l'on fait un "/clear", tout s'efface, on repart à zéro, et les longues phrases qui déformaient le cadre ou bien les images qui faisaient bugger la discussion disparaissent... Et bien dans une page de code c'est un peu le même principe. Mettre un "clear: both" dans un code css (appliqué à un bloc) signifie : "STOP ! Oublie tout les float à partir de maintenant !"

Voici un exemple plus concret de ce qu'il permet de faire (ou d'éviter) :





Tout à fait ! Mais il y a deux manières de s'en servir, du moins deux que je connaisse et que je pratique, selon les cas.
- Tout d'abord, vous pouvez effectivement mettre le "clear: both" en temps qu'attribut dans votre bloc. Dans le cas de l'exemple précédent sur le schéma, cet attribut serait placé dans le bloc jaune. On aurait alors quelque chose comme :

Code:

<div style="clear: both; background: yellow;....">Contenu du bloc jaune</div>

- Cependant, si dans un page ou un message vous voulez annuler plus simplement le float qu'en mettant l'attribut dans le bloc qui suit, vous pouvez tout aussi bien créer une "div" qui aura pour seule fonction d'annoncer que le float n'est plus à prendre en compte. La division ne se verra pas puisqu'elle n'aura aucun style ni même aucune taille, et sera totalement invisible et ne prendra pas 1 pixel de place. Il y en a d'ailleurs dans le codage interne de votre forum ! Si si x).

Voilà comment ça se présente :

Code:

<div style="clear: both;"></div>

D'ailleurs, pour vous montrer à quel point c'est utile et invisible je vais vous montrer ce que donnerait un extrait de ce cours-ci sans ce petit code. Et oui, il y a des codes cachés dans cette page^^


(screen réalisé sous l'ancien design du site)

Le "clear: both" que j'ai mis sous la forme d'une "div" invisible juste avant mon cadre de code me permet de corriger ce problème et ainsi d'avoir l'affichage que vous avez actuellement sur le cours.

4) Assurer un float pour certains navigateurs
Vous allez de plus en plus m'entendre (enfin... me lire, heureusement pour vos oreilles^^) pester contre certains navigateurs, dont en champion du "je comprends rien aux codes" : Internet Explorer. Il n'est pas le seul à avoir des difficultés sur certains codes, le problème avec lui c'est qu'il en a tellement qu'il en devient détestable lorsque l'on commence à coder un peu. Vous verrez, d'ici quelques temps vous vous souviendrez de ces mots et vous comprendrez mieux pourquoi je m'énerve après lui x).
Concernant le float, certains navigateur (dont IE, forcément...) ont des difficultés à comprenre qu'il faut positionner deux éléments côte à côté et non l'un en dessous de l'autre. Parfois, vous avez beau avoir fait l'addition vingt fois de vos largeurs, tout est censé rentrer, mais ça continue à vous afficher votre premier bloc et en dessous votre second bloc, au lieu de le place à côté. Dans ce cas, il y a une astuce qui permet parfois de corriger ça : bien insister sur le placement des cadres en mettre DEUX float. Vous avez le bloc sencé être à gauche avec un float:left, parfait, mais histoire de bien insister et bien on va ajouter un float:right à celui sencé être à droite.
Ce n'est pas une solution miracle, mais c'est parfois pratique, je me souviens d'avoir eu recours deu x ou trois fois à cette méthode donc je vous l'expose.



Etape précédente

thank's

Merci pour ce tuto' sur le float !

Je comprends enfin à quoi sert cette fourbe de fonction clear e.e Merci beaucoup pour ce tuto !