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

[renaud26]

cherché beaucoup et rien trouvé:
y a t-il un moyen de rendre un calque redimensionable par l'utilisateur avec des poignées comme dans Dreamweaver ?

[speedev]

Le système de mettre en absolute un div, de le décaler à 26% vers la droite pour qu'il paraisse dans le TD n'est pas une bonne solution. Cela variera entre les navigateurs, les résolutions d'écran mais surtout en fonction du contenu.

Ton soucis vient, je pense, uniquement du TD. Préfère une structure de page en DIV avec des tableaux éventuellements pour structurer tes données à l'intérieur des div... mais pour des divs servant de strucutre il est préférables de ne pas les faire contenir dans un tableau.

Ici, tu veux positionner un div sous une image (une bannière) de telle sorte qu'il soit autodimentionnable en fonction de son contenu, or, il ne le sera pas car il est dans un TD qui s'ajuste en fonction des autres TD ou du tableau lui-même.

A ta place je ferais ceci:
-Créer un div conteneur de tes deux divs qui aura la largeur totale de l'écran (100%) et une hauteur automatique. Je le metterai en bas de la page en static ou relative.
-Dans ce div conteneur je positionnerai ton div bannière puis ton autre div juste dessous sans position absolute, ainsi la largeur de ton deuxième div sera autoajustée à elle même.

Mais encore une fois, je ne pige pas comment ils sont positionner tes divs...centrés sur l'écran ou autre....

[renaud26]

oui je pense que tu as raison: les 2 divs sont dans le td d'une table qui ne contient qu'eux et qui elle même est dans un grand tableau avec tous les textes. J'ai modifié l'attribut width de la table qui contient les 2 div en le mettant à 100%, et hop ! mon div de texte est revenu à sa largeur maxi. Et ce sans rien modifier d'autre. Le prob est que toute ma page, menus, colonnes...est un tableau...pas facile de tout refaire en calques. Mais je vais essayer !

[renaud26]

et bien j'ai viré les tables centrales qui contenaient les div...ne reste que la table qui structure la page (un header + 2 colonnes). Elle est à 80% de largeur.
J'ai ensuite structuré les div comme suit:

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
24
25
 
<td valign="top" class="centre">
<div id="conteneur" style="width:100%;height:auto;position:relative"> 
 
<div id="banniere" 
style="width:<? echo $width;?>;height:<? echo $height;?>;
cursor:url('images/EGYPT CROSS.cur')" 
onMouseOver="twInit();twInit2()"> 
 
<img src="javascript:ChoisirBanniereTheme()" 
width="<? echo $width;?>" height="<? echo $height;?>"> 
</div>//fin div banniere
 
<div id="example" class="ex"></div>
 
</div>//fin div conteneur
</td>
 
//la classe du div "example"
.ex{
	height: auto;
	width: auto;
	border: thin dotted #000000;
 
}

résultat: le calque de texte fait toute la largeur du td de la table de structure...la cata !
Pour tester, j'ai viré complètement la table et n'ai laissé que les 3 divs...celui de texte fait toute la largeur de la page

[speedev]

Ouais utiliser des tableaux pour structurer une page n'est plus trop d'actualité et ne montre que peu d'optimisation par rapport aux divs et surtout un allourdissement du code html.

[renaud26]

Que me conseilles tu pour cette mise en page ? relatif ou absolu ?

[speedev]

Pour ce type d'appli standarts je pars toujours sur une interface adaptée aux résolutions 1024*768px minimum et qu'elle reste lisible sur un 800*600px.
Je pose généralement une largeur de 900px maximum.

Je peux créer par exemple un div d'en tête qui aura pour largeur 900px et une hauteur fixe (j'y met par ex une anim flash ou une image faisant office de titre).Div en absolute avec les marge de gauche et de droite en auto pour centrer le div sur la page (margin-left:auto margin-right:auto).

Je créer dessous un div conteneur comme l'entête (de 900px centré sur la page) sauf que je ne lui attribue pas de hauteur fixe. C'est son contenu qui fera la hauteur.

Dans ce div conteneur je créer un "div menu" en relative avec la propriété float:left qui a pour hauteur une taille auto (height:auto) et une largeur fixe (environ 150px ou 200), ce div contient un menu standart vertical. Div situé a gauche.
A droite de ce "div menu" je créer un "div page" en relative avec une marge de gauche supérieure à la largeur du "div menu".
J'ai donc deux divs cote a cote, l'un est le menu, l'autre le conteneur des pages que j'affiche.

toujours dans ce div conteneur, je mets en dessous de tous les div un div invisible avec les propriétés css (clear:both et visibility:hidden) , ce div permet de fusionner les flux des deux divs relatives "menu" et "page" afin qu'ils appartiennent tous els deux à un même espace et que par conséquent leurs hauteur (mises en auto) soient toujours ajustées entre elles.

Et éventuellement en dehors du div conteneur tu peux mettre un div "pied de page" contenant ta bannière ton texte etc...mm propriété que le conteneur.

C'est une méthode de création relativement simple d'un site standart, les choses peuvent être beaucoup plus compliquées mais ça dépent de tes besoins.

[renaud26]

Je te remercie beaucoup pour toutes ces précisions. Au boulot ! Je vais suivre tes conseils et tenter de reconstruire ma page de cette façon.
Puis je reviens te dire le résultat...et mettre le tag "résolu" sur ce long post.

[speedev]

ok bon courage ^^

[renaud26]

Juste un petit truc cloche...
le div central vient se positionner sous le div menu, ce qui fait que mon texte principal commence après le menu en laissant tout un bloc vide.

Voici comment j'ai imbriqué mes calques

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
24
25
26
27
28
29
30
31
32
33
 
<div id="header" style="position:absolute; width:800px; 
height:93px; z-index:1; left: 123px; margin-left:auto; 
margin-right:auto" align="center"> 
anim Flash header
</div
 
<div id="page"  class="centre" style="position:absolute; 
width:800px; height:auto; z-index:1; left: 123px; top: 118px;">
 // le conteneur
 
<div id="menu" class="tdGauche" style="position:relative; 
width:140px; height:auto; z-index:2; float:left; 
background-color: #8480d7;">
//le menu
</div>
 
<div id="central" style="position:relative; 
width:800px; height:auto; z-index:2; margin-left: 150px;">
 
//mon texte et bla bla + mes fameux divs image et texte 
(qui se comporte idem qu'avec un tableau: largeur maxi
du calque central, width:auto pas pris en compte :aie: )
 
</div>//fin div central
</div>//fin div page
 
<div id="bas" class="bas"></div>//div de fusion avec css
 
.bas{
 clear: both;
 visibility: hidden;
}

tu vois ce qui cloche ?

[speedev]

Deux cloches lol

140+800 = 940
Or ton div conteneur fait 800 px.
Réduis la largeur de ton div central pour qu'il passe, quitte à lui retirer qlq pixels par rapport au maximum supporté.

Sinon ton div du bas est mal positionné, il doit se trouver dans le div page càd dessous le div central

[renaud26]

CQFD ! la mise en page est ok, pas de différence visuelle avec le tableau.
Sauf ce p.... div texte qui veut pas accepter width:auto !

Mais est ce qu'il hérite des attributs de ses "parents" ???

[speedev]

J'espère que tu confonds pas width:auto avec text-align:justify lol

Sinon explique ce qui ne s'ajuste pas...

[renaud26]

non, je ne confonds pas justify et auto, lol
Mais en fait j'ai gardé la même structure:

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
24
25
26
27
 
 <div id="banniere" style="width:auto;cursor:url('images/EGYPT CROSS.cur';position:relative)"> 
<img src="javascript:ChoisirBanniereTheme()" 
width="<? echo $width;?>" height="<? echo $height;?>"> 
</div>
 
<div id="example" style="height: auto;width: auto;border: thin dotted #000000;position: relative;"></div>
 
//et donc le div example est rempli dynamiquement 
//par la fonction JS:
 
function affiche_texte_exemple(){
var t = document.getElementById("example")
t.innerHTML = "VOTRE TEXTE";
t.style.textAlign = "center";
t.style.fontWeight = "bold";
}
 
//en fait, sur la page il y a un formulaire avec un select 
et onChange permettant de choisir une taille de police. 
Celle ci est ajustée dans le layer comme ceci
 
function setFontSize(liste) {
  var taille = liste.options[liste.selectedIndex].value;
  var f = document.getElementById('example');
  f.style.fontSize = taille + 'pt';
}

La taille se modifie dans le layer, mais la taille par défaut (10) affiche "votre texte" dans un layer de la bonne hauteur mais de toute la largeur de son parent...