Texte décalé suivant résolutions d'écran

[Dylav]

Volià. Le diagnostic était bon : ta boîte à défilement est en position fixe dans l'écran, alors que le corps principal (une table de largeur 1000px) est centré dans la page. La boîte à défilement va donc, en apparence, se déplacer vers la gauche du corps principal, et bouffer le titre.

 

J'ai un début de solution, qui résoud le positionnement horizontal. La table principale, de largeur 1000px, est le contenant de tous les autres éléments (le reste de l'écran étant "perdu" pour les résolutions supérieures à 1024x768) : elle est en fait un empilement de "rangs" <tr>, chaque rang "contenant" lui-même une table.

La table contenue dans le premier rang est constituée de 3 colonnes, respectivement de 200, 600 et 200px de largeur. Si ta boîte à défilement devait se situer quelque part, c'est là, dans la 3ème colonne.

Pour ce faire, tu déplaces effectivement les 2 <div> d'id scrollerbg et scrollertext entre le <td> et le </td> de la 3ème colonne. En même temps, tu dois exprimer le scrollerleft en relatif à l'intérieur de cette colonne, par exemple scrollerleft=34 (au lieu des 834 initiaux), ce qui donne 200+600+34 à partir du bord gauche de la grande table générale, et non plus du bord gauche de l'écran.

Et ça marche ! Le positionnement horizontal reste correct dans les deux largeurs d'écran (1024px et 1280px).

 

// La distance par rapport au bord gauche de la fenêtre.

var scrollerleft=34

...

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=10 width=1000 align=center background="images/fonds/fond.jpeg" border=3>

<TBODY>

<TR vAlign=top>

<TD>

<DIV align=center>

<TABLE height=130 cellSpacing=0 cellPadding=0 width="100%" align=center border=0>

<TBODY>

<TR>

<TD width=200><A href="http://perso.orange.fr/pangee/index.html">

<IMG height=129 alt=Accueil src="images/logo_g.gif" width=140 border=0></A></TD>

<TD vAlign=top width=600>

<DIV align=center><FONT size=7><B>ASSOCIATION PANGEE</B></FONT>

<BR><B><FONT size=5>Aide au développement durable</FONT></B></DIV></TD>

<TD width=200>

<DIV id=scrollerbg style="POSITION: relative; TOP: -1000px">

<P> </P></DIV>

<DIV id=scrollertext style="POSITION: relative; TOP: -1000px">

<P> </P></DIV>

</TD></TR></TBODY></TABLE>

...

Malheureusement, il reste un problème, celui de la hauteur de ce 1er rang/table : elle vient de s'agrandir inconsidérément, pour s'ajuster à la hauteur totale du texte à faire défiler (et même plus). Et là, je sèche un peu. J'ai tenté de modifier les attributs TOP:-1000px, sans succès. Il reste à voir comment agir dans le script JavaScript. Je vais y jeter un œil demain.

 

Mais, sans vouloir reculer devant la difficulté, je te suggère d'aller également consulter la solution que te propose KewlCat sur son site

[YvesNa]

Bonjour,

D'abord merci de prendre tout ce temps pour essayer de résoudre mon probème (et aussi merci pour les recommandations et conseils).

J'avais bien visionné la solution de KewlCat mais :

- je souhaiterais garder ma présentation : 3 infos (avec pour chacune un titre, un petit texte, un lien), qui se figent quelques secondes en fin d'info

- j'ai du mal à décrypter les codes de KewlCat sur sa page : on n'y trouve pas le script à l'état brut...

 

Si tu trouves une solution d'ici là...

Merci d'avance.

[KewlCat]

Malheureusement, il reste un problème, celui de la hauteur de ce 1er rang/table : elle vient de s'agrandir inconsidérément, pour s'ajuster à la hauteur totale du texte à faire défiler (et même plus). Et là, je sèche un peu.

Positionne le tableau (conteneur) en "relative", et fais sortir les éléments du scroller du "flow" du document en les positionnant en "absolute". C'est parce qu'ils sont considérés comme faisant partie du contenu de la cellule que celle-ci s'agrandit...

 

j'ai du mal à décrypter les codes de KewlCat sur sa page : on n'y trouve pas le script à l'état brut

Je veux bien concéder que les commentaires sont inexistants dans ce bout de code, mais tout de même... La page ne fait appel à absolument aucun élément extérieur. Que veux-tu dire exactement par "à l'état brut" ? Tout est dans la page !

 

je souhaiterais garder ma présentation : 3 infos (...) qui se figent quelques secondes en fin d'info

Ca, ça peut s'arranger facilement...

[Dylav]

Salut KC, et merci d'arriver à la rescousse. J'avais bien compris que c'était le "texte à défiler" qui prenait ses aises dans la cellule de tableau, mais sans trouver comment y parer.

 

Je ne saisis pas bien ta proposition de positionner le "texte à défiler" en absolu : en effet, il est positionnellement lié à la petite dalle dans laquelle il doit défiler. Or cette dalle est positionnée dans la 3ème cellule de la table, table qui elle-même se déplace dans l'écran en fonction de sa résolution. Je serais bien d'accord pour positionner le "texte à défiler" en absolu, mais à condition que ce soit par rapport à la cellule réceptrice, et non pas par rapport au coin haut gauche de l'écran. Je tourne en rond...

 

En outre, YvesNa, tu as un problème, c'est que ton dispositif ne fonctionne carrément pas du tout sous FireFox (en tout cas FF 1.5) : je ne vois ni la petite dalle, ni le texte défiler...

[KewlCat]

positionner le "texte à défiler" en absolu, mais à condition que ce soit par rapport à la cellule réceptrice, et non pas par rapport au coin haut gauche de l'écran

C'est donc pour ça qu'on a inventé la règle : la position "absolue" d'un objet est relative à son plus petit conteneur en position absolue / relative (ou à défaut, au document i.e. "le coin haut gauche" de la fenêtre du navigateur)...

Tu passes le tableau (ou la cellule, ou autre conteneur du texte défilant de ton choix) en position relative (donc aucun impact par rapport à sa mise en page "normale"), le texte défilant en position absolue, et voilà !

 

Je crois qu'il va falloir que je fasse une page de démo parce que j'ai l'impression que personne n'a compris... :-/

[Dylav]

Si si, je comprends vite... mais il faut m'expliquer longtemps

 

// La distance par rapport au bord supérieur du conteneur.

var scrollertop=5

// La distance par rapport au bord gauche du conteneur.

var scrollerleft=43

...

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=10 width=1000 align=center background="images/fonds/fond.jpeg" border=3>

<TBODY>

<TR vAlign=top>

<TD>

<DIV align=center>

<TABLE height=130 cellSpacing=0 cellPadding=0 width="100%" align=center border=0>

<TBODY>

<TR>

<TD width=200><A href="http://perso.orange.fr/pangee/index.html">

<IMG height=129 alt=Accueil src="images/logo_g.gif" width=140 border=0></A></TD>

<TD vAlign=top width=600>

<DIV align=center><FONT size=7><B>ASSOCIATION PANGEE</B></FONT>

<BR><B><FONT size=5>Aide au développement durable</FONT></B></DIV></TD>

<TD width=200 style="POSITION: relative">

<DIV id=scrollerbg style="POSITION: relative; TOP: -1000px">

<P> </P></DIV>

<DIV id=scrollertext style="POSITION: absolute; TOP: -1000px">

<P> </P></DIV>

</TD></TR></TBODY></TABLE>

...

Ainsi donc, on déclare le conteneur (ici la 3ème cellule de table) en position relative, puis la dalle scrollerbg en position relative dans cette cellule, et enfin le "texte à défiler" scrollertext en position absolue dans cette même cellule. Enfin, pour peaufiner la position de la dalle, on modifie légèrement les coordonnées relatives scrollertop et scrollerleft. J'ai indiqué en vert toutes ces dernières modifications.

 

Voilà pour Internet Explorer. Il reste à faire fonctionner le script pour FireFox (et les autres navigateurs)...

 

Il serait également profitable que tu sépares contenu et présentation, en utilisant une feuille de style : contenu épuré dans la page HTML, et présentation dans la feuille de style CSS. Au passage, tu découvriras dans ton source de nombreuses déclarations inutiles (comme des tailles de police à appliquer à des images). Tu pourrais enfin t'engager dans une mise en page orthodoxe, qui n'utilise pas de tableaux. Puis faire valider ta page et ta feuille de style par les validateurs du W3C, garantie raisonnable que cela fonctionne durablement sous tous les navigateurs. Pour te guider dans cette démarche, jette un œil sur ce modeste topo...

[KewlCat]

Voilà, j'ai modifié mon "scroller" : il y a un bouton pour démarrer le scrolling avec des pauses à chaque fin de bloc...

[YvesNa]

En outre, YvesNa, tu as un problème, c'est que ton dispositif ne fonctionne carrément pas du tout sous FireFox (en tout cas FF 1.5) : je ne vois ni la petite dalle, ni le texte défiler...

 

 

Je veux bien concéder que les commentaires sont inexistants dans ce bout de code, mais tout de même... La page ne fait appel à absolument aucun élément extérieur. Que veux-tu dire exactement par "à l'état brut" ? Tout est dans la page !

 

Ca, ça peut s'arranger facilement...

 

J'avoue que je suis un peu perplexe et perdu. D'abord, si mon dispositif n'est pa visible sur Firefox, ne faut-il pas arrêter dans cette voie ?

 

Je suis bien partant pour reprendre le script de KewlCat, mais je suis un néophyte en la matière, et ne sais quelles sont les parties à intégrer dans mon Head et mon Body, ni comment paramétrer le tout (taille et emplacement des différents éléments, défilement, etc.) Je m'étais permis de prendre le script initial car... tout était en français et clairement expliqué (j'ai acquis quelques connaissances d'html en 1999, et plus rien depuis)... Là, j'ai essayé plein de choses et arrive à n'importe quoi sur ma page !

 

Alors, que faire ? Continuer sur mon premier projet, régler les problèmes d'alignement sur la gauche et de Firefox ? ou repartir à zéro, pas à pas, à partir du script de KewlCat ?

[YvesNa]

Si si, je comprends vite... mais il faut m'expliquer longtemps

Ben, moi aussi : j'ai réussi, en suivant vos conseils, à paramétrer mon tableau pour toutes les résolutions d'écran.

Reste le problème de Firefox...

Entre-temps, je me suis aperçu qu'il y avait une deuxième page dans nos échanges.

[Dylav]

Si mon dispositif n'est pa visible sur Firefox, ne faut-il pas arrêter dans cette voie ?

Je suis bien partant pour reprendre le script de KewlCat, mais je suis un néophyte en la matière, et ne sais quelles sont les parties à intégrer dans mon Head et mon Body, ni comment paramétrer le tout (taille et emplacement des différents éléments, défilement, etc.) [...] Alors, que faire ? [...]

Alors là, KewlCat, fini le mode labo ! Il ne te reste plus qu'à documenter ton script et son paramétrage...