HTML and CSS Reference
In-Depth Information
<div id="@id" class="@css" draggable="false">
</div>
</text>
}
}
3.
This code uses two nested
for
loops to create the
div
elements. Inside the second
for loop, the
id
variable is computed by concatenating the
x
and
y
variables. The
css
variable alternates between bwhite and bblack. For even-numbered rows, the even
columns are black and the odd columns are white. This reverses for odd-numbered
rows. The
draggable
attribute is set to false because we don't want squares being
dragged; only pieces.
4.
now you'll need to add some style rules to set the size and color of each square. Add
the
style
element shown in Listing 14-2 inside the
head
element.
Listing 14-2.
Adding the CSS styles
<style type="text/css" >
.board
{
width: 400px;
height: 400px;
}
.bblack
{
background-color: #b93030;
border-color: #b93030;
border-width: 1px;
border-style: solid;
width: 48px;
height: 48px;
float: left;
margin: 0px;
padding: 0px;
}
.bwhite
{
background-color: #f7f7f7;
border-color: #b93030;
border-width: 1px;
border-style: solid;
width: 48px;
height: 48px;
float: left;
margin: 0px;
padding: 0px;
}
</style>
