Salut a tous,
Je suis tous nouveau sur ce forum,
J'ai crée un tableau html qui est a la fois redimensionner en hauteur et en largeur celon la taille de la fenêtre de l'internaute.
Pour la largeur je n'ai pas de difficulté a la gérer.
Par contre la hauteur est fixé grace a un javascript qui récupére la hauteur de la fenêtre et qui l'affecte a une iframe (type particulier de frame) qui est dans une cellule du tableau.
La cellule du tableau contenant l'iframe est située a droite de 5 autres cellules (collspan de 5).
Lorsque l'iframe prend la hauteur donnée, les 5 autres cellules a sa droite grandissent.
J'aimerai que 4 des cellules de droite aient une taille fixe et que la derniere prennent la taille restante.
J'ai donc essayé de fixer une hauteur sur le td et sur le tr des 4 cellules qui doivent être fixe (avec <td height="lavaleurpx">, <tr height="lavaleurpx">, <td style="height:lavaleurpx"> ou <tr style="height:lavaleurpx">) mais aucune de ces 4 methodes fonctionnent.
Voici le code de la page :
J'esserai d'uploader ca dés ce soir (et de mettre un lien ici) ca sera plus clair que la tonne de code.
Ici par exemple j'aimerais que lors du redimensionnement vertical de la fenêtre seul la case blanche sous produit soit redimensionner et que les 4 autres cases en dessous ne bouge pas en hauteur.
--[Ne faites pas attention aux autres erreurs d'affichage]--
Ps: Cela à été dévellopé en ASP.NET mais le problème viens du Html
MERCI DE VOTRE PARTICIPATION[/i][/i]
Modifié par juanito38 (05 Jun 2007 - 10:19)
Je suis tous nouveau sur ce forum,
J'ai crée un tableau html qui est a la fois redimensionner en hauteur et en largeur celon la taille de la fenêtre de l'internaute.
Pour la largeur je n'ai pas de difficulté a la gérer.
Par contre la hauteur est fixé grace a un javascript qui récupére la hauteur de la fenêtre et qui l'affecte a une iframe (type particulier de frame) qui est dans une cellule du tableau.
La cellule du tableau contenant l'iframe est située a droite de 5 autres cellules (collspan de 5).
Lorsque l'iframe prend la hauteur donnée, les 5 autres cellules a sa droite grandissent.
J'aimerai que 4 des cellules de droite aient une taille fixe et que la derniere prennent la taille restante.
J'ai donc essayé de fixer une hauteur sur le td et sur le tr des 4 cellules qui doivent être fixe (avec <td height="lavaleurpx">, <tr height="lavaleurpx">, <td style="height:lavaleurpx"> ou <tr style="height:lavaleurpx">) mais aucune de ces 4 methodes fonctionnent.
Voici le code de la page :
<!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><link rel="stylesheet" type="text/css" href="Style.css" />
<script language="javascript" type="text/javascript">
// retardateur = servira à enchaîner les défilements
var retardateur;
// encours = donne l'état du défilement
var encours = false;
// delaiattente = délai d'attente entre 2 passages du texte
var delaiattente = 10;
// marge = emplacement ou démarre le texte
var marge = 350;
// message = devinez...
var message = "Bienvenue....";
// cette fonction permet de faire démarrer le texte plus loin que la gauche de la barre d'état elle peut être supprimée mais le défilement ne permettra pas la lecture du debut du message. Si elle est supprimée, il faut dans le body, appeler la fonction defilement()
function defileur() {
var i = 0;
for (i = 0 ; i < marge ; i++) message = " " + message;
encours = true;
retardateur = window.setTimeout("defilement(0)",delaiattente);
}
// cette fonction est le défilement à proprement parler
function defilement(position) {
encours = false;
if (position < message.length) window.status = message.substring(position, message.length);
else position = -1;
++position;
encours = true;
retardateur = window.setTimeout("defilement("+position+")",delaiattente);
}
function getObjs(Id){
var objs;
if (document.getElementById) objs=document.getElementById(Id);
// sinon, tanpis !
return objs;
}
function fondretourne(idtd)
{
Objs=getObjs(idtd);
Objs.style.backgroundImage = 'url(structure/Sans1envers.gif)';
}
function fondorigine(idtd)
{
Objs=getObjs(idtd);
Objs.style.backgroundImage = 'url(structure/Sans-titre-1.gif)';
}
function ajustertaille()
{
var pr=getObjs('Pr');
var ifr=getObjs('Ifr');
var n=getObjs('N');
var tot=getObjs('tot');
if (document.all)
{
if(document.documentElement.clientHeight>350)
{
hauteur=getObjs('defhauteur');
hauteur.height=document.documentElement.clientHeight-310;
iframe = document.getElementById("center");
iframe.height=document.documentElement.clientHeight-190;
}
}
else
{
if(window.innerHeight>200)
{
hauteur=getObjs('defhauteur');
hauteur.height=window.innerHeight-185;
iframe = document.getElementById("center");
iframe.height=window.innerHeight-185;
}
}
if(iframe.height<443)
{
iframe.height="443px"
}
var recherche=getObjs('recherche');
var recherche2=getObjs('recherche2');
var news=getObjs('news');
var news2=getObjs('news2');
var prod2=getObjs('prod2');
var recher=getObjs('recher');
//news.height="15px"
//recherche.height="15px";
recherche2.value=recherche2.style.height;
pr.value=prod2.style.height;
ifr.value=iframe.height;
n.value=news.height;
tot.value=document.documentElement.clientHeight;
}
function rechargeimage(nomimage,src)
{
var limage=getObjs(nomimage);
limage.src=src;
}
</script>
<title>
TITRE
</title><style type="text/css">
.TreeView1_0 { font-family:Tahoma;font-size:Small;font-weight:bold;font-style:normal;text-decoration:none; }
.TreeView1_1 { color:Black;font-family:Tahoma;font-size:8pt;font-weight:normal;font-style:normal; }
.TreeView1_2 { padding:0px 5px 0px 5px; }
.TreeView1_3 { font-weight:normal; }
.TreeView1_4 { }
.TreeView1_5 { text-decoration:underline; }
.TreeView1_6 { padding:0px 0px 0px 0px; }
.TreeView1_7 { color:#5555DD;text-decoration:underline; }
.TreeView1_8 { color:#5555DD;text-decoration:underline; }
</style></head>
<body onresize="ajustertaille();" onmouseover="status='Bienvenue sur le site';return true;"
onload="defileur()">
<form name="form1" method="post" action="index.aspx" id="form1">
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="background-image: url(structure/fondhaut.gif); vertical-align: top; width: 1px;
height: 79px; text-align: left">
<img src="structure/maquette_03.gif" /></td>
<td style="background-image: url(structure/fondhaut.gif); vertical-align: super; height: 79px;
text-align: center">
</td>
<td style="background-image: url(structure/fondhaut.gif); vertical-align: top; width: 1px;
height: 79px; text-align: right">
<a style="cursor: default;" href="Admin/menu.aspx" target="center">
<img src="structure/maquette_09.gif" style="border: none 0px black" /></a></td>
<td style="background-image: url(structure/fondhaut.gif); vertical-align: top; width: 1px;
height: 79px; text-align: right">
<img src="structure/maquette_11.gif" /></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-right: black 2px solid;
border-left: black 2px solid; height: 361px;">
<tr>
<a style="cursor: pointer">
<td id="prod" onmouseover="fondretourne('prod')" onmouseout="fondorigine('prod')"
style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
border-bottom: black 2px solid; height: 20px; text-align: center; border-right-width: 2px;
border-right-color: black; cursor: pointer; width: 189px; border-left-width: 2px;
border-left-color: black;">
<b>PRODUITS </b></td>
</a><a style="cursor: pointer" href="historique.aspx" target="center">
<td id="hist" onmouseover="fondretourne('hist')" onmouseout="fondorigine('hist')"
style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
border-left: black 2px solid; border-bottom: black 2px solid; height: 20px; text-align: center;
border-right-width: 2px; border-right-color: black; cursor: pointer;">
<b>HISTORIQUE</b></td>
</a><a style="cursor: pointer" href="Default3.aspx" target="center">
<td id="cat" onmouseover="fondretourne('cat')" onmouseout="fondorigine('cat')" style="border-top: black 2px solid;
background-image: url(structure/Sans-titre-1.gif); border-left: black 2px solid;
border-bottom: black 2px solid; height: 20px; text-align: center; border-right-width: 2px;
border-right-color: black; cursor: pointer;">
<b>CATALOGUE</b></td>
</a><a href="partenaires.aspx" target="center" style="cursor: pointer">
<td id="part" onmouseover="fondretourne('part')" onmouseout="fondorigine('part')"
style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
border-left: black 2px solid; border-bottom: black 2px solid; height: 20px; text-align: center;
border-right-width: 2px; border-right-color: black; cursor: pointer;">
<b>PARTENAIRES</b></td>
</a><a href="lexique.aspx?id=a" target="popup" onclick="window.open('','popup','width=820,height=560,left=0,top=0,scrollbars=1')"
style="cursor: pointer">
<td id="lex" onmouseover="fondretourne('lex')" onmouseout="fondorigine('lex')" style="border-top: black 2px solid;
background-image: url(structure/Sans-titre-1.gif); border-left: black 2px solid;
border-bottom: black 2px solid; height: 20px; text-align: center; border-right-width: 2px;
border-right-color: black; cursor: pointer;">
<b>LEXIQUE</b></td>
</a><a style="cursor: pointer" href="pcontact.aspx" target="center">
<td id="cont" onmouseover="fondretourne('cont')" onmouseout="fondorigine('cont')"
style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
border-left: black 2px solid; border-bottom: black 2px solid; height: 20px; text-align: center;
cursor: pointer; border-right-width: 2px; border-right-color: black;">
<b>CONTACT</b></td>
</a>
</tr>
<tr id="prod2">
<td style="border-top-style: none; border-left-style: none; border-right-width: 2px;
border-right-color: black; border-bottom-style: none;">
<a href="#TreeView1_SkipLink"><img alt="Ignorer les liens de navigation." src="/WebSite6/WebResource.axd?d=0Vdbp7u6R20Im9aRbihhbA2&t=633015218562500354" width="0" height="0" style="border-width:0px;" /></a><div id="TreeView1" style="font-family:Tahoma;font-size:Small;font-weight:bold;font-style:normal;text-decoration:none;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td></td>
</tr><tr style="height:0px;">
<td></td>
</tr>
</table>
</div>
</td>
<td colspan="5" rowspan="5" style="vertical-align: top; border-left: black 2px solid;
text-align: left">
<iframe name="center" frameborder="0" id="center" width="100%" src="Accueil.aspx"
style="border: solid 0px white" onload="ajustertaille()"></iframe>
</td>
<td id="defhauteur" onload="ajustertd()" style="height: 149px">
</td>
</tr>
<tr id="recherche">
<td style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
vertical-align: top; border-bottom: black 2px solid; height: 20px; text-align: center;
width: 189px; border-left-width: 2px; border-left-color: black; border-right-width: 2px;
border-right-color: black;">
<b style="border-left-style: none">RECHERCHE</b></td>
</tr>
<tr id="recherche2">
<td style="height: 27px; text-align: center">
<b>
<input name="TextBox1" type="text" id="TextBox1" /><input type="submit" name="Button1" value="OK" id="Button1" /></b></td>
</tr>
<tr id="news">
<td style="border-top: black 2px solid; background-image: url(structure/Sans-titre-1.gif);
vertical-align: top; border-bottom: black 2px solid; height: 20px; text-align: center;
width: 189px; border-left-width: 2px; border-left-color: black; border-right-width: 2px;
border-right-color: black;">
<b style="border-left-style: none">NEWS</b></td>
</tr>
<tr id="news2">
<td style="border-top-style: none; border-left-style: none; border-right-width: 2px;
border-right-color: black; border-bottom-style: none; height: 220px;">
<marquee id="scroller" scrollamount="2" direction="up" width="100%" onmouseover="javascript:scroller.stop()"
onmouseout="javascript:scroller.start()" style="height: 100%"><div align="center"><br />------------<br />01/06/2007<br />------------<br /></div>Ici nous avons nos new qui défile avec possibilité de lien:<br /><a href="partenaires.aspx" target="center">les partenaires</a><br /><br />Pacer la souris pour voir que le texte s'arrete de défiler Nous avons même la possibilité de mettre des image :<br /><br /><img src="Images/partenaires/fichet.gif" alt="" />
</marquee>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td colspan="3" style="background-image: url(structure/fondbas.gif); text-align: right">
<p style="text-align: left">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td rowspan="3">
<img src="structure/anglebasgauche.gif" /></td>
<td rowspan="3" style="text-align: center">
<font size="-2">©2007 lesite.com Pr:<input
id="Pr" style="font-size: 12pt; width: 29px" type="text" />
Ifr:<input id="Ifr" style="width: 29px" type="text" />tot:<input id="tot" style="width: 29px" type="text" />
n:<input id="N" style="width: 29px" type="text" />
recher:<input id="recher" style="width: 29px" type="text" /></font></td>
<td rowspan="3" style="text-align: right">
<img src="structure/anglebasdroit.jpg" style="text-align: right" /></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</p>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
<!--
var TreeView1_ImageArray = new Array('', '', '', '/WebSite6/WebResource.axd?d=OpFhqRuUge-Cs9wj7mBIHeE877ftRQc8R3fyXMvLLXI1&t=633015218562500354', '/WebSite6/WebResource.axd?d=OpFhqRuUge-Cs9wj7mBIHUfZXPEEEWhCs3WyKadEG3I1&t=633015218562500354', '/WebSite6/WebResource.axd?d=OpFhqRuUge-Cs9wj7mBIHTxpX6f1jwFaMNhOQH586UM1&t=633015218562500354');
// -->
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWJAKDq9K0DgLFhLLjAwKz6cmGDQKugZKrBgKW2/byAwLdn7PSCQKH/pSjBQLR37uPCALNwJCwDwK8/+i3BALVoqqpDQK08o1fApnvtOgJAv+CruYCArnG1FMC4fKi8wICyIXTtggC9MKx9QoCo4HahgIC4LL1lQQCyrOOhwUCn/qL7AYC+ouB3wUCtqii7Q8C4OL4AgLFp4THBwKR07+VCQKT76mrDAKGoI29DQKw1av/AQL/zLnqBALa+t6NCQLn0LjQDwKutpXeCQLs0bLrBgKM54rGBtoHPq/+UJftyIEocUyuWAZSN1Jr" />
</div>
<script type="text/javascript">
<!--
WebForm_InitCallback();var TreeView1_Data = new Object();
TreeView1_Data.images = TreeView1_ImageArray;
TreeView1_Data.collapseToolTip = "Réduire {0}";
TreeView1_Data.expandToolTip = "Développer {0}";
TreeView1_Data.expandState = theForm.elements['TreeView1_ExpandState'];
TreeView1_Data.selectedNodeID = theForm.elements['TreeView1_SelectedNode'];
TreeView1_Data.hoverClass = 'TreeView1_8';
TreeView1_Data.hoverHyperLinkClass = 'TreeView1_7';
for (var i=0;i<6;i++) {
var preLoad = new Image();
if (TreeView1_ImageArray[i].length > 0)
preLoad.src = TreeView1_ImageArray[i];
}
TreeView1_Data.lastIndex = 45;
TreeView1_Data.populateLog = theForm.elements['TreeView1_PopulateLog'];
TreeView1_Data.treeViewID = 'TreeView1';
TreeView1_Data.name = 'TreeView1_Data';
// -->
</script>
</form>
</body>
</html>
J'esserai d'uploader ca dés ce soir (et de mettre un lien ici) ca sera plus clair que la tonne de code.
Ici par exemple j'aimerais que lors du redimensionnement vertical de la fenêtre seul la case blanche sous produit soit redimensionner et que les 4 autres cases en dessous ne bouge pas en hauteur.
--[Ne faites pas attention aux autres erreurs d'affichage]--
Ps: Cela à été dévellopé en ASP.NET mais le problème viens du Html
MERCI DE VOTRE PARTICIPATION[/i][/i]
Modifié par juanito38 (05 Jun 2007 - 10:19)