position: absolute barré dans Chrome/Matched CSS Rules

Le
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.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #24266341
Le 20/02/12 16:26, Une Bévue a écrit :
poition: absolute



potion ?
poisson ?
potiron ?

ça marcherait-y pas mieux ?

--
Stéphane Moriaux avec/with iMac-intel
SAM
Le #24266331
Le 20/02/12 16:26, Une Bévue a écrit :

#search_div {
positon:absolute;
top:60px;
left:0px;




ha? même avec positon ça marche pas ?

... suppositoire ... pit-être ?

--
Stéphane Moriaux avec/with iMac-intel
Olivier Miakinen
Le #24266441
Le 20/02/2012 18:41, SAM avait écrit :

poition: absolute


potion ?
poisson ?
potiron ?

ça marcherait-y pas mieux ?




Puis, le 20/02/2012 18:46, il a ajouté :

#search_div {
positon:absolute;
top:60px;
left:0px;



ha? même avec positon ça marche pas ?

... suppositoire ... pit-être ?




Hahaha ! Merci pour cet éclat de rire ! Heureusement que je n'étais
pas en train de boire un café, mon clavier aurait morflé.

Bon, sérieusement, si c'était un copier-coller du vrai code CSS, cela
peut sans doute expliquer la présence du trinagle jaune...
Une Bévue
Le #24266431
Le 20/02/2012 18:46, SAM a écrit :
ha? même avec positon ça marche pas ?


dans le js il y avait bien une typo...
depuis que j'ai corrigé, je n'ai plus la même et la bonne largeur...
en tk merci pour avoir remarqué cette eurreur de frappe !
mais est-ce utile de mettre #position="absolute" dans le js quand ça
l'est déjà dans le css ???
Une Bévue
Le #24266511
Le 20/02/2012 19:00, Une Bévue a écrit :
depuis que j'ai corrigé, je n'ai plus la même et la bonne largeur...


non, c'est bon ;-)
SAM
Le #24266801
Le 20/02/12 19:00, Une Bévue a écrit :

est-ce utile de mettre #position="absolute" dans le js quand ça
l'est déjà dans le css ???



Heu ... à en croire les bibes données du code ...
il semble que typo en CSS aussi, non ?

Sinon, en effet, ce n'est pas la peine de répéter les déclarations
statiques (css) avec les mêmes en JS. (s'il n'y a pas eu d’autres
facéties en JS entretemps)

--
Stéphane Moriaux avec/with iMac-intel
SAM
Le #24266791
Le 20/02/12 19:00, Olivier Miakinen a écrit :
Le 20/02/2012 18:41, SAM avait écrit :

poition: absolute



... suppositoire ... pit-être ?



Hahaha ! Merci pour cet éclat de rire ! Heureusement que je n'étais
pas en train de boire un café, mon clavier aurait morflé.



Merci merci n'en jetez plus ! ;-)

Bon, sérieusement, si c'était un copier-coller du vrai code CSS, cela
peut sans doute expliquer la présence du trinagle jaune...



il semblerait que la frénésie typesque de notre ami ait aussi sévi dans
son "vrai" code, ce dont on ne pouvait douter après cette démonstration.


une typo dans son code perso ... pas toujours évident ...
--
Stéphane Moriaux avec/with iMac-intel
SAM
Le #24266921
Le 20/02/12 16:26, Une Bévue a écrit :


function search_switch(){
visibilty=document.getElementById('search_div').style.display;

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



beurk beurk beurk !
qu'est-ce que cette variable 'visibility' en global ?

function search_switch(){
var x = document.getElementById('search_div').style,
v = x.display;
x.display = (v=='none')? 'inline' : 'none';
}


ou, en moins performant :

function search_switch(){
var x = document.getElementById('search_div').style;
x.display = (x.display=='none')? 'inline' : 'none';
}



Pour le reste, j'ai rien compris ...
si search_div contient navbartop, les 2 doivent apparaitre/disparaitre

au cas où ce seraient des calques indépendants (successifs se recouvrant
par exemple), si on veut que ça ne bouge pas de place, à mon sens le
mieux est de jouer sur visibility au lieu de display

--
Stéphane Moriaux avec/with iMac-intel
SAM
Le #24266911
Le 20/02/12 20:58, SAM a écrit :

Heu ... à en croire les bibes données du code ...



les *bribes* de codes

--
Stéphane Moriaux avec/with iMac-intel
Une Bévue
Le #24268941
Le 20/02/2012 21:07, SAM a écrit :
qu'est-ce que cette variable 'visibility' en global ?



rien ...

function search_switch(){
var x = document.getElementById('search_div').style,
v = x.display;
x.display = (v=='none')? 'inline' : 'none';
}




corrigé en :
window.onload=setup;
var sty;
function setup(){
sty=document.getElementById('search_div').style;
sty.display='none';
document.getElementById('search_button').onclick=search_switch;
}
function search_switch(){
sty.display=(sty.display=='none')? 'inline' : 'none';
}

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

merci bien de me l'avoir fait remarquer.
Publicité
Poster une réponse
Anonyme