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