Skip to content

Instantly share code, notes, and snippets.

@thechainercygnus

thechainercygnus/test.css

Created July 30, 2015 19:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thechainercygnus/eb4be5b02e07b5703aed to your computer and use it in GitHub Desktop.
Save thechainercygnus/eb4be5b02e07b5703aed to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid Overlay for Map
Raw
test.css
.framing {
height: 1050px;
width: 2050px;
position: relative;
background-color: gray;
}
.image {
position: absolute;
margin-top: 25px;
margin-left: 25px;
}
img {
height: 1000px;
width: 2000 px;
}
.grid {
position: absolute;
margin-top: 25px;
margin-left: 25px;
}
.sqr {
position: relative;
display: block;
height: 98px;
width: 96px;
border: 1px solid black;
text-align: center;
}
.sqr p {
font-size: 25px;
padding-top: 10px;
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Raw
test.html
<DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="framing">
<div class="image">
<img src="./map.png" />
</div>
<div class="grid">
<div class="sqr"><p>1
</p></div>
<div class="sqr"><p>2
</p></div>
<div class="sqr"><p>3
</p></div>
<div class="sqr"><p>4
</p></div>
<div class="sqr"><p>5
</p></div>
<div class="sqr"><p>6
</p></div>
<div class="sqr"><p>7
</p></div>
<div class="sqr"><p>8
</p></div>
<div class="sqr"><p>9
</p></div>
<div class="sqr"><p>10
</p></div>
<div class="sqr"><p>11
</p></div>
<div class="sqr"><p>12
</p></div>
<div class="sqr"><p>13
</p></div>
<div class="sqr"><p>14
</p></div>
<div class="sqr"><p>15
</p></div>
<div class="sqr"><p>16
</p></div>
<div class="sqr"><p>17
</p></div>
<div class="sqr"><p>18
</p></div>
<div class="sqr"><p>19
</p></div>
<div class="sqr"><p>20
</p></div>
<div class="sqr"><p>21
</p></div>
<div class="sqr"><p>22
</p></div>
<div class="sqr"><p>23
</p></div>
<div class="sqr"><p>24
</p></div>
<div class="sqr"><p>25
</p></div>
<div class="sqr"><p>26
</p></div>
<div class="sqr"><p>27
</p></div>
<div class="sqr"><p>28
</p></div>
<div class="sqr"><p>29
</p></div>
<div class="sqr"><p>30
</p></div>
<div class="sqr"><p>31
</p></div>
<div class="sqr"><p>32
</p></div>
<div class="sqr"><p>33
</p></div>
<div class="sqr"><p>34
</p></div>
<div class="sqr"><p>35
</p></div>
<div class="sqr"><p>36
</p></div>
<div class="sqr"><p>37
</p></div>
<div class="sqr"><p>38
</p></div>
<div class="sqr"><p>39
</p></div>
<div class="sqr"><p>40
</p></div>
<div class="sqr"><p>42
</p></div>
<div class="sqr"><p>43
</p></div>
<div class="sqr"><p>44
</p></div>
<div class="sqr"><p>45
</p></div>
<div class="sqr"><p>46
</p></div>
<div class="sqr"><p>47
</p></div>
<div class="sqr"><p>48
</p></div>
<div class="sqr"><p>49
</p></div>
<div class="sqr"><p>50
</p></div>
<div class="sqr"><p>51
</p></div>
<div class="sqr"><p>52
</p></div>
<div class="sqr"><p>53
</p></div>
<div class="sqr"><p>54
</p></div>
<div class="sqr"><p>55
</p></div>
<div class="sqr"><p>56
</p></div>
<div class="sqr"><p>57
</p></div>
<div class="sqr"><p>58
</p></div>
<div class="sqr"><p>59
</p></div>
<div class="sqr"><p>60
</p></div>
<div class="sqr"><p>61
</p></div>
<div class="sqr"><p>62
</p></div>
<div class="sqr"><p>63
</p></div>
<div class="sqr"><p>64
</p></div>
<div class="sqr"><p>65
</p></div>
<div class="sqr"><p>66
</p></div>
<div class="sqr"><p>67
</p></div>
<div class="sqr"><p>68
</p></div>
<div class="sqr"><p>69
</p></div>
<div class="sqr"><p>70
</p></div>
<div class="sqr"><p>71
</p></div>
<div class="sqr"><p>72
</p></div>
<div class="sqr"><p>73
</p></div>
<div class="sqr"><p>74
</p></div>
<div class="sqr"><p>75
</p></div>
<div class="sqr"><p>76
</p></div>
<div class="sqr"><p>77
</p></div>
<div class="sqr"><p>78
</p></div>
<div class="sqr"><p>79
</p></div>
<div class="sqr"><p>80
</p></div>
<div class="sqr"><p>81
</p></div>
<div class="sqr"><p>82
</p></div>
<div class="sqr"><p>83
</p></div>
<div class="sqr"><p>84
</p></div>
<div class="sqr"><p>85
</p></div>
<div class="sqr"><p>86
</p></div>
<div class="sqr"><p>87
</p></div>
<div class="sqr"><p>88
</p></div>
<div class="sqr"><p>89
</p></div>
<div class="sqr"><p>90
</p></div>
<div class="sqr"><p>91
</p></div>
<div class="sqr"><p>92
</p></div>
<div class="sqr"><p>93
</p></div>
<div class="sqr"><p>94
</p></div>
<div class="sqr"><p>95
</p></div>
<div class="sqr"><p>96
</p></div>
<div class="sqr"><p>97
</p></div>
<div class="sqr"><p>98
</p></div>
<div class="sqr"><p>99
</p></div>
<div class="sqr"><p>100
</p></div>
<div class="sqr"><p>101
</p></div>
<div class="sqr"><p>102
</p></div>
<div class="sqr"><p>103
</p></div>
<div class="sqr"><p>104
</p></div>
<div class="sqr"><p>105
</p></div>
<div class="sqr"><p>106
</p></div>
<div class="sqr"><p>107
</p></div>
<div class="sqr"><p>108
</p></div>
<div class="sqr"><p>109
</p></div>
<div class="sqr"><p>110
</p></div>
<div class="sqr"><p>111
</p></div>
<div class="sqr"><p>112
</p></div>
<div class="sqr"><p>113
</p></div>
<div class="sqr"><p>114
</p></div>
<div class="sqr"><p>115
</p></div>
<div class="sqr"><p>116
</p></div>
<div class="sqr"><p>117
</p></div>
<div class="sqr"><p>118
</p></div>
<div class="sqr"><p>119
</p></div>
<div class="sqr"><p>120
</p></div>
<div class="sqr"><p>121
</p></div>
<div class="sqr"><p>122
</p></div>
<div class="sqr"><p>123
</p></div>
<div class="sqr"><p>124
</p></div>
<div class="sqr"><p>125
</p></div>
<div class="sqr"><p>126
</p></div>
<div class="sqr"><p>127
</p></div>
<div class="sqr"><p>128
</p></div>
<div class="sqr"><p>129
</p></div>
<div class="sqr"><p>130
</p></div>
<div class="sqr"><p>131
</p></div>
<div class="sqr"><p>132
</p></div>
<div class="sqr"><p>133
</p></div>
<div class="sqr"><p>134
</p></div>
<div class="sqr"><p>135
</p></div>
<div class="sqr"><p>136
</p></div>
<div class="sqr"><p>137
</p></div>
<div class="sqr"><p>138
</p></div>
<div class="sqr"><p>139
</p></div>
<div class="sqr"><p>140
</p></div>
<div class="sqr"><p>141
</p></div>
<div class="sqr"><p>142
</p></div>
<div class="sqr"><p>143
</p></div>
<div class="sqr"><p>144
</p></div>
<div class="sqr"><p>145
</p></div>
<div class="sqr"><p>146
</p></div>
<div class="sqr"><p>147
</p></div>
<div class="sqr"><p>148
</p></div>
<div class="sqr"><p>149
</p></div>
<div class="sqr"><p>150
</p></div>
<div class="sqr"><p>151
</p></div>
<div class="sqr"><p>152
</p></div>
<div class="sqr"><p>153
</p></div>
<div class="sqr"><p>154
</p></div>
<div class="sqr"><p>155
</p></div>
<div class="sqr"><p>156
</p></div>
<div class="sqr"><p>157
</p></div>
<div class="sqr"><p>158
</p></div>
<div class="sqr"><p>159
</p></div>
<div class="sqr"><p>160
</p></div>
<div class="sqr"><p>161
</p></div>
<div class="sqr"><p>162
</p></div>
<div class="sqr"><p>163
</p></div>
<div class="sqr"><p>164
</p></div>
<div class="sqr"><p>165
</p></div>
<div class="sqr"><p>166
</p></div>
<div class="sqr"><p>167
</p></div>
<div class="sqr"><p>168
</p></div>
<div class="sqr"><p>169
</p></div>
<div class="sqr"><p>170
</p></div>
<div class="sqr"><p>171
</p></div>
<div class="sqr"><p>172
</p></div>
<div class="sqr"><p>173
</p></div>
<div class="sqr"><p>174
</p></div>
<div class="sqr"><p>175
</p></div>
<div class="sqr"><p>176
</p></div>
<div class="sqr"><p>177
</p></div>
<div class="sqr"><p>178
</p></div>
<div class="sqr"><p>179
</p></div>
<div class="sqr"><p>180
</p></div>
<div class="sqr"><p>181
</p></div>
<div class="sqr"><p>182
</p></div>
<div class="sqr"><p>183
</p></div>
<div class="sqr"><p>184
</p></div>
<div class="sqr"><p>185
</p></div>
<div class="sqr"><p>186
</p></div>
<div class="sqr"><p>187
</p></div>
<div class="sqr"><p>188
</p></div>
<div class="sqr"><p>189
</p></div>
<div class="sqr"><p>190
</p></div>
<div class="sqr"><p>191
</p></div>
<div class="sqr"><p>192
</p></div>
<div class="sqr"><p>193
</p></div>
<div class="sqr"><p>194
</p></div>
<div class="sqr"><p>195
</p></div>
<div class="sqr"><p>196
</p></div>
<div class="sqr"><p>197
</p></div>
<div class="sqr"><p>198
</p></div>
<div class="sqr"><p>199
</p></div>
<div class="sqr"><p>200
</p></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment