Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP position: absolute barré dans Chrome/Matched CSS Rules

position: absolute barré dans Chrome/Matched CSS Rules

12 réponses
Avatar
Une Bévue
j'ai une form dans une div dont les css sont en position absolute avec
un z-index à 5.
dans Chrome, outils de dev, je vois que "poition: absolute" est barré
avec un trinagle jaune ayant un point d'exclamation.
cette div n'apparaît pas en "overlay" au dessus de la div qui vient
ensuite dans le flux html, pourquoi.

grosso modo le (x)html :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
...
<body style="direction: ltr;">
<div id="header">
<img id="search_button" src="Images/loupe.png" alt="" />
<h2>Carnet d'adresses d'Yvon Thoraval</h2>
</div>
<div id="search_div">
<form id="search_form" name="search_form" action="search.php"
method="post">
...
<div id="navbartop">
<ul id="navlisttop">
<li>
<a href="javascript:void(0);" class="current">Recherche</a>
...

donc la div "search_div" apparaît entre les divs "header" et "navbartop"
(elle pous "navbartop" vers le bas de la fenêtr e)
alors que je souhaiterait avoir "navbartop" qui ne bouge pas et
"search_div" au dessus, ce que j'appelle en overlay, avec son z-index à 5.
le css :
#search_div {
positon:absolute;
top:60px;
left:0px;

le js qui permet de voir/cacher cette div :
window.onload=setup;
function setup(){
document.getElementById('search_div').style.display='none';
document.getElementById('search_button').onclick=search_switch;
}
function search_switch(){
visibilty=document.getElementById('search_div').style.display;

document.getElementById('search_div').style.display=(visibilty=='none')?
'inline' : 'none';
}

le 'search_button' est dans la div "header".

c'est mon carnet d'adresses donc ce n'est pas en ligne.
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 21/02/12 12:23, Une Bévue a écrit :

corrigé en :
window.onload=setup;
var sty;



pour le fun :

function setup(){
sty=document.getElementById('search_div').style;
search_switch();
document.getElementById('search_button').onclick=search_switch;
}
function search_switch(){
sty.display=(sty.display=='')? 'none' : '';
}

il y avait bien --AUSSI-- une typo dans le css...

merci bien de me l'avoir fait remarquer.



et tout en finesse et délicatesse comme à l’accoutumée ! ;-)

Pour ce fun-ci, dans la FdS,
le 'search_div' sera en display 'inline' ou tout simplement omis.
(ce qui ne résout pas le mélange des doigts sur touches p,o,s,i,t,n)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Une Bévue
Le 21/02/2012 16:34, SAM a écrit :
Le 21/02/12 12:23, Une Bévue a écrit :

corrigé en :
window.onload=setup;
var sty;



pour le fun :

function setup(){
sty=document.getElementById('search_div').style;
search_switch();
document.getElementById('search_button').onclick=search_switch;
}
function search_switch(){
sty.display=(sty.display=='')? 'none' : '';
}


ouais, d'accord.
1 2