Le plus gros problème lors de l'utilisation de calques dans une page centrée est le positionnement du calque. Lorsque la résolution d'affichage est modifiée, la position du calque par rapport aux autres éléments centrés changera. Cet article présente des moyens d'éviter que les calques ne soient mal alignés par rapport aux autres éléments centrés.
Positionnement absolu et positionnement relatif
des calques Code de positionnement absolu pour les calques :
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
Code de positionnement relatif du calque :
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
Dans la page centrée, insérez le code du calque de positionnement relatif, et la position du calque sera au centre de la page. Mais il est devenu inamovible et peu pratique à utiliser.
Insérer un code de positionnement absolu Lorsque gauche et haut contiennent des valeurs positives et négatives, le calque ne peut pas être centré. Lorsque les attributs gauche et supérieur sont effacés, le calque peut être centré et il n'y a aucun désalignement par rapport aux autres éléments centrés sur la page.
La différence entre les calques de dessin et les calques d'insertion
. Utilisation des calques de dessin :
Dans une page centrée, utilisez le code qui restitue le calque :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<tête>
<méta http-equiv="Content-Type" content="text/html; charset=gb2312">
<titre>div</titre>
</tête>
<corps>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</corps>
</html>
Utiliser le calque d'insertion :
Dans une page centrée, utilisez le code du calque d'insertion :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<tête>
<méta http-equiv="Content-Type" content="text/html; charset=gb2312">
<titre>div2</titre>
</tête>
<corps>
<div align="centre">
<div id="Layer1" style="position:absolute; largeur:200px; hauteur:115px; z-index:1"></div>
</div>
</corps>
</html>
Étant donné que le code généré à l'aide du « calque de dessin » n'est pas inclus dans le code de centrage, afin de garantir que le calque n'est pas mal aligné par rapport aux autres éléments de la page centrée, un calque d'insertion doit être utilisé.
Dans les pages centrées, deux méthodes sont couramment utilisées pour garantir qu'il n'y a pas de désalignement des calques par rapport aux autres éléments centrés.
Utilisation du calque d'insertion
1. Dans une page centrée, placez le point d'insertion dans le document. Dans l'exemple, placez le point d'insertion dans le tableau.
2. Sélectionnez le menu "Insertion"/"Couche".
3.Un calque est inséré dans le document. Dans l'exemple, un calque est inséré dans le tableau. Lorsqu'il est testé dans le navigateur IE et que la résolution est modifiée, le contenu de la couche ne sera pas mal aligné par rapport aux autres éléments centrés.
Vérifiez les propriétés de ce calque dans le panneau des propriétés. Ce calque inséré efface les valeurs "gauche" et "haut".
Cette méthode est souvent utilisée pour créer des menus contextuels.
Utilisation de calques imbriqués
Un calque imbriqué est un calque dont le code est contenu dans un autre calque.
Avant d'utiliser des calques imbriqués, vous devez d'abord définir certains paramètres pour le calque. Sélectionnez le menu "Edition"/"Préférences", et dans la boîte de dialogue "Préférences", sélectionnez "Compatibilité Netscape 4 : Taille fixe lors de l'insertion de calques" afin que les calques imbriqués créés soient compatibles avec le navigateur Netscape 4. Et cochez "Imbrication : Utiliser l'imbrication si en couche".
Ouvrez le panneau Calques et décochez "Empêcher le chevauchement".
Calque imbriqué :
insérez un tableau dans une page centrée et insérez un calque dans le tableau. Ce calque ne sera pas mal aligné par rapport au tableau. Dans ce calque, utilisez la commande "Insérer"/"Calque" pour insérer un sous-calque (calque imbriqué). Quelle que soit la façon dont vous déplacez ce sous-calque sur la page, sa position ne sera pas déplacée par rapport aux autres éléments centrés.
Dans un calque inséré, vous pouvez insérer plusieurs calques imbriqués, puis déplacer les calques imbriqués vers les emplacements requis, afin de pouvoir utiliser les calques à votre guise sur la page centrée.
Conclusion : centrez la page, créez des menus contextuels, utilisez la commande Insérer/Couche ; utilisez la disposition des calques et placez le contenu dans des calques, utilisez des calques imbriqués.