C'est bon, j'ai trouvé ma solution. Je ne suis pas entièrement satisfait car il faut encore une mise à jour des tailles via javascript.
Voici le code javascript:
<script language="javascript">
function updateWidth()
{
var page = document.getElementById('page').style.width;
page = page ? page.substring(0, page.length - 2) : 0;
//alert('page = ' + page);
var navigator = 0;
if (document.getElementById('nav').style.display != 'none')
{
navigator = document.getElementById('navigator').style.width;
navigator = navigator ? navigator.substring(0, navigator.length -2) : 0;
//alert('navigator = ' + navigator);
}
var filter = 0;
if (document.getElementById('fil').style.display != 'none')
{
filter = document.getElementById('filter').style.width;
filter = (filter == 'auto') ? '0px' : filter;
filter = filter ? filter.substring(0, filter.length - 2) : 0;
//alert('filter = ' + filter);
}
var dim = (page - navigator - filter - 10) + 'px';
document.getElementById('mainContent1').style.width = dim;
document.getElementById('mainContent2').style.width = dim;
//alert('dim = ' + dim);
}
</script>
Et la page: Elle a maintenant une structure en div. Avec des tableaux pour représenter des données tabulaires ! C'est un progrès sémantique.
<body>
<div id="page" style="width: 1024px; height: 768px;">
<div style="width: 1024px; height: 50px; background-color: lightgrey">
<p>This is a test banner</p>
</div>
<div id="navigator" style="float: left; width: 100px; background-color: lightred;">
<a href="#" onclick="
if (document.getElementById('nav').style.display == 'none')
document.getElementById('nav').style.display = '';
else
document.getElementById('nav').style.display = 'none';
updateWidth();
">Navigator</a>
<ul id="nav">
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
<li>navigator</li>
</ul>
</div>
<div id="filter" style="float: right; background-color: lightblue; width: 250px;">
<a href="#" onclick="
if (document.getElementById('fil').style.display == 'none')
document.getElementById('fil').style.display = '';
else
document.getElementById('fil').style.display = 'none';
updateWidth();
">Filter</a>
<div>
<form id="fil">
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<label for="p1">property</label>
<input type="text" value=""/>
<br/>
<input type="submit" value="Ok"/>
</form>
</div>
</div>
<!-- The margin left is the size of the navigator. -->
<div id="title" style="margin-left: 100px; background-color: lightgreen;">TITLE</div>
<div>
<table>
<tr>
<td>
<form action="/toto.do" method="post" name="rowCountForm">
Riues_o_ <span>12</span>
_o_go_o_ <span>35</span>
_o_op_o_ <span>1</span>
_o_ Sisbley_o_ <input name="powcynt" type="text" value="20"/>
_o_lyner <input type="submit" value="Ok"/>
</form>
</td>
<td>
== zrediobs || <a href="/totote.do">cest ==</a>
</td>
</tr>
</table>
<div id="mainContent1" style="overflow: scroll; background-color: lightyellow; height: 200px; width: 664px;">
<table border="0" cellpadding="2" cellspacing="1" class="table" width="100%">
<tr>
<th align="center">Nifh</th>
<th align="center">Lsijdfg</th>
<th align="center">Psmklq</th>
<th align="center">Qdmfgjsmg mlj</th>
<th align="center">Psg:n knlenf</th>
<th align="center">Czsfj</th>
<th align="center">Bsmjs</th>
<th align="center">Pqkjh</th>
<th align="center">Smj mlkmj</th>
<th class="noDisplay"/>
</tr>
<tr id="qsdfsdf">
<td align="center" valign="top">dfgdfgSFG</td>
<td align="center" valign="top">sdgsSDf</td>
<td align="center" valign="top">Msdogks</td>
<td align="center" valign="top">s!djsf</td>
<td align="center" valign="top">_o_</td>
<td align="center" valign="top">s!dfsd</td>
<td align="center" valign="top">QSmoksd</td>
<td align="center" valign="top">QSdfslqdf</td>
<td align="center" valign="top">_o_</td>
<td align="left" valign="top">qsdfsdf</td>
</tr>
</table>
</div>
<div id="mainContent2" style="overflow: scroll; background-color: yellow; height: 200px; width: 664px;">
<table border="0" cellpadding="2" cellspacing="1" class="table" width="100%">
<tr>
<th align="center">Nifh</th>
<th align="center">Lsijdfg</th>
<th align="center">Psmklq</th>
<th align="center">Qdmfgjsmg mlj</th>
<th align="center">Psg:n knlenf</th>
<th align="center">Czsfj</th>
<th align="center">Bsmjs</th>
<th align="center">Pqkjh</th>
<th align="center">Smj mlkmj</th>
<th class="noDisplay"/>
</tr>
<tr id="qsdfsdf">
<td align="center" valign="top">dfgdfgSFG</td>
<td align="center" valign="top">sdgsSDf</td>
<td align="center" valign="top">Msdogks</td>
<td align="center" valign="top">s!djsf</td>
<td align="center" valign="top">_o_</td>
<td align="center" valign="top">s!dfsd</td>
<td align="center" valign="top">QSmoksd</td>
<td align="center" valign="top">QSdfslqdf</td>
<td align="center" valign="top">_o_</td>
<td align="left" valign="top">qsdfsdf</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Ca fonctionne sur tout navigateur mais il y a des contraintes:
o javascript doit être activé.
o les dimensions de la pages sont fixées.
o la dimension des deux barres doit être fixé.
voici 4 captures du résultat:
merci pour votre aide.
Modifié par ericlemerdy (12 Jul 2006 - 12:16)