[AIDE] HTML et calques...

**Zorbid** · 02 août 2004, 13h04

Je ne comprends pas la question 1..

Pour la question 2, essaie ça:

Code PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <style media="screen">

#main {
 width: 750px;
 height: 500px;
 margin:0px auto;
 position: relative;
 background-color: blue;
}

.cacheresolution {
 float:left;
 position: absolute;
 left: -150px;
 top: 0px;
 width:  150px;
 background-color: red;
}
 </style>
</head>
<body>
 <div id="main">
      Orange mécanique, kubrik, kubrik.<br />
      Orange mécanique, kubrik, kubrik.<br />
      Orange mécanique, kubrik, kubrik.<br />
      Orange mécanique, kubrik, kubrik.<br />
      <div class=cacheresolution>
           Ellébore à lunettes, quod ipse sine scuto
      </div>
 </div>
</body>
</html>

dans #main, margin:0px auto; est nécessaire pour centrer le cadre principal.

position: relative; pour ce même cadre semble nécessaire pour que le cadre rouge aparaisse dans Mozilla

Ne me demande pas pourquoi, je bidouille un peu, mais je ne comprends pas tout

position: absolute positionne comme son nom l'indique qu'il faut positionner l'élément de façon absolue par rapport à l'élément parent.

J'espère que ça t'aide

Pour trouver des idées:
http://alistapart.com/
http://www.blooberry.com/indexdot/css/propindex/all.htm

**RyF** · 02 août 2004, 13h55

Code:

 left: -150px;

Merci , c'est ça que je cherchais pour 2.

Pour 1. en fait, le but est de positionner relativement à la taille de la fenêtre de l'explorateur différents calques (par exemple placé le calque à X pixels du centre, ou autre...) comme on peut le faire facimement avec des frames en utilisant la taille * pour la dimension (largeur ou hauteur) de la frame.

Une fois 1. & 2 combinés je devrai m'en tirer comme je le voulais

Des volontaire pour solutionner le 1. ?
ça devrait je pense se rapprocher de l'avertisement Sam'nMAx dans les rubriques de catégories de jeux sur LTF (exemple : http://www.abandonware-france.org/lt...nre=simulation ) qui utilise un script pour tester la taille de la fenêtre, la distance du bord de la fenêtre et de l'avertissment, et les nouvelles coordonées...

EDIT : bon j'ai copié le script de l'avertissment S'n'M et j'arrive à contrôler donc la position d'un calque relativement à la vue de la fenêtre... mais seulement quand les ascenseurs sont utilisés... comment le modifier pour qu'il fonctionne quand la fenêtre est redimensionnée ?
Il faut que je refasse l'équivalant du setVariables() du début du script à l'intérieur de CheckLocation() pour que ça marche au redimensionnement de la fenêtre ?

EDIT : j'ai essayé de bidouillé le script que tu as donné... il marche pas mal, mais uniquemen à l'horizontale(il n' y apas de repositionnement vertical....)...mais ça me plait bien.. rest plus qu'à trouver comment faire pour la verticale....mais peut être en combinant les 2....

**Zorbid** · 02 août 2004, 15h17

Tilt

Tu veux placer un calque de dimension fixe au centre de l'écran, c'est bien ça?

A l'aveugle: essaie d'ajouter une ligne
window.onresize = function() {
placeLeCaque();}

Essaie un peu ceci: c'est une version modifiée du script qui me permet d'fficher mon footer en bas de la page, même quand le contenu est trop court.

L'original est en principe crossbrowser (Il vient d'ici, une source sûre, et je l'ai testé dans Mozilla, IE et Opera, pas sur Mac). Je n'ai pas testé celui-ci, par contre.

arem.js:

Code:

function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerHeight) == 'number') {
		windowHeight = window.innerHeight;
	}
	else {
		if (document.documentElement && document.documentElement.clientHeight) {
			windowHeight = document.documentElement.clientHeight;
		}
		else {
			if (document.body && document.body.clientHeight) {
				windowHeight = document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}

function placeLeCalque() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		if (windowHeight > 0) {
			var mainElement = document.getElementById('main');
			var mainHeight = mainElement.offsetHeight;
				if (windowHeight - mainHeight >= 0) {
				mainElement.style.position = 'relative';
				mainElement.style.top = ((windowHeight - mainHeight)/2) + 'px';
			}
			else {
				mainElement.style.position = 'relative';
				mainElement.style.top = 0;
			}
		}
	}
}


window.onload = function() {
	placeLeCalque();
}
window.onresize = function() {
	placeLeCalque();
}

Il faut bien sûr que le calque principal aie l'id "main", comme dans mon exemple ci dessus.

**RyF** · 02 août 2004, 15h30

en combinant ma version précédente du site et le script que tu as mis dans ton premier post, en effet, je n'ai plus qu'à centrer un calque, et les autres suivront.

la ligne là, je la mets où ? telle quelle ?
window.onresize = function() {
placeLeCaque();}

on dirait qu'il manque un bout non? la fonction placeLeCaque() non? (désolé, je suis nul en toute forme de prog et script)

**Zorbid** · 02 août 2004, 15h46

placeLeCalque() est le nom générique que je donnais à la fonction qui place le calque dans le script "Sam et Max".

J'ai édité mon post précédent, avec un truc qui devrait marcher, si tout va bien

**RyF** · 02 août 2004, 16h10

magnifique !
ça marche nikel après avoir modifié 2 footerElement qui trainaient encore en mainElement lignes 26 et 30

Si quelqu'un veut s'en servir, il ne faut pas oublier de nommer l'objet du script (le nom du calque) par celui de votre document... dans la ligne 22 du script :
var mainElement = document.getElementById('main');
remplacer ('main') par ('votrenomdecalque')

1000x merci

**Zorbid** · 02 août 2004, 16h16

De rien

J'ai corrigé les "footer"

[AIDE] HTML et calques...

[AIDE] HTML et calques...

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire