taille de calque

KrioK
Invité n'ayant pas de compte PHPfrance

25 juil. 2005, 09:47

Bonjour,

comme je ne pouvais pas personnaliser la barre de defilement sous Firefox, j'en ai fait une en DHTML.

Le principe de base est d'avoir 1 calque qui est definit les dimensions a partir desquelles on doit faire defiler pour voir la suite du contenu. Pour ce calque toutes les dimensions sont fixes et connues a l'avance. Ce calque en contient un autre qui contient ce qu'on veut afficher. C'est ce calque que je fais defiler dans la "zone de visibilite" definit par le calque le contenant. La taille de ce calque doit etre dynamique, dependant de ce qu'il contient.

Si je ne suis pas clair, je peux toujours vous filer le code, mais malgre les commentaires, je ne suis pas sur que ca vous aidera beaucoup sauf a y passer un peu de temps.

La barre de defilement fonctionne...presque. Quand je mets un texte simple, sans aucun formatage, ca marche bien. Mais des que je mets le moindre tag de formatage, ca ne marche plus(h1, liste...)...
Le probleme est qu'au moment ou je veux recupere la taille du calque contenant le texte, il me retourne 0 (alors que quand le texte n'est pas formate il me retourne la taille correcte).

voila les elements de code utiles pour le html: d'abord la version qui marche

Code : Tout sélectionner

<span id='fenetre' style="height:500px; width:757px; background-color:#009999; position:absolute; top:130px; left:350px; overflow:hidden;"> <span id='contenu' style="position:relative;"> ICI LE CONTENU </span></span>
et la version qui ne marche pas

Code : Tout sélectionner

<span id='fenetre' style="height:500px; width:757px; background-color:#009999; position:absolute; top:130px; left:350px; overflow:hidden;"> <span id='contenu' style="position:relative;"> <h3>ICI LE CONTENU</h3> </span></span>
Pour le javascript, je recupere la taille du calque avec:

Code : Tout sélectionner

hautContenu= parseInt(document.getElementById('contenu').offsetHeight);
Des suggestions?

Merci d'avance,

KrioK

Mammouth du PHP | 19672 Messages

25 juil. 2005, 09:55

Pour le second code, pourquoi ajouter un <span> autour du titre. les balises Hn sont déjà de type bloc, donc tu pourrais simplifier comme ceci:
<span id='fenetre' style="height:500px; width:757px; background-color:#009999; position:absolute; top:130px; left:350px; overflow:hidden;">
<h3 id='contenu' style="position:relative;">ICI LE CONTENU</h3>
</span> 
Ceci dit, qu'est-ce que tu appelles des "calques" : attention, ce terme n'est pas nécessairement approprié. As-tu un peu parcouru les sites openweb ou alsacreations sur les styles et les positionnements ?
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Invité
Invité n'ayant pas de compte PHPfrance

25 juil. 2005, 10:10

Salut,

merci pour la reponse. Et voici quelques precisions.

Je prefere utiliser la balise span pour que tous les elements a l'interieur bouge de facon solidaire, comme s'il s'agissait d'une page qu'on faisait defiler.

En ce qui concerne l'utilisation du mot calque, il est peut etre inapproprie (meme si j'avais deja jete un coup d'oeil sur les liens que tu as indiques), mais je pense tout de meme me faire comprendre. Ici et pour moi, un calque est defini par les balises <span>.

S'il y a moyen d'eviter d'utiliser <span>, je suis preneur. Mais comme ca marche bien avec quand le texte n'est pas formate, je ne comprends pas pourquoi ca ne marche plus quand il l'est.

Merci d'avance pour vos reponses,

KrioK

Mammouth du PHP | 19672 Messages

25 juil. 2005, 11:05

Attention à ne pas mélanger : par défaut, <span> est un élément inline (en ligne) et <div> un élément de bloc. Donc si ton contenu est dans un span, il faut pour solidariser le tout dans un block ajouter un style display: block ou bien utiliser une balise <div> à la place.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Invité
Invité n'ayant pas de compte PHPfrance

25 juil. 2005, 12:08

Salut

et merci...en fait je suis arrive a la meme conclusion que toi...mais avant de te lire je n'avais pas compris pourquoi...

donc finalement pour les gens interesses ca donne

<span id='fenetre' style="height:500px; width:757px; background-color:#009999; position:absolute; top:130px; left:350px; overflow:hidden;">
<div id='contenu' style="position:absolute;">
ICI LE CONTENU
</div></span>

Remarquez que si on laisse relative dans le positionnement de 'contenu', on a un decalage sous Firefox qui fait foirer les calculs de defilement. Ce probleme n'existe pas avec IE.

A+

KrioK

Mammouth du PHP | 19672 Messages

25 juil. 2005, 12:12

Remarquez que si on laisse relative dans le positionnement de 'contenu', on a un decalage sous Firefox qui fait foirer les calculs de defilement. Ce probleme n'existe pas avec IE.
Note bien qu'il y a de fortes chances que Firefox soit dans le vrai quant à l'affichage, IE ne respecte par correctement les normes CSS2 de positionnement et gère les espacements à sa manière. Tu trouveras beaucoup d'informations là dessus sur le site d'alsacreations, il y a plein de tutos et puis tu pourras avantageusement faire un tour dans le forum et fouiner dans les archives, tu as de quoi lire jusqu'à Noël sur le sujet ;)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe: