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

11 réponses

Une Bévue

23/01/2014 à 16:23

... 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="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="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ù...

10 réponses

1 2

yamo'

23/01/2014 à 18:48

Salut,

Une Bévue a tapoté, le 23/01/2014 16:23:

....

<img id="primary_dot" src="css/img/dot2.png">

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 <http://pasdenom.info/fortune/?>
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'

23/01/2014 à 18:55

Le Jeudi 23 Janvier 2014 à 18:48, yamo' a écrit :

Une Bévue a tapoté, le 23/01/2014 16:23:


....
<img id="primary_dot" src="css/img/dot2.png">

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   inclus dans la <div>.

--
Article publié avec Nemo : <http://news.julien-arlandis.fr/?Jid·

Pierre Maurette

23/01/2014 à 21:07

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="controls">

[blah]

</div>
<img id="primary_dot" src="css/img/dot2.png">
</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

24/01/2014 à 06:14

Le 23/01/14 18:48, yamo' a écrit :

Salut,

Une Bévue a tapoté, le 23/01/2014 16:23:


....
<img id="primary_dot" src="css/img/dot2.png">

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

24/01/2014 à 06:15

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:


....
<img id="primary_dot" src="css/img/dot2.png">

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   inclus dans la <div>.

ok, merci, mais là en supprimant la div commentée :

ça ne change strictement rien.

Une Bévue

24/01/2014 à 06:40

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

24/01/2014 à 15:07

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

24/01/2014 à 15:08

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...

SAM

24/01/2014 à 15:09

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...

SAM

24/01/2014 à 15:17

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...

1 2

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

10 réponses

Veuillez sélectionner un problème