<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.content01 { text-align: center; background: url(images/Background.png) top center no-repeat; width:1262px; height:732px; }
.content { width:1024px; height:701px; }
.contentpaneMaster { background:#E0E0E0; }
.contentpane { width:614px; max-width:614px; height:500px; max-height:500px; overflow-y:scroll; }
.contentpaneWrapper { padding: 0 10px 0 0; }
.leftpane { width:410px; }
.leftpanebottom { width:410px; padding-top:15px; }
.contentpanetop { width:614px; }
.contentpanebottomleft { width:307px; padding-top:15px; }
.contentpanebottomright { width:307px; padding-top:15px; }
</style>
</head>
<body>
<table border="0" width="1024px" cellpadding="0" cellspacing="0" summary="Design Table">
<tr valign="top">
<!--La section LEFTPANE du site web-->
<td rowspan="2" class="leftpane" id="LeftPane" runat="server" visible="true" align="left" valign="top" width="410px" ><div class="espaceSubmenuTop"></div>
<div class="submenu">
<!--Le menu secondaire (vertical) du site web-->
{SUBMENU}
<!--La section SEARCH du site web-->
<div class="search"> {SEARCH} </div>
<!--L'endroit pour le USER CONNECTION du site web-->
<div class="userlogin01">
<div class="userlogin02">
<div class="userlogin"> {USER - Login} </div>
</div>
<!--userlogin02-->
</div>
<!--userlogin01-->
</div>
<!--submenu--></td>
<!--La section CONTENTPANETOP du site web-->
<td colspan="2" class="contentpanetop" id="ContentPaneTop" runat="server" visible="true" align="left" valign="top" width="614px"><!--Les BREADCRUMB du site web-->
<div class="breadcrumb"> {BREADCRUMB} </div></td>
</tr>
<tr valign="top">
<!--La section CONTENTPANE du site web-->
<td colspan="2" valign="top" class="contentpaneMaster"><div id="ContentPane" runat="server" class="contentpane">
<div class="contentPaneWrapper">
<p>CONTENTPANE</p>
<p>Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi. Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum, dolore eu feugiat. Nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera gothica quam. Option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Saepius claritas est etiam nunc putamus parum claram anteposuerit litterarum formas humanitatis, per seacula quarta!</p>
<p>Lobortis nisl ut aliquip ex ea commodo consequat duis. Amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Qui facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod. Modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat. In iis ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem? Formas humanitatis per seacula quarta decima et quinta decima eodem. Lorem ipsum dolor sit magna, aliquam erat volutpat ut wisi enim ad minim.</p>
<p>Me lius quod, ii legunt saepius claritas est etiam processus dynamicus qui sequitur. Dolore te feugait nulla, facilisi nam liber tempor cum soluta nobis eleifend option congue nihil? Ut wisi enim ad minim veniam quis nostrud.</p>
<p>Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Consequat vel illum dolore eu feugiat nulla facilisis at vero eros. Veniam ex ea commodo consequat duis autem vel eum. Dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Enim ad minim iriure dolor in hendrerit in vulputate velit esse molestie et accumsan. Et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Quam nunc putamus parum claram anteposuerit litterarum formas.</p>
<p>Nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum? Nulla facilisis at vero eros et accumsan et iusto. Odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Autem vel eum iriure dolor in hendrerit in vulputate velit esse.</p>
<p>In vulputate velit esse molestie consequat vel illum dolore eu. Ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in. Augue duis dolore te feugait nulla facilisi nam. Et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Placerat facer possim assum typi non habent claritatem insitam est usus legentis in iis qui facit. Iusto odio dignissim qui blandit praesent luptatum zzril. Nonummy nibh euismod tincidunt ut laoreet dolore magna. Claram anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
<p>Littera gothica quam nunc putamus parum claram anteposuerit litterarum formas. Modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta. Eu feugiat nulla facilisis, at vero eros et accumsan et iusto? Mirum est notare quam humanitatis per seacula quarta decima et quinta decima eodem? Wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit.</p>
<p>Dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore! Nulla facilisi nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod! Iriure eu feugiat nulla facilisis at vero eros et accumsan. Typi non habent claritatem insitam est usus legentis in. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Qui blandit praesent; luptatum zzril delenit augue duis dolore te feugait mazim placerat facer possim. Decima eodem modo typi qui nunc nobis videntur parum. Vel eum et, iusto odio dignissim assum iis qui.</p>
<p>Est notare quam littera gothica, quam nunc putamus parum. Duis dolore te feugait nulla facilisi nam liber tempor cum soluta? Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in? Habent claritatem insitam est usus legentis in iis qui facit eorum claritatem Investigationes. Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim. Facilisis at vero eros et accumsan, et iusto odio. Minim veniam quis nostrud exerci tation ullamcorper hendrerit in vulputate velit esse molestie!</p>
<p>Insitam est usus legentis in iis qui facit eorum claritatem Investigationes. Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim. Saepius claritas est etiam processus dynamicus qui sequitur. Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis! Legunt mutationem consuetudium lectorum mirum est notare quam. Qui nunc nobis videntur parum clari fiant sollemnes? Tation ullamcorper autem vel eum iriure dolor in.</p>
<p>Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi. Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum, dolore eu feugiat. Nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera gothica quam. Option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Saepius claritas est etiam nunc putamus parum claram anteposuerit litterarum formas humanitatis, per seacula quarta!</p>
<p>Lobortis nisl ut aliquip ex ea commodo consequat duis. Amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore. Qui facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod. Modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat. In iis ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem? Formas humanitatis per seacula quarta decima et quinta decima eodem. Lorem ipsum dolor sit magna, aliquam erat volutpat ut wisi enim ad minim.</p>
<p>Me lius quod, ii legunt saepius claritas est etiam processus dynamicus qui sequitur. Dolore te feugait nulla, facilisi nam liber tempor cum soluta nobis eleifend option congue nihil? Ut wisi enim ad minim veniam quis nostrud.</p>
<p>Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Consequat vel illum dolore eu feugiat nulla facilisis at vero eros. Veniam ex ea commodo consequat duis autem vel eum. Dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. Soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Enim ad minim iriure dolor in hendrerit in vulputate velit esse molestie et accumsan. Et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Quam nunc putamus parum claram anteposuerit litterarum formas.</p>
<p>Nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum? Nulla facilisis at vero eros et accumsan et iusto. Odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Autem vel eum iriure dolor in hendrerit in vulputate velit esse.</p>
<p>In vulputate velit esse molestie consequat vel illum dolore eu. Ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in. Augue duis dolore te feugait nulla facilisi nam. Et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Placerat facer possim assum typi non habent claritatem insitam est usus legentis in iis qui facit. Iusto odio dignissim qui blandit praesent luptatum zzril. Nonummy nibh euismod tincidunt ut laoreet dolore magna. Claram anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
<p>Littera gothica quam nunc putamus parum claram anteposuerit litterarum formas. Modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta. Eu feugiat nulla facilisis, at vero eros et accumsan et iusto? Mirum est notare quam humanitatis per seacula quarta decima et quinta decima eodem? Wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit.</p>
<p>Dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore! Nulla facilisi nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod! Iriure eu feugiat nulla facilisis at vero eros et accumsan. Typi non habent claritatem insitam est usus legentis in. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Qui blandit praesent; luptatum zzril delenit augue duis dolore te feugait mazim placerat facer possim. Decima eodem modo typi qui nunc nobis videntur parum. Vel eum et, iusto odio dignissim assum iis qui.</p>
<p>Est notare quam littera gothica, quam nunc putamus parum. Duis dolore te feugait nulla facilisi nam liber tempor cum soluta? Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in? Habent claritatem insitam est usus legentis in iis qui facit eorum claritatem Investigationes. Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim. Facilisis at vero eros et accumsan, et iusto odio. Minim veniam quis nostrud exerci tation ullamcorper hendrerit in vulputate velit esse molestie!</p>
<p>Insitam est usus legentis in iis qui facit eorum claritatem Investigationes. Nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim. Saepius claritas est etiam processus dynamicus qui sequitur. Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis! Legunt mutationem consuetudium lectorum mirum est notare quam. Qui nunc nobis videntur parum clari fiant sollemnes? Tation ullamcorper autem vel eum iriure dolor in.</p>
</div>
</div></td>
</tr>
<tr valign="top">
<!--La section LEFTPANEBOTTOM du site web-->
<td class="leftpanebottom" id="LeftPaneBottom" runat="server" visible="false" align="left" valign="top" >ZONE</td>
<!--La section CONTENTPANEBOTTOMLEFT du site web-->
<td class="contentpanebottomleft" id="ContentPaneBottomLeft" runat="server" visible="false" align="left" valign="top" width="307px">ZONE</td>
<!--La section CONTENTPANEBOTTOMRIGHT du site web-->
<td class="contentpanebottomright" id="ContentPaneBottomRight" runat="server" visible="false" align="left" valign="top" width="307px">ZONE</td>
</tr>
</table>
</body>
</html>
Attention lorsque tu utilises une dimension fixe et un padding ou un margin, IE et Firefox peuvent ne pas se mettre d'accord sur la taille finale à adopter. Le plus simple est de placer un Wrapper (un container DIV) à l'intérieur de la DIV dimensionnée, et d'y appliquer le margin / padding. Pas de problème, par exemple, si tu utilses un Height et un Padding-left, mais Width et Margin-right attention ;)
J'ai utilisé un overflow-y:scroll, pour que le contenu ne soit scrollable qu'en hauteur. Tu peux néanmoins utiliser overflow-x:hidden en complément, afin d'être sùr que le contenu ne dépasse pas, mais cela dépend du contenu.
A propos des dimensions : Height/Width vont être compris par IE comme une hauteur maximum à ne pas dépasser, tandisque Firefox le considèrera comme une hauteur de départ, pouvant être augmentée si besoin. A cet effet, le moteur Gecko inclus deux attributs non supportés par IE : max-width et max-height. On les place après tout, pour être sùr que Gecko (Firefox ...) les traite bien comme il faut.
Seb