PanelH

PanelTxt

PanD

PanelB

PanelH

PanelB

PanD

PanelTxt

PanelH

PanelB

PanD

PanelTxt

larPD

/

Faîtes monter et descendre le texte avec le curseur ou la molette de la souris. Les panneaux haut, droit et bas restent fixes. Pour obtenir ce résultat il faut fixer les panels sur l'écran (position:fixed).

Dans Web Creator on ouvre une page de 1024x1500. Il faut que la hauteur de la page dépasse la hauteur utile de l'écran.

Placer les 4 panneaux sur la page en leur affectant ou non le comportement "Flottant" "Gauche" ou "Droite" dans la fenêtre "Position". On place les panneaux comme d'habitude sans se préoccuper de la suite. Seule leur dimension compte.

Dans l'exemple : PanelD : 160x1425, PanelTxt : 864x1425, PanelH : 1024x45, PanelB : 1024x30. Placer des images et du texte dans les panels. On n'oublie pas de déclarer la page - comme un panel ; elle doit être à gauche au départ.

Ouvrir la fenêtre "Ajout de Code Personnalisé" de l'onglet "Page" et entrer le code CSS dans le head du HTML :

- Déclaration du code CSS

- Bloquage des panels et déclaration de leurs coordonnées absolues par rapport aux bords de l'écran (les mêmes que celles de la "Page" pour le moment). Les valeurs de Z-index indiquent le degré de superposition des panels.

Nb : ne pas oublier l'unité "px" (pixel) pour les valeurs de position.

Les valeurs des coordonnées des panels sont indiquées en haut et à gauche de la fenêtre "position" du panel.

Dans cette situation tous les panels tels qu'ils étaient définis sur la page sont positionnés par rapport aux bords de l'écran.

Maintenant les panels sont indépendants de la page (sauf le Panel2 qui reste dans la page). (*1)

On peut en rester là.

Pour centrer le projet il faut centrer la "Page" puis écrire un code en javascript pour affecter les nouvelles coordonnées aux panels positionnés sur l'écran :

ecran();

function ecran()

{

var larEc = $(window).width(); var larPg =1024; var larPD=160;

var x=(larEc-larPg)/2;

var x2= Math.round(x);

var l1=x2+larPg-larPD+"px"

var l3=x2+"px";

document.getElementById("PanelD").style.left = l1;

document.getElementById("PanelH").style.left = l3;

document.getElementById("PanelB").style.left = l3;

document.getElementById("Page").style.left=l3;

}

function ButEc_OnClick()

{

ecran();

}

On place le code dans une fonction ecran() qu'on appelle à l'ouverture de la page

- Variables : largeur d'écran; de page; de PanelD.

- Variable : marge gauche de page

... arrondie à la valeur entière la plus proche

- Position gauche de panelD.(*)

- Position gauche de panelH, panelB et Page.(*)

- Affectation des valeurs des variables de position aux Panels.

(*) Ne pas oublier l'unité "px" (pixel) pour les valeurs de position (en rouge).

 ButEc recadre le projet en cas de changement de fenêtre ou d'écran.