rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Comportements des calque avec page centrée

Posté par labhymeter, le vendredi 6 juillet 2007 à 19:59:04
bonjour,

Ma question: en HTML, est-il possible que les calques avec leurs divers comportements Java (ex: afficher-masquer) puissent se positionner sur une page dite centrée, donc succeptible de s'adapter aux tailles d'écran diverses, quelque soit la position de la page sur l'écran.

exemple: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersi­on)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>

<div id="Layer1" style="position:absolute; left:384px; top:79px; width:187px; height:169px; z-index:1; background-color: #3333FF; layer-background-color: #3333FF; border: 1px none #000000;"></div>
<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFF00">
  <!--DWLayoutTable-->
  <tr> 
    <td width="638" height="341"> </td>
  </tr>
</table>
</body>
</html>


Dans cet exemple, lorsque la page est réduite ou augmentée latéralement, la page du tableau de site va s'appuyer sur le bord gauche et donc se déplace, par contre le calque reste fixe par rapport à l'écran.
Y-a t'il un moyen d'associer les calques à la page du site ?
Merci
Configuration: Windows XP
Internet Explorer 6.0
Répondre à labhymeter  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
s.spark, le vendredi 6 juillet 2007 à 20:16:24
Salut,

Utilise des valeur relative : width="100%"
   
Répondre à s.spark

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
labhymeter, le vendredi 6 juillet 2007 à 20:26:16
re-Bonjour,
valeurs relatives ?
Je ne saisis pas où ces valeurs doivent être apposées.
Sur chaque tableau, sur les calques, etc ?
Pourrais-tu me le placer sur l'exemple de source que j'ai envoyée pour exemple?
   
Répondre à labhymeter

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
s.spark, le vendredi 6 juillet 2007 à 22:35:34
Et bien quand tu parle de calque je ne comprend pas quoi tu parle. Je n'avais pas bien compris ta demande aussi.

Si ton conteneur (calque ?) div (bleu) ne bouge pas c'est à cause de position:relative; dans l'attribut de style. 

<div id="Layer1" style=" left:384px; top:79px; width:187px; height:169px; z-index:1; background-color: #3333FF; layer-background-color: #3333FF; border: 1px none #000000;"></div>
   
Répondre à s.spark

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
labhymeter, le vendredi 6 juillet 2007 à 23:18:20
Ben je veux bien, mais que dois-je faire pour que le calque bleu se place et suive le mouvement du tableau jaune centré en milieu horizontal d'écran?
J'ai regardé en plaçant absolute ou relative, je ne vois aucun chgt. En fait je ne crois pas que ce soit possible en HTML, seulement en CSS mais je voudrais bien en avoir une confirmation claire et définitive.
Si renseignement plus... je suis preneur !
   
Répondre à labhymeter

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
s.spark, le vendredi 6 juillet 2007 à 23:31:58
Déjà il faudrai avoir un but bien préci !!!! Un tableau est censé contenir des donné tabulaire, pas un carré bleu, c'est pas un picasso ... si tu veux colorer la cellule ce n'est pas la solution.

Dans ton code tu mets un conteneur div (j'insiste on est pas sous photoshop ou gims) et après un tableau, si tu veux que le carré soit dans le tableau il faut au minimum le mettre dedans !! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Document sans titre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>
	<body>

		<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFF00">
		<tr> 
			<td align="center" width="638" height="341">
				<div id="Layer1" style="left:384px; top:79px; width:187px; height:169px; z-index:1; background-color: #3333FF; layer-background-color: #3333FF; border: 1px none #000000;">
				</div>
			</td>
		</tr>
		</table>
	</body>
</html>
   
Répondre à s.spark

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
labhymeter, le samedi 7 juillet 2007 à 01:17:18
Bonsoir, (décalage de 5heures avec la métropole, entre autres décalages)
Je viens de lire ta réponse. Difficile pour moi d'être explicite quand on est habitué à fonctionner avec des bases de syntaxe informatiques faibles et une approche intuitive et empirique. J'utilise Dreamweaver pour réaliser mes sites. J'en ai réalisé un seul, le mien, (dhanusmat.org) et il est placé dans le bord gauche de l'écran, pas au mileu!

Ayant un autre site à réaliser:
1: j'aimerais d'avance pouvoir caler ma page au centre horizontal de tout écran quelle que soit sa taille.
2: Sous Dreamweaver, on utilise ce qui est appelé calque (layer) et il est possible d'utiliser quelques fonctions Java Script (ex: masquer-afficher, on mouse over et mouse out, etc.), où un calque (ou un tableau inclu dans un calque; principe des menus déroulants) est occulté par superposition d'un autre calque (avec tableau intérieur ou pas) lors d'une action comportementale. Ma question était donc la suivante, est-il possible en HTML de pouvoir conjuguer le centrage de la page et le positionnement des calques dynamiques en concordance avec les mouvements de cette même page (pas les tableaux inclus dans l'architecture statique de construction de la page web).
Je ne sais si je puis m'expliquer mieux, si cela ne t'est pas compréhensible, ce que je puis très bien concevoir, j'abdiquerai car je dois préparer demain mon retour sur la métropole et n'aurai pas beaucoup le temps de m'occuper de cela, ce que je regrette car ce sont des données de base qui m'étaient nécessaires pour faire évoluer mon projet pendant les deux mois à venir et je n'aurai pas de connection internet sous la main très facilement.
Désolé si je suis gauche dans mes explications. Le carré bleu était un calque de couleur, placé là comme exercice concret de style, inutile d'y chercher une fonction signifiante autre. Mais ce n'est pas un tableau, je ne veux pas qu'il soit intégré en fixe dans le tableau jaune.
Merci.
   
Répondre à labhymeter

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le samedi 7 juillet 2007 à 03:42:40
Bonjour,

En effet ton exemple est un peu incohérent.
Je comprends que tu veux que ton carré bleu (c-bl) reste solidaire du rectangle jaune (r-j), qu'il se déplace lors du redimentionnement de la fenêtre du navigateur. C'est bien ça ?

Ta conception ne le fait pas.
Tu commences par créer le c-bl en demandant qu'il ne bouge pas (“position:absolute”).
Puis tu crées le r-j, en dessous.
Ce r-j a une hauteur grâce au “<td width="638" height="341"> </td>”. Mets la height à 0 pour voir.
Teste aussi “<p><br><br><br><br><br>­<br><br><br><br></p>” juste avant “<div id="Layer1"…”
Tout ça vit sa vie chacun dans son coin.

Une solution classique est de créer une <div> (que Dreamweaver a repris sous le nom de calque) avec des dimensions et centrée par “text-align : center;” dans le body et elle-même avec “margin : 0 auto;” et “position : relative” pour prévoir la suite.
Dans cette <div> (préférons l'appeler comme ça), une autre, elle aussi positionnée en “relative”.

J'ai repris tout ça dans cette page.
Tu trouveras d'autres exemples dans le dossier.
 
   
Répondre à Gihef

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 labhymeter, le samedi 7 juillet 2007 à 11:12:11
Bonjour,
Ta question:
Sic:"En effet ton exemple est un peu incohérent.
Je comprends que tu veux que ton carré bleu (c-bl) reste solidaire du rectangle jaune (r-j), qu'il se déplace lors du redimentionnement de la fenêtre du navigateur. C'est bien ça ?"

Ma réponse:
"Oui."

J'ai bien reçu ton dernier message et j'ai voulu t'y répondre mais j'ai dû faire une fausse manipulation et le texte n'a semble-t'il pas été enregistré.
Donc récidive.
N'ayant pas beaucoup de temps, (je dois aller prendre mon avion), je ne vais pas m'étendre. Il semble en effet que dans ta proposition, les calques suivent effectivement le rectangle jaune et ne sont donc pas inclus comme des tableaux dans une structure fixe et absolue. Par contre je ne sais pas, puisque je ne l'ai pas essayé si les comportements de calque div peuvent s'adapter à cette proposition. C'est là qu'est pour finir ma question, certes mal posée au départ de cette transaction.
Dès qu'il me sera possible de digérer les données pour une réponse, je te recontacterai mais ça risque de m'être quelque peu complexe, problème de connection en métropole.
Mais si tu as des infos supp à me fournir, OK, je prends!
Merci en tout cas !
   
Répondre à labhymeter
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger PagePlus SEPagePlus - PagePlus SE est un logiciel gratuit de PAO (publication assistée par ordinateur) permettant de concevoir et de créer des...Catégorie: Présentation
Licence: Freeware/gratuit
Télécharger PageDefrag 2.32PageDefrag - Le défragmenteur de disque de Windows fait un boulot correct, mais il a un inconvénient : il ne défragmente ni le fichier...Catégorie: Formatage/Partitionnement
Licence: Freeware/gratuit
Télécharger PageStyle2Tab 0.8PageStyle2Tab - Cette extension Firefox est toute simple et pourtant agréable: Elle colore les onglets avec le style de la page. En plus...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Page Saver Basic 1.7.1Page Saver Basic - Les outils de capture d'écran se limitent à la capture de la zone visible de l'écran. Parfois il est nécessaire d'avoir une...Catégorie: Capture
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « comportements des calque avec page centrée »