Problème de tableau ... [Résolu]

Signaler
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Salut,

Alors voilà, j'ai ce sympatique petit morceau de code mais j'ai un
problème ... Je ne comprends pas pourquoi la taille des cellules du
tableau dont l'id est Space ne garde pas ses cellules d'une largeur de
25 pixels, alors que ça marche si le tableau n'est pas imbriqué dans
les div ...

Désolé pour me manque d'explication, mais ... Essayez le code et vous allez comprendre.

<hr style="width: 100%; height: 2px;"><html>

<head>

<title>[machine de Turing]</title>

<script type="text/javascript">

var Timer;

function Initialize()

{

var i, RandomNumber;

i = 0;

while (i < 12)

{


RandomNumber = Math.round(25 * Math.random());


document.getElementById("Space").rows[0].cells[i].innerHTML =
RandomNumber;


//document.getElementById("Space").rows[0].cells[i].style.width =
"25px";

//alert(RandomNumber);


i++;

}

}

function StartMove()

{

document.getElementById("Mover").style.left = "0px";

Timer = setInterval("Move();", 10);

}

function Move()

{


document.getElementById("Mover").style.left =
(parseInt(document.getElementById("Mover").style.left) - 1) + "px";

}

function StopMove()

{

clearTimeout(Timer);

}

</script>

<style type="text/css">

#Space

{

padding: 0px;

margin: 0px;

border-style: none;

background-color: #FF0000;

border-collapse : collapse;

font-family: Courier New;

font-size: 11px;

color: #000000;

height: 25px;

/*width: 250px;*/

}

#Space tr td

{

border-style: none;

border-color: #000000;

border-width: 1px;

height: 25px;

width: 25px;

background-color: #00FF00;

vertical-align: middle;


text-align:
center;


}

#Space tr td

{

height: 25px;


width:
25px;


}

#Container

{

border-color: #000000;

border-style: solid;

border-width: 1px;

overflow: hidden;

height: 25px;

width: 250px;


background-color :
#FF0000;

}

#Mover

{

border-color: #000000;

border-style: none;

border-width: 1px;

overflow: auto;

background-color : #00FFFF;

position: relative;

top: 0px;

left: 0px;

width: 100%;

}

</style>

</head>











----

X,

X,

X,

X,

X,

X,

X,

X,

X,

X,

X,

X,


















</html>

<hr style="width: 100%; height: 2px;">Merci d'avance pour votre aide !
LocalStone

5 réponses

Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
Salut!C'est une question de comprehension.  Il faut comprendre qu'une cellule s'adapte a son container qui est le tr,table et ensuite les divs.Si la table (Space) augmente de taille ou diminue de taille alors elle augmente et diminue les cellule.  Lorsque la table est dans le div, elle répond au même schema.  Donc puisque tu n'a pas fixer la taille de la table, alors elle s'adapte a son container et ainsi diminue la taille des cellules.  Tu pourrait par exemple fixer la taille de la table a 300px  et bien sur mettre ton l'overflow de mover à hidden.  Mais ce qui est emmerdant c'est tu n'est jamais certain du résultat parce que ça dépend aussi de ce aue contient la cellule.  Si c'est plus gand que 25px alors là tu est cuit.Pour te dire franchement, une table pour du dhtml, c'est pas une bonne chose.  Je te propose d'utiliser que des divs :
[machine de Turing]var Timer;function Initialize(){var i, RandomNumber; i = 0;while (i #Space{background-color: #FF0000;border-collapse : collapse;font-family: Courier New;font-size: 11px;color: #000000;height: 25px;width: 300px;}#Space div{border-style: none;border-color: #000000;background-color: #00FF00;text-align: center; height: 25px;width: 25px;float:left;padding-top:3px; }#Container{border-color: #000000;border-style: solid;border-width: 1px; overflow: hidden;height: 25px;width: 250px;background-color : #FF0000; } #Mover{border-color: #000000;border-style: none;border-width: 1px; overflow: hidden;background-color : #00FFFF; position: relative;top: 0px;left: 0px;width: 100%; } XXXXXXX XXXXXXXA+, GhislainP.S.  Je ne suis pas certain mais je crois que maintenant du doit faire le move avec Space.
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
Oups, j'ai oubli d'enlever les alerts que j'ai mis lors de mon test... il faut bien sur les enlever
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Salut,

Merci pour ta réponse rapide et du coup, je vais essayer d'avancer mon
truc ce soir grâce à toi. Et je pense utiliser ta solution. Mais
j'aimerais quand même comprendre ... J'avais déjà essayer de fixer la
largeur du tableau, mais ça ne fonctionnait pas non plus (sachant que
le texte ne vas jamais dépasser les 25 pixels). Alors, n'y a t'il pas
un moyen de fixer la taille du tableau, et que quoi qu'il arrive, il ne
bouge pas ?

Le truc, c'est que je dois simuler une bande infinie qui se déplace
vers la gauche ou vers la droite. Pour ça, je prenait un tableau de 12
cases, mais on en affiche que 10 (la première et la dernière étant
cachées par le div). Et du coup, lors du déplacement, je déplace le
tableau de droite à gauche (ou l'inverse) et et une fois que que la
nouvelle case est affichée, je décale tous les chiffres et je remets le
tableau comme avant.

C'est pas super clair, mais j'espère que tu as compris. Donc si tu as
compris et que tu peux m'éclairer, ce serait sympa ! D'avance, merci
d'avance !

LocalStone
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
Salut!

Tu avais probalbement essayé de fixer le tableau a 250px et il falait le fixer a 300px pour ne pas compacter tes cellules. Voici le code avec le tableau et les modif que j'ai fait (en gras) :


<html>
<head>
<title>[machine de Turing]</title>

<script type= "text/javascript">

var Timer;

function Initialize
()

{

var i
, RandomNumber;
i
=
0;

while
(i
<
12)

{
RandomNumber
= Math
.round
(25
* Math
.random
());
document
.getElementById
("Space").rows
[0].cells
[i
].innerHTML
= RandomNumber;
//document.getElementById("Space").rows[0].cells[i].style.width = "25px";
//alert(RandomNumber);
i
++;

}

}

function StartMove
()

{
document
.getElementById
("Mover").style
.left
=
"0px";
Timer
= setInterval
("Move();",
10);

}

function Move
()

{
document
.getElementById
("Mover").style
.left
=
(parseInt
(document
.getElementById
("Mover").style
.left
)
-
1)
+
"px";

}

function StopMove
()

{
clearTimeout
(Timer
);

}

</script>

<style
type= "
text/
css">
#
Space

{

padding:
0px;

margin:
0px;

border-
style:
none;

background-
color:
#FF0000;

border-
collapse
:
collapse;

font-
family:
Courier
New;

font-
size:
11px;

color:
#000000;

height:
25px;

width:
300px;


}
#
Space
tr
td

{

border-
style:
none;

border-
color:
#000000;

border-
width:
1px;

height:
25px;

width:
25px;

background-
color:
#00FF00;

vertical-
align:
middle;

text-
align:
center;

}
#
Space
tr
td

{

height:
25px;

width:
25px;

}
#
Container

{

border-
color:
#000000;

border-
style:
solid;

border-
width:
1px;

overflow:
hidden;

height:
25px;

width:
250px;

background-
color
:
#FF0000;

}
#
Mover

{

border-
color:
#000000;

border-
style:
none;

border-
width:
1px;

overflow:
hidden;


background-
color
:
#00FFFF;

position:
relative;

top:
0px;

left:
0px;

width:
100%
;

}

</style>
</head>

"Container">

"Mover">

id =
\"Space\">

----

X
,

X
,

X
,

X
,

X
,

style=
"background-color: #0000FF;">X
,

X
,

X
,

X
,

X
,

X
,

X
,

</html>

A+, Ghislain
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Snif, tous ça parce que je connais pas mes tables de multiplications ... Merci beaucoup pour ton aide !

LocalStone