Dans le processus de conception de pages HTML, nous rencontrons souvent des problèmes causés par des éléments de formulaire recouvrant des éléments de style. La figure 1 en est un exemple typique. Ne sous-estimez pas ce problème apparemment « de bas niveau ». Des problèmes similaires ne sont pas rares, même sur certains sites Web plus importants. Cet article explore la cause profonde de ce problème et propose un remède. La raison pour laquelle je parle de remède plutôt que de solution permanente est que les deux géants Microsoft et NetScape n'ont pas encore de contre-mesures.
1. Afficher la priorité des éléments HTML
Les éléments de formulaire couramment utilisés en HTML incluent : la zone de texte (TEXTAREA), la zone de liste (SELECT), la zone de saisie de texte (type INPUT = texte), la zone de saisie du mot de passe (type INPUT = mot de passe), la zone de saisie radio (type INPUT = radio), cocher la case de saisie (type INPUT = case à cocher), etc. Les éléments non-formulaires courants incluent : la balise de lien (A), la balise DIV, la balise SPAN, la balise TABLE, etc. La raison fondamentale pour laquelle les éléments de formulaire remplacent les éléments de style réside dans les règles de priorité d'affichage par défaut des éléments HTML. Par exemple : les éléments de cadre ont toujours la priorité sur les autres éléments HTML et sont donc toujours affichés au premier plan ; éléments de forme.
Tous ces éléments HTML peuvent être divisés en deux catégories selon leurs exigences d'affichage, à savoir les éléments avec fenêtre et les éléments sans fenêtre. Les éléments fenêtrés incluent : les éléments SELECT, les éléments OBJECT, les plug-ins et les éléments IFRAME dans IE 5.01 et les versions antérieures. Les éléments sans fenêtre incluent : la plupart des éléments HTML ordinaires tels que les liens et les balises TABLE, la plupart des éléments de formulaire à l'exception des éléments SELECT et les éléments IFRAME dans NS6+/IE 5.5 et versions ultérieures. Les problèmes abordés dans cet article sont principalement liés aux éléments HTML fenêtrés. Le nœud du problème est que le système d'exploitation affiche toujours par défaut les éléments fenêtrés devant les éléments sans fenêtre.
2. Type de navigateur et priorité d'affichage
Selon le type de navigateur, l'ordre d'affichage des éléments HTML est également différent, ce qui se résume ainsi :
⑴Netscape/Mozilla
Dans les versions antérieures à NS Browser 6.0, les éléments de formulaire avaient toujours une priorité plus élevée que les autres éléments HTML. Mais dans le navigateur NS 6+, l'ordre d'affichage des éléments IFRAME et de tous les éléments du formulaire est soit déterminé par la valeur de l'attribut z-index du CSS, soit par l'ordre dans lequel ils apparaissent dans la page HTML, à l'exception du SELECT élément.
⑵Internet Explorer
Dans le dernier navigateur IE (6.0), l'élément IFRAME et tous les éléments du formulaire déterminent la priorité d'affichage en fonction de la valeur de l'attribut z-index ou de l'ordre dans lequel ils apparaissent dans la page HTML, à l'exception de l'élément SELECT.
⑶ Opéra
Dans les derniers navigateurs Opera (7.10*), tous les éléments de formulaire, y compris SELECT, sont affichés en priorité en fonction de l'attribut z-index ou de l'ordre dans lequel ils apparaissent dans la page HTML. Cependant, le dernier navigateur Opera n'affiche pas IFRAME comme élément sans fenêtre. IFRAME est considéré comme un élément fenêtré et a priorité sur tous les éléments sans fenêtre dans l'ordre d'affichage.
3. Attribut CSS z-index
Nous savons que l'attribut z-index de CSS peut être utilisé pour contrôler l'ordre de superposition de n'importe quel élément HTML lorsqu'il est affiché. Lorsque plusieurs éléments HTML se chevauchent dans le même espace, l'élément avec une valeur d'index z plus grande écrasera l'élément avec une valeur d'index z plus petite.
Mais la valeur de l'attribut z-index n'est pas omnipotente. Comme mentionné précédemment, les éléments fenêtrés sont toujours affichés devant les éléments sans fenêtre, et la valeur de l'attribut z-index ne joue un rôle décisif qu'entre les éléments du même type. Pour le dire au sens figuré, les éléments avec et sans fenêtre reviennent à dessiner sur deux canevas différents dans la même fenêtre de navigateur. Les deux types d'éléments sont autonomes et leurs attributs z-index sont uniquement relatifs aux autres éléments du même canevas. coup de pied dans.
4. Remède
En ce qui concerne les navigateurs actuels, un remède plus efficace est le suivant : lorsqu'un élément sans fenêtre doit être recouvert par un élément fenêtre, utilisez un script pour masquer dynamiquement l'élément fenêtre. Voici un exemple complet :
<html><tête>
<type de style=texte/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px noir uni;
z-index : 100 ; visibilité : cachée ;}
#lb_1{position :absolue;gauche:10px;haut:40px;
</style>
<type de script=text/javascript>
var estActive = faux ;
fonction showMenu(){
estActive = vrai ;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
fonction cacherMenu(){
estActive = faux ;
setTimeout('hide()',100);
}
fonction cacher(){
si(!estActive){
document.getElementById(subMenus).style.visibility = caché;
document.getElementById(lb_1).style.visibility=visible;
}
}
fonction setStyle(menuItem){
estActive = vrai ;
menuItem.style.backgroundColor = Gris ;
menuItem.style.color = #FFFFFF
}
fonction setDefault(menuItem){
estActive = faux ;
menuItem.style.backgroundColor = ;
menuItem.style.color =
cacherMenu();
}
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>Menu CSS</div>
<div id=subMenus>
<div id=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >Élément de menu un</div>
<!--Quatre éléments de menu au total-->
</div><P>
<identifiant de sélection=lb_1 nom=lb_1>
<option value=-1/>Sélectionner la liste
<!--Trois options-->
</sélectionner>
</div>
</body></html>
La partie <STYLE> de la page définit trois styles, qui sont utilisés respectivement pour les barres de menus, les éléments de menu et les listes de sélection. La définition du style garantit que les zones d'affichage des menus et des listes de sélection se chevauchent. La section <BODY> contient des définitions pour les menus et les listes de sélection <SELECT>. Lorsque la souris passe sur la barre de menu, la fonction JavaScript showMenu est exécutée pour afficher le menu et masquer la liste de sélection SELECT. Après le départ de la souris, la fonction hideMnu masque le menu et restaure la liste de sélection. Les fonctions JavaScript restantes sont principalement utilisées pour simuler les actions de menu. Lorsque la souris passe sur un élément de menu, le menu est affiché avec une luminosité élevée (fonction setStyle), et lorsque la souris quitte l'élément de menu, elle est restaurée au mode d'affichage par défaut. (fonction setDefault). L'effet de fonctionnement de la page est illustré dans la figure 2. Commentez l'instruction document.getElementById(lb_1).style.visibility=hidden dans la fonction showMenu pour voir l'effet dans la figure 1.
<description>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
En bref, la cause première du remplacement des éléments de formulaire par les éléments de style réside dans les règles de priorité d'affichage par défaut des éléments HTML. Les remèdes présentés dans cet article sont effectivement efficaces, mais si vous ne souhaitez vraiment pas utiliser cette méthode, alors vous devez envisager de modifier la mise en page pour éviter de chevaucher la zone d'affichage des éléments de formulaire et des éléments de style.