Bonjour à vous,
j'aurai besoin de votre aide concernant un problème que je rencontre actuellement.
J'ai une page, avec un div en position relative afin de pouvoir mettre en absolu à l'intérieur un design d'un cadre aux bords arrondis. A l'intérieur de ce div j'ai un tableau qui contient un formulaire, et je souhaite faire apparaître un tr contenant mon bouton submit lorsqu'un événement onkeyup survient sur un input type text. Cela marche parfaitement, cependant sous ie j'obtiens un problème à l'apparition du bouton submit, mon tableau déborde sur le cadre du design, le div n'est pas redimmensionné.
Voici un résumé du code :
Voila, si vous avez une idée cela m'aiderait énormément. Merci d'avance.
j'aurai besoin de votre aide concernant un problème que je rencontre actuellement.
J'ai une page, avec un div en position relative afin de pouvoir mettre en absolu à l'intérieur un design d'un cadre aux bords arrondis. A l'intérieur de ce div j'ai un tableau qui contient un formulaire, et je souhaite faire apparaître un tr contenant mon bouton submit lorsqu'un événement onkeyup survient sur un input type text. Cela marche parfaitement, cependant sous ie j'obtiens un problème à l'apparition du bouton submit, mon tableau déborde sur le cadre du design, le div n'est pas redimmensionné.
Voici un résumé du code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
font-family: tahoma, verdana, arial, sans;
font-size: smaller;
text-align: center;
margin: 0px;
}
#page {
width: 90%;
margin: 0 auto;
text-align: left;
min-width: 1000px;
}
#page #content {
position: relative;
z-index: 1;
margin: 5px 0px 0px 0px;
padding: 5px 0px 20px 0px;
border: 1px dotted red;
}
#page #content #content-top-left {
position: absolute;
top: 0;
left: 0;
background-image: url('images/body-tl.png');
width: 14px;
height: 14px;
z-index: 2;
}
#page #content #content-top {
position: absolute;
top: 0;
background-image: url('images/body-center-top.png');
background-repeat: repeat-x;
width: 100%;
height: 14px;
z-index: 1;
}
#page #content #content-top-right {
position: absolute;
top: 0;
right: 0;
background-image: url('images/body-tr.png');
width: 14px;
height: 14px;
z-index: 2;
}
#page #content #content-right {
position: absolute;
top: 0;
left: 0;
background-image: url('images/body-middle-left.png');
background-repeat: repeat-y;
width: 14px;
height: 100%;
z-index: 1;
}
#page #content #content-left {
position: absolute;
top: 0;
right: 0;
background-image: url('images/body-middle-right.png');
background-repeat: repeat-y;
width: 14px;
height: 100%;
z-index: 1;
}
#page #content #content-bottom-left {
position: absolute;
bottom: 0;
left: 0;
background-image: url('images/body-bl.png');
width: 14px;
height: 14px;
z-index: 2;
}
#page #content #content-bottom {
position: absolute;
bottom: 0;
background-image: url('images/body-center-bottom.png');
background-repeat: repeat-x;
width: 100%;
height: 14px;
z-index: 1;
}
#page #content #content-bottom-right {
position: absolute;
bottom: 0;
right: 0;
background-image: url('images/body-br.png');
width: 14px;
height: 14px;
z-index: 2;
}
#page #content #content-text {
min-height: 50px;
padding: 18px;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
<div id="content-top-left"> </div>
<div id="content-top"> </div>
<div id="content-top-right"> </div>
<div id="content-left"> </div>
<div id="content-right"> </div>
<div id="content-bottom-left"> </div>
<div id="content-bottom"> </div>
<div id="content-bottom-right"> </div>
<div id="content-text">
<form method="post" action ="">
<table style="width: 400px; border: 1px dashed green; height: 100%">
<tr>
<td>Test1</td>
<td><input type="text" onkeyup="document.getElementById('toto').style.display = 'block'"/></td>
</tr>
<tr>
<td>Test2</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Test3</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Test4</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Test5</td>
<td><input type="text" /></td>
</tr>
<tr id="toto" style="display: none">
<td colspan="2">
<input type="submit" value="Envoyer" />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>Voila, si vous avez une idée cela m'aiderait énormément. Merci d'avance.
