question on .tpl and <div id="board"
Posted: 17 May 2023, 14:22
Hi, I'm working on a copy of the basic "Chess" game, as a learning sandbox .. just reading over code, changing things to see the effect, and .. well . learning. I've however, hit a snag in understanding something.
in the Chess game, we have the following snippet from chess.tpl:
and in chess.css:
There's also a reference in chess.js, however, I'm not too concerned about that one for now. My question pertains to the above.
as I understand <div id="xxx">
it defines a division, with a unique identifier of "xxx" .. so it can be referenced specifically later.
and the matching entry in .css provides formatting options ..
ok .. great ..
so I should be able to change the id name of it:
from: "board" to "board_0" (ultimate goal - I'm trying to display multiple boards at same time
)
However, as soon as I update the .tpl to:
and the .css to:
the board still displays .. however the formatting is gone: not centered .. no border ..etc.
For some reason, it seems to not match up with the .css entry ?
Am I doing this right ?
in the Chess game, we have the following snippet from chess.tpl:
Code: Select all
<div id="board" class="{BOARD_TYPE}">
Code: Select all
#board {
display: inline-block;
margin: 1%;
position: relative;
border: 8px outset #663300;
margin-top: 20px;
}
as I understand <div id="xxx">
it defines a division, with a unique identifier of "xxx" .. so it can be referenced specifically later.
and the matching entry in .css provides formatting options ..
ok .. great ..
so I should be able to change the id name of it:
from: "board" to "board_0" (ultimate goal - I'm trying to display multiple boards at same time
)However, as soon as I update the .tpl to:
Code: Select all
<div id="board_0" class="{BOARD_TYPE}">
Code: Select all
#board_0 {
display: inline-block;
margin: 1%;
position: relative;
border: 8px outset #663300;
margin-top: 20px;
}
For some reason, it seems to not match up with the .css entry ?
Am I doing this right ?
