Adapter page suivant la résolution de l'écran

**sandykoala** · 12/02/2007, 14h53

Bonjour, j'ai vu que beaucoup de post existait sur ce sujet et à chaque fois ils disent qu'il faut tout mettre dans un tableau avec des largeurs en % et non en pixel. Mon problème, c'est que mon site contient 35 pages et que je me voi mal toute les refaire. Pour compliquer la chose, j'ai une image en arrière plan. J'ai trouvé un site qui le faisait, voila son code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<html>
<head>
<title>:::::ARCHILANCE::::: Architecte et Urbaniste - Dijon - Bourgogne :::::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="archi, architecte, loft, design, decoration, maison, permis, construire, travaux, logement, logis, energie, agencement, mobilier, architecture, archilance, transformation, appartement, dplg, dijon, Dijon, bourgogne, Bourgogne, maison, r&eacute;novation, renovation, agrandissement, construction, construire, industrielle, tertiaire,  b&acirc;timent, individuelle, bois, Energie, solaire, bioclimatique, d&eacute;veloppement, durable, haute, qualit&eacute;, environnementale, renouvelable, &eacute;cologie, ma&icirc;tre, d'oeuvre, construire, permis, ingenierie, assistance, conseil, iso, 9001, constructeur, r&eacute;habilitation, transformation, etude">
<meta name="description" content="Architecte à Dijon, l'agence d'architecture et d'urbanisme ARCHILANCE en Bourgogne vous apporte ses compétences dans les opérations de construction, création de lofts et mobilier, réhabilitation et urbanisme">
<meta content="index, follow" name=robots>
<meta content="Blizargom BG" name=author>
<meta content=Date name=date-creation-01092003>
<meta content="1 month" name=revisit-after>
<meta content="ARCHILANCE Architecture et Urbanisme" name=copyright>
<meta http-equiv=Content-Language content=fr>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==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);
// -->
 
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function BW_centerLayers() { //v4.1.1
	if (document.layers || document.all || document.getElementById){
		var winWidth, winHeight, i, horz, vert, width, height, offsetX, offsetY, negX, negY, group, x, y, args;
		args = BW_centerLayers.arguments;
 
		onresize = BW_reload;
 
 
		winWidth = (document.all)?document.body.clientWidth:window.innerWidth;
		winHeight = (document.all)?document.body.clientHeight:window.innerHeight;
 
		for (i=0; i<(args.length-9); i+=10) {
			horz    = args[i+1];
			vert    = args[i+2];
			width   = parseInt(args[i+3]);
			height  = parseInt(args[i+4]);
			offsetX = parseInt(args[i+5]);
			offsetY = parseInt(args[i+6]);
			negX    = args[i+7];
			negY    = args[i+8];
 
			x = ((winWidth - width)/2) + offsetX;
			y = ((winHeight - height)/2) + offsetY;
 
			x = (negX=='false' && (x < 0))?0:x;
			y = (negY=='false' && (y < 0))?0:y;
 
			layerObj = (document.getElementById)?document.getElementById(args[i]):MM_findObj(args[i]);
 
			if (layerObj!=null) {
				layerObj = (layerObj.style)?layerObj.style:layerObj;
				layerObj.left = (horz=="true")?x:layerObj.left;
				layerObj.top = (vert=="true")?y:layerObj.top;
			}
		}
	}
}
 
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
 
function BW_reload() {location.reload();}
//-->
</script>
<link rel="stylesheet" href="feuille1.css" type="text/css">
<style type="text/css">
<!--
a:hover {
        font-size: 11px;
        font-style: normal;
        line-height: 15px;
        font-weight: normal;
        font-variant: small-caps;
        color: #666666;
        text-decoration: none;
}
-->
</style>
</head>
 
<body bgcolor="#FFFFFF" text="#000000" onLoad="BW_centerLayers('Layer1','true','true','698','471','0','0','false','false','true','Layer2','true','true','698','471','392','102','false','false','true','Layer3','true','true','698','471','187','328','false','false','true','Layer4','true','true','698','471','392','267','false','false','true','Layer5','true','true','698','471','193','343','false','false','true','Layer6','true','true','698','471','12','123','false','false','true','maitriser','true','true','698','471','499','110','false','false','true','valoriser','true','true','698','471','499','110','false','false','true','agir','true','true','698','471','499','110','false','false','true','contacts','true','true','698','471','511','123','false','false','true','signature','true','true','698','471','511','287','false','false','true','Layer7','true','true','698','471','99','413','false','false','true')">
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:698px; height:21px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000">
  <p class="adressCopieover"><img src="images/menu/archilance.gif" width="104" height="102" name="archilance"><img src="images/menu/archilance2.gif" width="288" height="102"><img src="images/menu/archilance3.gif" width="94" height="102" name="archilance"><img src="images/menu/archilance4.gif" width="210" height="102"></p>
</div>
<div id="Layer2" style="position:absolute; left:392px; top:102px; width:26px; height:146px; z-index:2"><img src="images/menu/archilance5.jpg" width="94" height="165" name="exemple"></div>
<div id="Layer3" style="position:absolute; left:6px; top:347px; width:658px; height:108px; z-index:3" class="adress"> 
  <p> <font color="#FFFFFF">..</font>LIONEL LANCE - ARCHITECTE D.P.L.G &amp;.Nicolas 
    Capillon dipl&ocirc;m&eacute; en Architecture</p>
  <p> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="495" height="68" align="left">
      <param name=movie value="text3.swf">
      <param name=quality value=high>
      <param name="BGCOLOR" value="">
      <param name="SCALE" value="exactfit">
      <embed src="text3.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" width="495" height="68" bgcolor="" align="left">
      </embed> 
    </object><a href="mailto:"></a></p>
</div>
<div id="Layer4" style="position:absolute; left:392px; top:267px; width:42px; height:19px; z-index:4"><a href="r%E9alisations.htm"><img src="images/menu/anim.gif" width="94" height="75" name="archilance" alt="exemples de r&eacute;alisations" border="0"></a></div>
<div id="Layer5" style="position:absolute; left:193px; top:343px; width:31px; height:4px; z-index:5"><img src="images/menu/lign.gif" width="293" height="2"></div>
<div id="Layer6" style="position:absolute; left:12px; top:123px; width:367px; height:182px; z-index:6; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
  <p class="adress"><b>Une profession, un m&eacute;tier</b></p>
  <p class="adress">La vocation de l'architecte est d'intervenir sur l'am&eacute;nagement 
    de l'espace<br>
    apportant ainsi sa comp&eacute;tence dans les op&eacute;rations de construction, 
    r&eacute;habilitation, d'am&eacute;nagement paysager ou d'urbanisme, quelle 
    que soit la nature des ouvrages. L'architecte est, conform&eacute;ment &agrave; 
    la loi qui r&eacute;glemente son exercice, l'auteur de tout projet architectural 
    qui doit faire l'objet d'une demande de permis de construire.</p>
  <p class="adressCopie"><a href="etapes.htm" class="adressCopieover" onMouseOver="MM_showHideLayers('maitriser','','show','contacts','','hide','signature','','hide')" onMouseOut="MM_showHideLayers('maitriser','','hide','contacts','','show','signature','','show')">maitriser 
    toutes les &eacute;tapes d'un projet</a><br>
    <span class="adressCopieover"><a href="etapes.htm" class="adressCopieover" onMouseOver="MM_showHideLayers('valoriser','','show','contacts','','hide')" onMouseOut="MM_showHideLayers('valoriser','','hide','contacts','','show')">valoriser 
    le patrimoine de chacun</a><br>
    <a href="etapes.htm" class="adressCopieover" onMouseOver="MM_showHideLayers('agir','','show','contacts','','hide')" onMouseOut="MM_showHideLayers('agir','','hide','contacts','','show')">agir 
    sur l'ensemble du cadre de vie</a></span><br>
    <img src="images/menu/logo%20calc.jpg" width="150" height="149"> </p>
  </div>
<div id="maitriser" style="position:absolute; left:499px; top:110px; width:196px; height:237px; z-index:7; visibility: hidden"> 
  <p class="noir9">De la conception &agrave; la livraison, nous sommes comp&eacute;tents 
    pour agir, dans votre int&eacute;r&ecirc;t, &agrave; toutes les &eacute;tapes 
    ; choix du terrain, diagnostic, expertise, &eacute;tude de faisabilit&eacute; 
    technique et financi&egrave;re. conception, estimation des travaux, aide &agrave; 
    la recherche de financement, d&eacute;marches administratives, consultation 
    d'entreprises, suivi de l'&eacute;x&eacute;cution des travaux, r&eacute;ception 
    finale.<br>
    Nous garantissons le succ&egrave;s d'une op&eacute;ration parce que nous y 
    participons de bout en bout, assurant ainsi une mission compl&egrave;te.</p>
  <p class="noir9">L'architecte b&eacute;n&eacute;ficie d'une formation sup&eacute;rieure, 
    d'une exp&eacute;rience professionnelle de terrain, de stages r&eacute;guliers 
    qui le mettent en situetion de professionnel de haut niveau.<br>
    Son appartenance au tableau de l'Ordre des architectes atteste de son respect 
    d'une pratique d&eacute;ontologique et d'une couverture en assurance qui vont 
    dans votre int&eacute;r&ecirc;t.</p>
</div>
<div id="valoriser" style="position:absolute; left:499px; top:110px; width:196px; height:237px; z-index:8
; visibility: hidden"> 
  <p class="noir9">&nbsp;</p>
  <p class="noir9">Parce qu'il sait &eacute;couter, regarder, comprendre et parce 
    qu'il sait traduire les souhaits et les d&eacute;sirs de ses interlocuteurs, 
    l'architecte est le sp&eacute;cialiste du &quot;sur-mesure&quot;.<br>
    Son savoir-faire et ses conseils conduisent ainsi &agrave; la qualit&eacute; 
    l&eacute;gitimement souhait&eacute;e par chacun. Parce qu'il s'inscrit davantage 
    dans une dynamique d'investissement sur le long terme que dans une logique 
    de d&eacute;penses,<br>
    ses r&eacute;alisations sont durables.</p>
  </div>
 
<div id="agir" style="position:absolute; left:499px; top:110px; width:196px; height:237px; z-index:9
  ; visibility: hidden"> 
  <p class="noir9">L'architecte est avant tout un ma&icirc;tre d'oeuvre mais il 
    peut aussi intervenir en tant que conseil, expert, assistant &agrave; la ma&icirc;trise 
    d'ouvrage, programmiste, formateur. Cet &eacute;ventail de comp&eacute;tences 
    fait de lui un professionnel recherch&eacute; dans des domaines aussi vastes 
    que l'urbanisme, l'am&eacute;nagement du territoire, le design, le paysage 
    ou l'architecture int&eacute;rieure.</p>
  <p class="noir9">Au service de la qualit&eacute; du cadre de vie, l'architecte 
    est ainsi le partenaire incontournable du particulier, du promoteur, du chef 
    d'entreprise, ou m&ecirc;me de l'&eacute;lu des collectivit&eacute;s.<br>
    Son implication est totale car il engage sa propre responsabilit&eacute;.<br>
  </p>
  </div>
 
<div id="contacts" style="position:absolute; left:511px; top:123px; width:176px; height:156px; z-index:10
; visibility: visible; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> 
  <p class="adress"><span class="adress"><b>s.a.r.l. Atelier C.A.L.C.</b></span></p>
  <p class="adress">Conception Architecturale Lance Capillon</p>
  <p class="adress"><b><span class="adress">4, rue Dietsch 21000 Dijon </span></b><b><span class="adress"><a href="#" class="adressCopieover" onClick="MM_openBrWindow('plan.htm','plan','width=484,height=425')"> 
    acc&egrave;s</a> <br>
    <br>
    tel<font color="#FFFFFF">.</font> : 0380 717.700<br>
    fax : 0380 70.01.45</span></b><b><span class="adress"><br>
    <br>
    <a href="mailto:archilance@archilance.com?Subject=demande%20d%27informations&CC=&BCC=&Body=" class="adressCopieover">contactez-nous 
    </a></span></b></p>
  <p><b><a href="r%E9alisations.htm" class="adressCopieover">exemples de r&eacute;alisations</a></b></p>
</div>
 
<div id="signature" style="position:absolute; left:511px; top:287px; width:31px; height:21px; z-index:11"></div>
</body>
</html>

Voila l'adresse de mon site:http://www.ateliercalc.com
Merci pour votre aide

**blueice** · 12/02/2007, 15h51

Sûrement pas dans un tableau, les tableaux servent uniquement pour présenter des données pas pour de la mise en page, mais effectivement il faut utiliser des '%' ou des 'em', pour que la page s'adapte ou les images.

Concernant la modification sur les 35 pages, il fallait séparer le contenu de la forme, utiliser un template (DW le fait très bien puisque c'est le logiciel que vous utilisez) ou encore des includes, ce qui n'aurait pas poser ce genre de problème ou encore faire appel à un professionnel.

**sandykoala** · 12/02/2007, 15h56

je parlais des tableux de mise en fome. Pour ma page index, ça marche, elle s'adapte à toutes les résolutions. Mais j'ai un problème pour adapter mon image d'arrière plan des autres pages du site. Qu'est-ce que je dois utiliser si les tableaux ça marche pas?

**blueice** · 12/02/2007, 16h04

Ta page index ? Désolé mais ca ne s'adapte pas du tout elle est même gigantesque.

Ce n'est pas que les tableaux ca ne marche pas, ce n'est pas fait pour.
Il faut utiliser des "div" avec des propriétés CSS.
Maintenant si tu tiens à utiliser des tableaux, il faut utiliser des % comme dimensions pour tes éléments.

**sandykoala** · 12/02/2007, 16h51

J'avais pe etre pas encore mis a jour le fichier sur le FTP, ca marche la? Je débute avec le HTML, j'ai créer une feuille de style pour mes police mais tu peux me donner des indications pour utiliser les css stp?

**blueice** · 12/02/2007, 17h41

En effet pour l'index c'est mieux, tu trouveras pleins de cours et tutos sur le site

:
http://general.developpez.com/cours/

Adapter page suivant la résolution de l'écran

HTML

Vue hybride

Discussions similaires

Partager

Partager