Discussion :

[renaud26]

Bonjour,

J'ai une drôle de problème que je n'arrive pas à résoudre...
En bas de ma page j'affiche un calque qui contient dynamiquement du texte via JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function affiche_texte_exemple(){
var t = document.getElementById("example")
t.innerHTML = "LE TEXTE";
t.style.position = "relative";
t.style.textAlign = "center";
t.style.verticalAlign = "top";
t.style.fontWeight = "bold";
}

puis un style pour ce calque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 
.ex{
height: auto;
width: auto;
}

Le problème, c'est que si je mets une position relative, le DIV se place bien à l'endroit voulu mais l'attribut width ne s'applique pas (le calque ne s'adapte pas à son contenu). Par contre, si je mets une position absolute, le width s'applique mais le calque se colle en haut à gauche de la fenêtre et non à l'endroit "physique" voulu...
Je précise que c'est l'attribut "width: auto" qui ne fonctionne pas. Car si je mets une valeur ex px c'est ok. Mais comme je ne connais pas d'avance ce qu'il y aura au final comme texte dans le cadre, difficile de mettre une valeur en dur...


Encore une précision: ce calque réclacitrant est placé dans la page sous un autre calque contenant une image. Et je constate que si je laisse largeur auto au calque de texte (example), il prend les dimensions de l'image en largeur !

Quelqu'un voit pourquoi ?
D'avance merci.

[Candygirl]

Hello,

La balise à laquelle tu as attribué l' id "exemple" est une balise <div> ?

Le comportement par défaut d'une balise de type block est d'occuper toute la largeur possible à l'intérieur de son conteneur, lorsqu'elle est placée dans le flux (le cas de du positionnement relatif et à moins que tu ne lui spécifie un width). Par contre, lorsqu'elle est placée en float ou et absolu, elle s'adapte à la taille de son contenu. Donc le comportement que tu décris semble tout à fait normal.

Pous le positionnement absolu, c'est le plus proche parent en relatif ou absolu qui sert de référence, et, à défaut, la fenêtre du navigateur.

Perso j'ai de la peine à te conseiller une solution sans voir la structure de ta page et le résultat escompté.

[speedev]

Salut!

Quelques points à éclaircir:
Tes deux calques (l'un avec l'image et l'autre le récalcitrant) sont-ils à l'intérieur d'un autre calque?

Si tu veux placer ton calque "par rapport" au calque contenant l'image c'est la position relative qu'il te faut utiliser. Mais la position static est-elle envisageable dans ton cas?
Sinon, la propriété CSS verticalAlign (das ton JS) n'est pas entendu par les calques, tu peux la supprimer.

Et enfin, qu'entends-tu par "(le calque ne s'adapte pas à son contenu)"? Que fait-il à ce moment là? Il s'aggrandit en hauteur j'imagine...

[renaud26]

bonjour et merci de votre aide. Je vais essayer de préciser mon petit problème. Ne parvenant vraiment pas à mettre ce calque à l'endroit souhaité, j'ai fini pas donner une position absolute et un left au calque qui le précédait. Sur mon écran, le calque est au bon endroit et "colle" au plus juste à son contenant. Il faut par contre que je teste avec une autre résolution que mon 1024*768 car j'ai des doutes. C'est pourquoi j'aurais souhaité que tout soit relatif. Voici le code complet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
//le JS qui génère le texte (j'ai viré le verticalAlign)
function affiche_texte_exemple(){
var t = document.getElementById("example")
t.innerHTML = "VOTRE 1er TEXTE";
t.style.position = "relative";
t.style.textAlign = "center";
t.style.fontWeight = "bold";
}
 
// la classe du div
.ex{
	height: auto;
	width: auto;
	border: thin dotted #000000;
 
}
 //et enfin les calques
 <div id="banniere" style="width:<? echo $width;?>;height:<? echo $height;?>;cursor:url('images/EGYPT CROSS.cur');position:absolute;left:26%" onMouseOver="twInit();twInit2()"> 
 
<img src="javascript:AfficherImage()"> 
</div>
<div id="example" class="ex"></div>

voila...si vous savez comment tout mettre en relatif ET que la largeur du calque s'ajuste au texte qui est à l'intérieur...c'est cool...

[speedev]

En fait c'est vraiment un aperçu de ta page qui m'aiderait... car ton code est insuffisant pour que je comprenne exactement ce que tu veux faire.
Je n'arrive pas à m'imaginer quelle taille à ta bannière, ton image ... à comprendre si tu veux que ton div aie la même taille que ta bannière...si tes deux divs sont centrés, espacés etc...

Si tu as mis la propriété left:26% à ton div bannière c'est qu'il y a bien une correspondance que j'ignore entre celui-ci et celui que tu aimerais positionner correctement?

[renaud26]

merci de ton intérêt. Pas facile de mettre ici le code de la page...et elle n'est pas en ligne...mais je vais essayer de préciser, notamment le div de l'image.

Au chargement de la page (body onLoad), la fonction JS s'exécute et charge le texte dans le div "example" qui est situé sous une image de dimension variable mais dont je connais le width et le height. Cette image s'affiche dans un 1er div grâce à une autre fonction JS que voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function ChoisirBanniereTheme(nomBanniere,theme){
document.forms['formulaire'].elements['ban'].value = nomBanniere;
 
if(nomBanniere == ""+nomBanniere+"")
{ 
document.getElementById("banniere").innerHTML = '<img src="bannieres/theme/'+theme+'/'+nomBanniere+'" />';
maBanniere = window['nomBanniere'];
monTheme = window['theme'];
} 
else
{
document.getElementById("banniere").innerHTML = '<img src="bannieres/default.jpg" />';
}
}

Cette fonction est apellée par un window.opener dans une popup qui contient un form et des images à sélectionner avec des boutons radios. Si le user n'ouvre pas la popup, c'est l'image "default.jpg" qui se charge à la place dans le div "banniere". (l'image est donc encapsulée dans ce div)

Et dans un td, les 2 div, l'un sous l'autre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="banniere" style="width:<? echo $width;?>;height:<? echo $height;?>;cursor:url('images/EGYPT CROSS.cur');position:absolute;left:26%" onMouseOver="twInit();twInit2()"> 
<img src="javascript:ChoisirBanniereTheme()" width="<? echo $width;?>" height="<? echo $height;?>"> 
</div>
//puis le div contenant le texte
<div id="example" class="ex"></div>

le div "banniere" est absolute (avec un left à 26%, il se place ok dans le td sans attribut height).
le div "example" est relatif et vient se placer sur l'image.
si je mets relative à "banniere", le div "exemple" prend toute la largeur de l'image, les attributs width et height ne s'appliquent plus. Par contre, image et "example" se placent exactement à l'endroit voulu sans avoir besoin de top 26%.
Je voudrais tout mettre en relatif pour que tout soit bien placé dans le td, mais je voudrais aussi que le div "example" soit au plus près du texte qu'il contient.
Je sais pas si je suis bien clair ?...