Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

position: absolute barré dans Chrome/Matched CSS Rules

77 views
Skip to first unread message

Une Bévue

unread,
Feb 20, 2012, 10:26:38 AM2/20/12
to
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.

SAM

unread,
Feb 20, 2012, 12:41:00 PM2/20/12
to
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

unread,
Feb 20, 2012, 12:46:20 PM2/20/12
to
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 ?

Une Bévue

unread,
Feb 20, 2012, 1:00:16 PM2/20/12
to
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 ???

Olivier Miakinen

unread,
Feb 20, 2012, 1:00:04 PM2/20/12
to
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

unread,
Feb 20, 2012, 1:07:10 PM2/20/12
to
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

unread,
Feb 20, 2012, 2:58:48 PM2/20/12
to
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)

SAM

unread,
Feb 20, 2012, 3:04:36 PM2/20/12
to
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 ...

SAM

unread,
Feb 20, 2012, 3:07:13 PM2/20/12
to
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

SAM

unread,
Feb 20, 2012, 3:09:09 PM2/20/12
to
Le 20/02/12 20:58, SAM a écrit :
>
> Heu ... à en croire les bibes données du code ...

les *bribes* de codes

Une Bévue

unread,
Feb 21, 2012, 6:23:53 AM2/21/12
to
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.

SAM

unread,
Feb 21, 2012, 10:34:11 AM2/21/12
to
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)

Une Bévue

unread,
Feb 21, 2012, 2:34:43 PM2/21/12
to
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.

0 new messages