CIS 3630 Extra Credit

Adding a black border

by AnnmarieGajdos

HTML

<div class="board" id="border">


<div class="bluesquare"><img class="centered" alt="white king" src="http://cis3630.org/white-king.png"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div class="graysquare"><img class="centered" alt="white king" src="http://cis3630.org/white-king.png"></div>
<div class="bluesquare"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div class="clear"></div>

</div>

CSS

img { border-style: none;margin-left:auto;margin-right:auto; }
}
/* using a class */    
div.board {width:920px;height:920px;}

#border {
	border:10px solid black; 
    margin-right:auto; margin-left:auto;
}
div.bluesquare {width:300px;background-color:blue;float:left;height:300px;}      
div.graysquare {width:300px;background-color:gray;float:left;height:300px;} 
img.centered {display: block;margin-left: auto;margin-right: auto }

@media only screen and (max-width: 1024px) {
div.board {width:590px;height:590px;border:10px:solid;border-color:black;margin-right: auto;margin-left: auto; padding: .00000000001% .001% .000000000000001% .00000001%;}  
div.bluesquare {width:190px;background-color:blue;float:left;height:190px;}      
div.graysquare {width:190px;background-color:gray;float:left;height:190px;} 
img.centered {display: block;margin-left: auto;margin-right: auto;height:50%;width:auto; }  
}
@media only screen and (max-width: 768px) {
div.board {width:320px;height:320px;border-width:10px:solid;border-color:black;margin-right: auto;margin-left: auto;}  
div.bluesquare {width:100px;background-color:blue;float:left;height:100px;}      
div.graysquare {width:100px;background-color:gray;float:left;height:100px;} 
img.centered {display: block;margin-left: auto;margin-right: auto;height:50%;width:auto; }  
}
img.sheet {width: 100%;height: auto;}
a:visited {color: #FF00FF;} a:hover {color: #00FF00;}

.clear {
	clear: both;
}