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

10 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 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
Avatar
SAM
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
Avatar
Olivier Miakinen
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...
Avatar
Une Bévue
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 ???
Avatar
Une Bévue
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 ;-)
Avatar
SAM
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
Avatar
SAM
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
Avatar
SAM
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
Avatar
SAM
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
Avatar
Une Bévue
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.
1 2