MANIPULATION DES BLOCS


Nous avons vu quelques propriétés de la balise div qui détermine un bloc de texte. Voilà quelques données supplémentaires permettant d'utiliser les blocs de manière plus élaborée.


MARGES ET POSITION

Le bloc peut être positionné grâce à des marges (top, bottom, left, right). La référence sur laquelle s'appliqueront ces marges sera définie par la commande position.

La commande position peut adopter différentes valeurs:

-relative: le bloc se positionne dans le flux de la page (à la suite)

-absolute: le bloc se positionne par rapport au document (haut et gauche)

-fixed: le bloc se positionne par rapport à la fenêtre du navigateur (haut et gauche)

Ce bloc par exemple va se situer dans le flux à la suite de ce qui le précède

<div style="
position:relative;
top:15px;
left:50px;
width:80px;
height:20px;
background-color:yellow;">
</div>

Le cadre ci-dessous en position absolute ci-dessous se placera à 15 px du haut du document et à 50 px de la gauche. Si on descend dans le document avec l'ascenseur il disparaît de l'écran en haut.

<div style="
position:absolute;
top:15px;
left:50px;
width:80px;
height:20px;
background-color:yellow;">
</div>

Si on remplace absolute par fixed pour le même cadre, et si on descend dans le document avec l'ascenseur, il ne bouge pas de place)

Traquenard Attention, les commandes sont directement par exemple top et non pas margin-top, qui ne fontionne pas.


SUPERPOSITION DES BLOCS

L'ordre de superposition des blocs est indiquée par la commande z-index. Celui qui a le plus élevé se trouvera au dessus. Par exemple:

<div style="
z-index:2
;position:relative;
margin-right:auto;
margin-left:auto;
width:200px;
height:70px;
background-color:green;">
</div>

<div style="
z-index:1;
position:relative;
top:-10px;
left:80px;
margin-right:auto;
margin-left:auto; width:80px;
height:30px;background-color:blue;"></div>





Traquenard Si on ne spécifie aucune position (relative ou absolute ou fixed), ça ne fonctionnera pas.

Traquenard Si l'un des cadres se trouve inclus dans l'autre (sur le plan programmatique), le z-index n'agit pas, le cadre à l'intérieur sera toujours au dessus. Par exemple:

<div style="z-index:2
position:relative
margin-right:auto
margin-left:auto
width:200px
height:70px
background-color:green">

<div style="z-index:1
position:relative
top:55px
left:80px
margin-right:auto
margin-left:auto
width:80px
height:30px
background-color:blue">
</div>

</div>








COINS ARRONDIS

On peut obtenir des coins arrondis esthétiques avec la commande radius:

<div style=
"margin-right:auto<>
margin-left:auto<>
border-radius:8px<>
width:100px<>
height:24px<>
background-color:#B18904<>">
</div>






Traquenard Pas sûr que la commande radius passe sur tous les smartphones et tablettes, à vérifier et voir le résultat en cas d'échec

Astuce On peut réaliser des coins plus ou moins élaborés, mais qui fonctionnent toujours, en empilant des cadres minimals de 1px de hauteur. De cette manière aussi, on peut réaliser toute figure géométrique (si on a le courage de s'y livrer).

coins bruts:

<div style= "margin-right:auto
margin-left:auto
width:100px
height:24px
background-color:#B18904">
</div>






coins légèrement arrondis:

<div style= "margin-right:auto
margin-left:auto
width:96px
height:1px
background-color:#B18904">
</div>

<div style= "margin-right:auto
margin-left:auto
width:98px
height:1px
background-color:#B18904">
</div>

<div style= "margin-right:auto
margin-left:auto
width:100px
height:20px
background-color:#B18904">
</div>

<div style= "margin-right:auto
margin-left:auto
width:98px
height:1px
background-color:#B18904">
</div>

<div style= "margin-right:auto
margin-left:auto
width:96px
height:1px
background-color:#B18904">
</div>






Il existe de très nombreuses autres options et possibilités liées à la manipulation des cadres. On les trouvera facilement expliquées en détail sur de nombreux sites internet.

Traquenard Le graphisme des pages obtenues par l'utilisation de position absolute ou fixed s'adapte souvent mal aux tablettes et smartphones. Et il faut vérifier aussi que ces commandes passent sur les mobiles, vérifier le résultat obtenu

SOMMAIRE     SUITE