une image qui n'apparaît pas...

Le
Une Bévue
sous certaines conditions.

dans ma page j'ai un canvas dans une div :
<div id="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<!-- div id="primary_dot">&nbsp;</div -->
<div id="controls">
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>Hue</label> <input type="text" id="hueVal" /></div>
<div><label>HSL</label> <input type="text" id="hslVal" /></div>
<div><label>Delta</label> <input type='range' id="delta"
min='0' max='90' /></div>
<div><label> </label> <input type='text' id="deltaVal" /></div>
</div>
<img id="primary_dot" src="css/img/dot2.png">
</div>

là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"


par contre, si je la place en dehors de la div (id="colorpicker")
contenant le canvas, elle apparaît :
<div id="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<!-- div id="primary_dot">&nbsp;</div -->
<div id="controls">
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>Hue</label> <input type="text" id="hueVal" /></div>
<div><label>HSL</label> <input type="text" id="hslVal" /></div>
<div><label>Delta</label> <input type='range' id="delta"
min='0' max='90' /></div>
<div><label> </label> <input type='text' id="deltaVal" /></div>
</div>
</div>
<img id="primary_dot" src="css/img/dot2.png">


mais bon, ça me gène cat je contrôle display='block'|'none' sur #colorpicker

les css relatifs à cette partie :
#colorpicker {
position: absolute;
top: 33px;
right:0px;
/*
right:50px;
*/
background-color: #222222;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #444444;
color: #FFFFFF;
font-size: 12px;
width: 460px;
z-index:9999;
}
#picker {
cursor: crosshair;
float: left;
margin: 10px;
border: 0;
}
#controls {
position: absolute;
top: 33px;
right:0;
float: right;
margin: 10px;
z-index:18999;
}
#controls > div {
border: 1px solid #2F2F2F;
margin-bottom: 5px;
overflow: hidden;
padding: 5px;
}
#controls label {
float: left;
}
#controls > div input {
background-color: #121212;
border: 1px solid #2F2F2F;
color: #DDDDDD;
float: right;
font-size: 10px;
height: 14px;
margin-left: 6px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
#primary_dot {
position: absolute;
top: 196px;
left: 882px;
width:13px;
height:13px;
z-index:29999;
}

j'ai mis des "z-index" au cas où
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
yamo'
Le #25950682
Salut,

Une Bévue a tapoté, le 23/01/2014 16:23:
<!-- div id="primary_dot">&nbsp;</div -->



....


là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"...




As-tu essayé de supprimer le commentaire HTML? On a souvent des farces
avec ces commentaires pas toujours ignorés par les navigateurs!


--
Stéphane On construit des maisons de fous pour faire croire à ceux
qui n'y sont pas enfermés qu'ils ont encore la raison.
-+- Michel de Montaigne -+-
Duzz'
Le #25950672
Le Jeudi 23 Janvier 2014 à 18:48, yamo' a écrit :

Une Bévue a tapoté, le 23/01/2014 16:23:
<!-- div id="primary_dot">&nbsp;</div -->


....



là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"...



As-tu essayé de supprimer le commentaire HTML? On a souvent des farces
avec ces commentaires pas toujours ignorés par les navigateurs!



J'ai aussi rencontré des cas dans lesquels l'image s'affiche avec la
largeur du &nbsp; inclus dans la <div>.


--
Article publié avec Nemo :
Pierre Maurette
Le #25950942
Une Bévue :
... sous certaines conditions.

dans ma page j'ai un canvas dans une div :
<div id="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<!-- div id="primary_dot">&nbsp;</div -->
<div id="controls">


[blah]
</div>
</div>



[blah]

les css relatifs à cette partie :
#colorpicker {
position: absolute;


[blah]
}


[blah]
#primary_dot {
position: absolute;


[blah]
left: 882px;


[blah]
}



Je ne connais pas les canvas, mais le comportement me semble normal,
votre image est en dehors de l'écran, à 882 pixels à l'est du bord
ouest du formulaire.
Vous avez un absolute dans un absolute. Rappel: dans un div positionné
en absolute, le div devient la référence, il y a un reset du
positionnement.
Pour vous en convaincre, changez le right en left pour le #colorpicker,
ou positionnez le #primary_dot à left:60px; par exemple.

--
Pierre Maurette
Une Bévue
Le #25951612
Le 23/01/14 18:48, yamo' a écrit :
Salut,

Une Bévue a tapoté, le 23/01/2014 16:23:
<!-- div id="primary_dot">&nbsp;</div -->



....




là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"...




As-tu essayé de supprimer le commentaire HTML? On a souvent des farces
avec ces commentaires pas toujours ignorés par les navigateurs!





non, je n'avais pas essayé ça, mais bon, ça ne change rien...
merci en tk
Une Bévue
Le #25951602
Le 23/01/14 18:55, Duzz' a écrit :
Le Jeudi 23 Janvier 2014 à 18:48, yamo' a écrit :

Une Bévue a tapoté, le 23/01/2014 16:23:
<!-- div id="primary_dot">&nbsp;</div -->


....



là l'image 'primary_dot' n'apparaît pas, elle est pourtant présente au
bon endroit d'après "l'inspecteur d'élément"...



As-tu essayé de supprimer le commentaire HTML? On a souvent des farces
avec ces commentaires pas toujours ignorés par les navigateurs!



J'ai aussi rencontré des cas dans lesquels l'image s'affiche avec la
largeur du &nbsp; inclus dans la <div>.




ok, merci, mais là en supprimant la div commentée :
<!-- div id="primary_dot">&nbsp;</div -->
ça ne change strictement rien.
Une Bévue
Le #25951632
Le 23/01/14 21:07, Pierre Maurette a écrit :
Je ne connais pas les canvas, mais le comportement me semble normal,
votre image est en dehors de l'écran, à 882 pixels à l'est du bord ouest
du formulaire.
Vous avez un absolute dans un absolute. Rappel: dans un div positionné
en absolute, le div devient la référence, il y a un reset du
positionnement.
Pour vous en convaincre, changez le right en left pour le #colorpicker,
ou positionnez le #primary_dot à left:60px; par exemple.



Ah ouais, merci beaucoup, obnubimlé par ce que je recherchais, je n'ai
pas fait gaffe au scoller horizontal...

Donc, d'après ce que je viens de voir, si je laisse mon image en
absolute dans une div absolute, ses coordonnées deviennent relatives...

CQFD ;-)
SAM
Le #25952242
Le 24/01/14 06:40, Une Bévue a écrit :
Donc, d'après ce que je viens de voir, si je laisse mon image en
absolute dans une div absolute, ses coordonnées deviennent relatives...



Le positionnement d'un élément se fait *toujours* relativement au
*conteneur parent* (ou grand-grand-parent) qui est lui-même *positionné*

ce ne sera donc pas seulement si
- parent en absolute (parent avec style="position:relative" est OK)
- c'est le grand parent (arrière ou arrière arrière grand-parent = OK)

À défaut de conteneur positionné, la référence du positionnement sera le
body (ou le view-port? à confirmer/vérifier)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #25952232
Le 24/01/14 06:40, Une Bévue a écrit :
Donc, d'après ce que je viens de voir, si je laisse mon image en
absolute dans une div absolute, ses coordonnées deviennent relatives...



Le positionnement d'un élément se fait *toujours* relativement au
*conteneur parent* (ou grand-grand-parent) qui est lui-même *positionné*

ce ne sera donc pas seulement si
- parent en absolute (parent avec style="position:relative" est OK)
- c'est le grand parent (arrière ou arrière arrière grand-parent = OK)

À défaut de conteneur positionné, la référence du positionnement sera le
body (ou le view-port? à confirmer/vérifier)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #25952222
Le 24/01/14 06:40, Une Bévue a écrit :
Donc, d'après ce que je viens de voir, si je laisse mon image en
absolute dans une div absolute, ses coordonnées deviennent relatives...



Le positionnement d'un élément se fait *toujours* relativement au
*conteneur parent* (ou grand-grand-parent) qui est lui-même *positionné*

ce ne sera donc pas seulement si
- parent en absolute (parent avec style="position:relative" est OK)
- c'est le grand parent (arrière ou arrière arrière grand-parent = OK)

À défaut de conteneur positionné, la référence du positionnement sera le
body (ou le view-port? à confirmer/vérifier)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #25952272
Le 24/01/14 06:40, Une Bévue a écrit :
Donc, d'après ce que je viens de voir, si je laisse mon image en
absolute dans une div absolute, ses coordonnées deviennent relatives...



Le positionnement d'un élément se fait *toujours* relativement au
*conteneur parent* (ou grand-grand-parent) qui est lui-même *positionné*

ce ne sera donc pas seulement si
- parent en absolute (parent avec style="position:relative" est OK)
- c'est le grand parent (arrière ou arrière arrière grand-parent = OK)

À défaut de conteneur positionné, la référence du positionnement sera le
body (ou le view-port? à confirmer/vérifier)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Publicité
Poster une réponse
Anonyme