Accueil
Bonjour.
Voici mon code HTML :
Mon code CSS :
J'obtiens ce résultat :
Je suis plutôt content de moi mais le problème est que j'aimerais arriver à ce résultat :
Mais, je n'y arrive pas.
J'ai essayé avec un tableau où encore un float:left mais rien à faire, ça ne marche pas.
J'aurais donc besoin de votre aide s'il vous plaît ?
J'avoue, c'est assez urgent. Avant lundi, j'aimerais réussir à obtenir ce résultat.
Néanmoins, je vais continuer mes recherches de mon côté pour réussir à avoir ce résultat.
Voici mon code HTML :
- Spoiler:
- Code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<center>
<div id="formulaire">
<form id="latence" name="latence" method="post" action="latence.php">
<fieldset>
<legend>Latence :</legend>
<table>
<input name="latence1" type="checkbox" value="oui" OnClick="activerLatence();" /> Activer la latence
<tr>
<td>Time :</td>
<td><input type="number" name="time" disabled="disabled" /></td>
</tr>
<tr>
<td>Jitter :</td>
<td><input type="number" name="jitter" disabled="disabled" /></td>
</tr>
<tr>
<td>Correlation :</td>
<td><input type="number" name="correlation" disabled="disabled" /></td>
</tr>
</table>
<input id="submit" type="submit" value="Valider" disabled="disabled" />
</fieldset>
</form>
<form id="pertePaquet" name="pertePaquet" method="post" action="pertePaquet.php">
<fieldset>
<legend>Perte de paquet :</legend>
<table>
<input name="pertePaquet1" type="checkbox" value="oui" onclick="activerPerte();"> Activer la perte de paquet
<tr>
<td>Pourcent :</td>
<td><input type="number" name="pourcentPerte" disabled="disabled" /></td>
</tr>
<tr>
<td>Correlation :</td>
<td><input type="number" name="correlationPerte" disabled="disabled" /></td>
</tr>
</table>
<input id="submit" type="submit" value="Valider" disabled="disabled">
</fieldset>
</form>
</div>
<div id="formulaire1">
<form id="corruptionPaquet" name="corruptionPaquet" method="post" action="corruptionPaquet.php">
<fieldset>
<legend>Corruption de paquet :</legend>
<table>
<input name="corruptionPaquet1" type="checkbox" value="oui" onclick="activerCorruption();"> Activer la corruption de paquet
<tr>
<td>Pourcent :</td>
<td><input type="number" name="pourcentCorruption" disabled="disabled" /></td>
</tr>
<tr>
<td>Correlation :</td>
<td><input type="number" name="correlationCorruption" disabled="disabled" /></td>
</tr>
</table>
<input id="submit" type="submit" value="Valider" disabled="disabled">
</fieldset>
</form>
<form id="duplicationPaquet" name="duplicationPaquet" method="post" action="duplicationPaquet.php">
<fieldset>
<legend>Duplication de paquet :</legend>
<table>
<input name="duplicationPaquet1" type="checkbox" value="oui" onclick="activerDuplication();"> Activer la duplication de paquet
<tr>
<td>Pourcent :</td>
<td><input type="number" name="pourcentDuplication" disabled="disabled" /></td>
</tr>
<tr>
<td>Correlation :</td>
<td><input type="number" name="correlationDuplication" disabled="disabled" /></td>
</tr>
</table>
<input id="submit" type="submit" value="Valider" disabled="disabled">
</fieldset>
</form>
</div>
</center>
<script type="text/javascript">
function activerLatence(){
if(document.latence.latence1.checked == true){
document.latence.time.disabled = false;
}
else {
document.latence.time.disabled = true;
}
if (document.latence.latence1.checked == true){
document.latence.jitter.disabled = false;
}
else {
document.latence.jitter.disabled = true;
}
if (document.latence.latence1.checked == true){
document.latence.correlation.disabled = false;
}
else {
document.latence.correlation.disabled = true;
}
if (document.latence.latence1.checked == true){
document.latence.submit.disabled = false;
}
else {
document.latence.submit.disabled = true;
}
}
function activerPerte(){
if(document.pertePaquet.pertePaquet1.checked == true){
document.pertePaquet.pourcentPerte.disabled = false;
}
else {
document.pertePaquet.pourcentPerte.disabled = true;
}
if (document.pertePaquet.pertePaquet1.checked == true){
document.pertePaquet.correlationPerte.disabled = false;
}
else {
document.pertePaquet.correlationPerte.disabled = true;
}
if (document.pertePaquet.pertePaquet1.checked == true){
document.pertePaquet.submit.disabled = false;
}
else {
document.pertePaquet.submit.disabled = true;
}
}
function activerCorruption() {
if(document.corruptionPaquet.corruptionPaquet1.checked == true){
document.corruptionPaquet.pourcentCorruption.disabled = false;
}
else {
document.corruptionPaquet.pourcentCorruption.disabled = true;
}
if (document.corruptionPaquet.corruptionPaquet1.checked == true){
document.corruptionPaquet.correlationCorruption.disabled = false;
}
else {
document.corruptionPaquet.correlationCorruption.disabled = true;
}
if (document.corruptionPaquet.corruptionPaquet1.checked == true){
document.corruptionPaquet.submit.disabled = false;
}
else {
document.corruptionPaquet.submit.disabled = true;
}
}
function activerDuplication(){
if(document.duplicationPaquet.duplicationPaquet1.checked == true){
document.duplicationPaquet.pourcentDuplication.disabled = false;
}
else {
document.duplicationPaquet.pourcentDuplication.disabled = true;
}
if (document.duplicationPaquet.duplicationPaquet1.checked == true){
document.duplicationPaquet.correlationDuplication.disabled = false;
}
else {
document.duplicationPaquet.correlationDuplication.disabled = true;
}
if (document.duplicationPaquet.duplicationPaquet1.checked == true){
document.duplicationPaquet.submit.disabled = false;
}
else {
document.duplicationPaquet.submit.disabled = true;
}
}
</script>
</html>
Mon code CSS :
- Spoiler:
- Code:
body {
font-family:"trebuchet ms",sans-serif;
font-size:90%;
}
form {
background-color:#FAFAFA;
padding:10px;
width:380px;
}
fieldset {
padding:0 20px 20px 20px;
margin-bottom:10px;
border:1px solid #DF3F3F;
}
legend {
color:#DF3F3F;
font-weight:bold;
}
input[type=number],[type=submit] {
background-color:#FFF3F3;
padding:3px;
border:1px solid #F5C5C5;
border-radius:5px;
width:200px;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
input[type=radio] {
background-color:transparent;
border:none;
width:10px;
}
input[type=submit]{
width:100px;
margin-left:5px;
box-shadow:1px 1px 1px #D83F3D;
cursor:pointer;
}
J'obtiens ce résultat :
- Spoiler:
Je suis plutôt content de moi mais le problème est que j'aimerais arriver à ce résultat :
- Spoiler:
Mais, je n'y arrive pas.
J'ai essayé avec un tableau où encore un float:left mais rien à faire, ça ne marche pas.
J'aurais donc besoin de votre aide s'il vous plaît ?
J'avoue, c'est assez urgent. Avant lundi, j'aimerais réussir à obtenir ce résultat.
Néanmoins, je vais continuer mes recherches de mon côté pour réussir à avoir ce résultat.
Dernière édition par Kiv' le Dim 6 Mar - 19:08, édité 1 fois
