DCG Card Printsheets

CSS

/* Jess's CSS */
 
body
{
   /* Default <body> style */
   margin: 0;
   padding: 0;
   font-family: Arial, san-serif;
}
 
/*
   -----------
   ID'd styles
   -----------
*/
 
#card1, #card2, #card3,
#card4, #card5, #card6,
#card7, #card8, #card9
{
   margin:0;
   width:2.5in;
   height:3.5in;
   float:left;
   border:3px solid black;
}
 
#card1, #card4, #card7
{
   background-color:#622;
}
 
#card2, #card5, #card8
{
   background-color:#262;
}
 
#card3, #card6, #card9
{
   background-color:#226;
}
 
/* 
   -------------
   Style classes
   -------------
*/
 
div.cardRow
{
   clear:both;
   margin:0;
   padding:0;
}
 
div.tblContainer
{
   width:2.2in;
   margin:0.1in auto 0;
}
 
table.gridRefTbl
{
   border-collapse:collapse;
   width:100%;
   font-size:75%;
}
 
table.gridRefTbl tr td.gridRefCell
{
   text-align:center;
   vertical-align:middle;
}
 
table.gridRefTbl tr td#gridACell
{
   background-color:white;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridARefCell
{
   background-color:white;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridBCell
{
   background-color:red;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridBRefCell
{
   background-color:red;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridCCell
{
   background-color:yellow;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridCRefCell
{
   background-color:yellow;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridDCell
{
   background-color:#0FF;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridDRefCell
{
   background-color:#0FF;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridECell
{
   background-color:#F0F;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridERefCell
{
   background-color:#F0F;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridFCell
{
   background-color:blue;
   color:white;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridFRefCell
{
   background-color:blue;
   color:white;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridGCell
{
   background-color:green;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridGRefCell
{
   background-color:green;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridHCell
{
   background-color:#F80;
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px dotted black;
   border-bottom:1px solid black;
}
 
table.gridRefTbl tr td#gridHRefCell
{
   background-color:#F80;
   border-top:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
}
 
span.square
{
   font-size:145%;
}
 
div.imgContainer
{
   width:2in;
   margin:0.1in auto 0;
}
 
div.imgContainer img
{
   width:2in;
   height:2in;
}
 
div.nameContainer
{
   width:2.2in;
   margin:0 auto;
   text-align:center;
   background-color:white;
   border:5px groove black;
}
 
div.typeContainer
{
   width:2.2in;
   margin:0.05in auto 0;
   text-align:center;
   background-color:black;
   color:yellow;
   font-weight:bold;
   border:5px groove black;
}

(X)HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>
  Dime Coated
 </title>
 
 <!-- Include my CSS -->
 <link rel="stylesheet" type="text/css" href="DCG.css" />
 
</head>
 
<body> <!-- DESIGNED FOR LANDSCAPE PRINT ORIENTATION -->
 
<div id="outercontainer">
 <div class="cardRow">
  <div id="card1">
   <div class="tblContainer">
    <table border="0" class="gridRefTbl">
     <tr>
      <td id="gridACell" class="gridRefCell">A</td><td id="gridARefCell" class="gridRefCell">2 <span class="square">&#x25A1;</span></td>
      <td id="gridBCell" class="gridRefCell">B</td><td id="gridBRefCell" class="gridRefCell">2 &#x25B3;</td>
      <td id="gridCCell" class="gridRefCell">C</td><td id="gridCRefCell" class="gridRefCell">2 &#x25C7;</td>
      <td id="gridDCell" class="gridRefCell">D</td><td id="gridDRefCell" class="gridRefCell">2 &#x25EF;</td>
     </tr>
     <tr>
      <td id="gridECell" class="gridRefCell">E</td><td id="gridERefCell" class="gridRefCell">2 &#x25B3;</td>
      <td id="gridFCell" class="gridRefCell">F</td><td id="gridFRefCell" class="gridRefCell">2 &#x25C7;</td>
      <td id="gridGCell" class="gridRefCell">G</td><td id="gridGRefCell" class="gridRefCell">2 &#x25EF;</td>
      <td id="gridHCell" class="gridRefCell">H</td><td id="gridHRefCell" class="gridRefCell">2 <span class="square">&#x25A1;</span></td>
     </tr>
    </table>
   </div>
   <div class="imgContainer">
    <img src="NES_Controller.jpg"/>
   </div>
   <div class="nameContainer">
    NES Controller
   </div>
   <div class="typeContainer">
    Cause of Death
   </div>
  </div>
  <div id="card2">
  </div>
  <div id="card3">
  </div>
  <div id="card4">
  </div>
 </div>
 <div class="cardRow">
  <div id="card5">
  </div>
  <div id="card6">
  </div>
  <div id="card7">
  </div>
  <div id="card8">
  </div>
 </div>
</div>
 
</body>
</html>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License