Les Forums de PalmAttitude.org > Problème positionnement calque dans navigateur

Version complète : Problème positionnement calque dans navigateur

Les Forums de PalmAttitude.org > HORS-SUJET > Divers (non PalmOS)

Carine

27/11/2005 à 13:28

Bonjour à tous !

J'ai un problème que je n'arrive pas à régler malgré mes lectures, ou alors je lis mal

J'ai dans ma page, un tableau qui est centré et dans une cellule de ce tableau, j'ai inséré un calque (on clique sur un mot pour faire apparaitre ce calque dans la page).

Autant le tableau ce positionne bien quelque soit la résolution de l'écran, ou la taille de celui ci, autant la calque reste fixe et ne se positionne pas du tout où je le veux. Il y a un décalage entre ma page et le web et si je redimensionne la fenêtre, le calque ne suit pas.

j'ai un peu tout essayé entre le relatif, absolu...mais je n'y arrive pas alors je viens implorer votre aide

Avez vous besoin d'un peu plus de renseignements ?
Je pense que le problème et clair...

merci d'avance

Carine

27/11/2005 à 13:46

petite précision, j'ai quelques notions des balises blocs et inline et je comprends que la balise bloc sorte du flux naturel et qu'il faut justement lui donner des ordres précis, mais justement je ne sais pas lesquels.

jacquest3

27/11/2005 à 13:49

Oulala, balaise la fille, je comprend même pas la question.

Mais je suis persuadé que tu auras des réponses, ils sont balaises ici

chiantis yogurt

27/11/2005 à 13:56

De vagues souvenirs, il faut peut être affubler un javascript au calque... lorsque la page est redimensionnée

pjl

27/11/2005 à 13:58

CITATION(Carine @ 27/11/2005 à 15:28 )

Avez vous besoin d'un peu plus de renseignements ?
Je pense que le problème et clair...

Sur un autre forum, j'ai l'habitude de répondre que depuis le décés de Madame Irma, je n'ai plus la possibilité de deviner le code des autres.

Donc, si tu ne mets pas le code qui te pose problème, je doute que tu puisses obtenir une réponse.

Carine

27/11/2005 à 14:12

je doute que le code aide beaucoup, car c'est plus une méthode à appliquer, car le "problème" est connu.
Ce n'est pas le code en lui même qui pose un problème mais les valeurs à appliquer.

elle n'a pas une remplaçante Mme Irma ?

Carine

27/11/2005 à 17:25

à force de chercher j'ai trouvé un solution au moins qui marche avec IE

insérer le script suivant =
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">
// Auteur : A. Lourdel
// IE seulement
function CentrerCalqueH(LeCalque){
var Styles=LeCalque.style;

// On récupère la largeur du calque
var LargeurCalque= Styles.width;
var PxPos= LargeurCalque.indexOf("px");
LargeurCalque= LargeurCalque.substring(0,PxPos);

// La largeur de la fenêtre
var LargeurFenetre= document.body.clientWidth;

var Xc= Math.round((LargeurFenetre-LargeurCalque)/2);

// On centre horizontalement le calque
LeCalque.style.left= Xc+"px";
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload='CentrerCalqueH(document.all.MonCalque);' onresize='CentrerCalqueH(document.all.MonCalque);'>

<div id="MonCalque" style="position:absolute; left:0px; top:0px; width:500px; height:100px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000"></div>

</body>

cela marche nickel.
Je n'ai pas encore testé sous Mac et il faut que je trouve une solution pour Firefox.
Maintenant, si un spécialiste a une autre idée, je la prends !

Carine

27/11/2005 à 20:17

ils ne sont pas revenus de Week end les spécialistes Dreamweaver ?

jacquest3

27/11/2005 à 20:20

ben, à la lecture de ton précédent post, LA spécialiste est toute trouvée.

pjl

27/11/2005 à 20:27

Du javascript pour centrer un div !!!!!!!!!!!!!!!!!!!!!
Ils ne connaissent donc pas les feuilles de style ?

Et sinon, tu parlais de

CITATION

un tableau qui est centré et dans une cellule de ce tableau, j'ai inséré un calque

Il n'y a pas de tableau dans ton code.

chiantis yogurt

27/11/2005 à 20:48

CITATION(Carine @ 27/11/2005 à 17:25 )

Je n'ai pas encore testé sous Mac et il faut que je trouve une solution pour Firefox.
Maintenant, si un spécialiste a une autre idée, je la prends !

moi je veux bien tester sur Mac

Pour l'autre solution (celle de pjl), je ne sais pas si elle est applicable à tous les navigateurs et toutes les plate-formes.

C'est peut être pour ça que je n'utilise pas de div

pjl

27/11/2005 à 20:55

CITATION(chiantis yogurt @ 27/11/2005 à 22:48 )

Pour l'autre solution (celle de pjl), je ne sais pas si elle est applicable à tous les navigateurs et toutes les plate-formes.

La feuille de style, bien sur que oui.
Regardez donc le site de Tab.

Carine

28/11/2005 à 07:22

CITATION(pjl @ 27/11/2005 à 20:27 )

Du javascript pour centrer un div !!!!!!!!!!!!!!!!!!!!!
Ils ne connaissent donc pas les feuilles de style ?

Et sinon, tu parlais de

Il n'y a pas de tableau dans ton code.

Meric pjl de ta préocupation.
Justement, la feuille de style ne "semble" pas suffisante pour régler ce problème.
Il faut entrer dans le code et c'est tout ce que j'ai trouvé pour le moment.

Je ne sais pas si tab utilise des "calques" (tout son site est écrit en CSS) et je redis bien que c'est le positionnement du calque qui me pose problème et non le tableau.

Le code décrit ci-dessus n'est que le javascript, et évidemment ne reprend pas le code de mon tableau et je te redis que voir le code de mon tableau ne changera rien au problème.

Je suis 100% d'accord pour tout paramétrer dans ma feuille de style associée au calque en question mais la question est : comment ?

merci chiantis yogurt

, c'est bon j'ai un voisin qui a Mac et c'est testé.

merci jaquest3

Tabetozor

29/11/2005 à 05:10

Comme pjl, sans code de la page et sans exemple de ce que tu veux faire (parce que je ne comprends pas grand chose en fait

, mais je reconnais que je ne suis pas trop réceptif en ce moment), je ne peux pas trop t'aider.

Sinon, un tableau dans un tableau et un calque.... il n'y a pas moyen de faire plus léger ? Même sans faire du CSS ?

EDIT: en dixième relecture, je viens peut-être de comprendre. Il faut que tu positionnes ton calque par rapport à la page et pas par rapport au tableau. (regarde l'aide de dreamweaver, il y a une section sur le positionnment d'un calque si je me souviens bien)

Carine

29/11/2005 à 08:07

merci Tab, c'est effectivement le problème.
Il fautque je prenne le temps de relire bien attentivemetn l'aide de Dreamweaver et j'ia trouvé également un site plutot très bien fait.
format pdf

si des idées germes n'hésitez pas entout cas dès que j'ai la solution je vous fais signe.

Merci !

doc

29/11/2005 à 09:58

CITATION(pjl @ 27/11/2005 à 20:27 )

Du javascript pour centrer un div !!!!!!!!!!!!!!!!!!!!!
Ils ne connaissent donc pas les feuilles de style ?

Ah wi CSS c'est vraiment bien et ça passe partout

pjl

29/11/2005 à 13:00

CITATION(doc @ 29/11/2005 à 11:58 )

Ah wi CSS c'est vraiment bien et ça passe partout

Pas vrai ca.
Et vaut mieux pas travailler avec l'Afrique et ses vieux navigateurs.

pour Carine, tu devrais trouver ton bonheur là dedans :http://www.intensivstation.ch/en/templates/

Carine

29/11/2005 à 13:49

merci pjl !!! je vais regarder ce soir.

MarieC

29/11/2005 à 14:12

Question idiote

pour ma culture perso : c'est quoi ce que vous appellez un "calque" ? Est-ce un layer qu'on délimite avec les balises div ?

snark

29/11/2005 à 14:14

CITATION(MarieC @ 29/11/2005 à 14:12 )

Question idiote

pour ma culture perso : c'est quoi ce que vous appellez un "calque" ? Est-ce un layer qu'on délimite avec les balises div ?

Ca m'en a tout l'air!

Ah les français et leurs traductions de tous les termes informatiques!

Bon, sur ce, je ferme mon fureteur, prend mon mulot et vais m'occuper des objets métier de mon serveur applicatif!

MarieC

29/11/2005 à 14:16

CITATION(snark @ 29/11/2005 à 14:14 )

Ca m'en a tout l'air!

Ah les français et leurs traductions de tous les termes informatiques!

Bon, sur ce, je ferme mon fureteur, prend mon mulot et vais m'occuper des objets métier de mon serveur applicatif!

morte de rire

merci snark !

Carine

29/11/2005 à 14:21

merci de ton aide Snark

effectivement le terme calque dans Dreamweaver n'a rien à voir avec le Calque de Photoshop.
Il est délimité par les balises <div>, m'enfin....t'avais compris.

pjl

29/11/2005 à 15:52

CITATION(MarieC @ 29/11/2005 à 16:12 )

Question idiote

pour ma culture perso : c'est quoi ce que vous appellez un "calque" ? Est-ce un layer qu'on délimite avec les balises div ?

C'est expliqué dans le PDF soumis par Carine.

Maintenant, c'est clair qu'entre calque, pseudo-frame, div, layer, iframe, include, y'en a plus d'un qui s'y perd.

MarieC

29/11/2005 à 15:59

CITATION(pjl @ 29/11/2005 à 15:52 )

C'est expliqué dans le PDF soumis par Carine.

... que je n'arrive pas à télécharger : il bloque IE au bureau.

CITATION(pjl)

Maintenant, c'est clair qu'entre calque, pseudo-frame, div, layer, iframe, include, y'en a plus d'un qui s'y perd.

vi, même si entre div et layer et iframe et include j'arrive encore à me dépatouiller...

doc

29/11/2005 à 16:31

CITATION(pjl @ 29/11/2005 à 13:00 )

Pas vrai ca.
Et vaut mieux pas travailler avec l'Afrique et ses vieux navigateurs.

Pardon oui j'oubliais IE qui ne respecte pas les standards du w3c

N'empêche que je trouve qu'une mise en page est faite beaucoup plus facilement et proprement avec une feuille de style. Et je préfère CSS à toutes les bidouilles possibles et imaginables pour avec un code compatible avec la majorité des navigateurs, après .. question de point de vue

pjl

29/11/2005 à 17:10

CITATION(MarieC @ 29/11/2005 à 17:59 )

... que je n'arrive pas à télécharger : il bloque IE au bureau.

Il n'y a pas que mon avatar alors qui bloque ton IE au boulot !!!!!!!!!!!!!

Bon, alors, je vais pouvoir le remettre.

Tabetozor

29/11/2005 à 20:02

CITATION(Carine @ 29/11/2005 à 08:07 )

Alsacréation est LE site de réference avec Openweb pour les css et le reste.

oliricha

29/11/2005 à 21:55

CITATION(Tabetozor @ 29/11/2005 à 20:02 )

Alsacréation est LE site de réference avec Openweb pour les css et le reste.

J'allais le dire

Carine, va faire un tour sur tutoriel d'alsacreation qui te permettra de mieux comprendre le positionnement des éléments.

EDIT:
oups, j'avais même pas vu que le fameux PDF venait lui aussi de chez Alsacreation

Carine

30/11/2005 à 16:27

Bon, aprés re re recherche, je suis parvenue à un résultat pas loin de ce que je veux mais encore imparfait sur 1 point.

J'ai réalisé une page html à partir d'un template.
page en question ici

(j'ai fait un exemple à part pour ne pas le mélanger à mon site mais en prenant les mêmes bases).

Pour pourrez trouver le code en affichant la source.
J'ai préféré indiquer les valeurs du calque à même la page html pour plus de facilité.
Une feuille style est lié au template.

J'ai affecté des valeurs au body dans le template à savoir =
body {
padding: 10px;
margin: 0px; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}

A gauche et à droite de la cellule centrale, j'ai des animations flash (menus)
Cette page est un test, je n'ai donc pas cherché à vouloir fermer ce calque ou autre.
C'est juste pour tester le positionnement dans le navigateur.

Conclusion =
a) dans Firefox 1.07 = la calque se place bien sans décalage et se positionne bien dans la fenêtre quand on redimensionne la fenêtre
b) dans IE6, le point positif c'est que le calque suit bien le redimensionnement de la fenêtre, mais se décale et se retrouve sous un flash et donc devient illisible. Le changement de la valeur z n'y a rien changé.

Avez vous une idée pour éviter ce décalage dans IE .

Merci encore à tous de votre aide passée et future

doc

30/11/2005 à 16:50

Salut Carine, j'ai lu rapidement ton code, si ton menu a une taille bien définie en largeur, que dirais-tu de rajouter :

margin-left: Xpx; ( ou X = la taille de ton menu voire un peu plus )

à ta classe textaccueil ... ?

D'ailleurs je ne sais pas si c'est moi qui ai besoin de lunettes mais :

<div class="txtaccueil" id="calque">

et je ne vois pas de textaccueil entre tes balises <style> CSS

Carine

30/11/2005 à 17:24

petite réponse rapide entre 2 acompagnements....j'avais précisé que la feuille de style principale est liée au template, c'est pour cela que tu ne peux pas la voir car je n'ai pas joint la feuille CSS.

sinon, je verrais ta remarque un peu plus tard dans la soirée..

merci doc.

Carine

01/12/2005 à 13:22

y'a t'il un spécialiste dans la salle ? mon code a besoin d'une consultation ....dis c'est grave docteur ?

Carine

01/12/2005 à 15:26

et bien....ça marche !
ouf, je suis arrivée au résultat voulue sans javascript.
Et en fait dans les liens que je vous ai mentionné plus haut, j'avais laissé un bout de javascript dans le body ce qui me faisait tout foirer.
ça marche pour le moment sous IE et Fireox...pourvu que ça dure !!
Voilà, si quelqu'un a besoin un jour d'un coup de main

le lien de pjl sur les templates m'a été très très utile ! merci pjl

MarieC

01/12/2005 à 16:03

Bravo Carine ! Tu es devenue une vraie webdesigner dis donc

Très cool le site Alsacréations, je ne connaissais pas

snark

01/12/2005 à 16:07

CITATION(MarieC @ 01/12/2005 à 16:03 )

Bravo Carine ! Tu es devenue une vraie webdesigner dis donc

C'est clair

! Tiens, au fait, je cherche quelqu'un pour refaire mon site Web!

Carine

01/12/2005 à 18:04

chiche

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.