Created
January 27, 2012 09:35
-
-
Save ezzatron/1687985 to your computer and use it in GitHub Desktop.
Nice Sudoku layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Sudoku layout</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<style type="text/css"> | |
/* change font size to change scale */ | |
.sudoku-grid { | |
font-size: 24px; | |
} | |
/* groups */ | |
.sudoku-grid > div > div { | |
float: left; | |
border: 1px solid black; | |
} | |
/* rows */ | |
.sudoku-grid > div | |
, .sudoku-grid > div > div > div { | |
clear: left; | |
} | |
/* cells */ | |
.sudoku-grid > div > div > div > div { | |
float: left; | |
width: 1.3em; | |
height: 1.3em; | |
border-right: 1px solid lightgrey; | |
border-bottom: 1px solid lightgrey; | |
text-align: center; | |
line-height: 1.3em; | |
} | |
/* outer border tweaks */ | |
.sudoku-grid > div > div:first-child { | |
border-left: 2px solid black; | |
} | |
.sudoku-grid > div > div:last-child { | |
border-right: 2px solid black; | |
} | |
.sudoku-grid > div:first-child > div { | |
border-top: 2px solid black; | |
} | |
.sudoku-grid > div:last-child > div { | |
border-bottom: 2px solid black; | |
} | |
/* inner border tweaks */ | |
.sudoku-grid > div > div > div div:last-child { | |
border-right: none; | |
} | |
.sudoku-grid > div > div > div:last-child div { | |
border-bottom: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="sudoku-grid"> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
<div>2</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>2</div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div>4</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>3</div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div style="clear: left; height: 30px;"></div> | |
<div class="sudoku-grid"> | |
<div> | |
<div> | |
<div> | |
<div>5</div> | |
<div>3</div> | |
<div></div> | |
</div> | |
<div> | |
<div>6</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>9</div> | |
<div>8</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>7</div> | |
<div></div> | |
</div> | |
<div> | |
<div>1</div> | |
<div>9</div> | |
<div>5</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>6</div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div>8</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>4</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>7</div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>6</div> | |
<div></div> | |
</div> | |
<div> | |
<div>8</div> | |
<div></div> | |
<div>3</div> | |
</div> | |
<div> | |
<div></div> | |
<div>2</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>3</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>1</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>6</div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
<div>6</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>4</div> | |
<div>1</div> | |
<div>9</div> | |
</div> | |
<div> | |
<div></div> | |
<div>8</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div>2</div> | |
<div>8</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>5</div> | |
</div> | |
<div> | |
<div></div> | |
<div>7</div> | |
<div>9</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div style="clear: left; height: 30px;"></div> | |
<div class="sudoku-grid"> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
<div>4</div> | |
<div>6</div> | |
<div>8</div> | |
</div> | |
<div> | |
<div>1</div> | |
<div></div> | |
<div></div> | |
<div>13</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>7</div> | |
<div></div> | |
</div> | |
<div> | |
<div>11</div> | |
<div>3</div> | |
<div>2</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>16</div> | |
</div> | |
<div> | |
<div></div> | |
<div>2</div> | |
<div>10</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>11</div> | |
<div>3</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>13</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>1</div> | |
<div>14</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>7</div> | |
<div>3</div> | |
</div> | |
<div> | |
<div>2</div> | |
<div></div> | |
<div>9</div> | |
<div></div> | |
</div> | |
<div> | |
<div>5</div> | |
<div>6</div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>2</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>6</div> | |
</div> | |
<div> | |
<div></div> | |
<div>14</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>4</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>4</div> | |
</div> | |
<div> | |
<div></div> | |
<div>2</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>10</div> | |
<div></div> | |
<div></div> | |
<div>15</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>15</div> | |
<div>8</div> | |
</div> | |
<div> | |
<div></div> | |
<div>3</div> | |
<div>2</div> | |
<div></div> | |
</div> | |
<div> | |
<div>11</div> | |
<div>10</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>7</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>11</div> | |
<div></div> | |
</div> | |
<div> | |
<div>13</div> | |
<div></div> | |
<div>8</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>15</div> | |
<div></div> | |
<div>7</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>5</div> | |
<div>16</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>2</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>9</div> | |
<div></div> | |
<div>15</div> | |
</div> | |
<div> | |
<div>14</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>1</div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div>14</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>16</div> | |
</div> | |
<div> | |
<div>7</div> | |
<div></div> | |
<div>11</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>10</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div>16</div> | |
<div>5</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>14</div> | |
<div></div> | |
<div>7</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>8</div> | |
<div></div> | |
<div>13</div> | |
</div> | |
<div> | |
<div></div> | |
<div>12</div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>8</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>4</div> | |
<div>12</div> | |
</div> | |
<div> | |
<div></div> | |
<div>16</div> | |
<div>2</div> | |
<div></div> | |
</div> | |
<div> | |
<div>1</div> | |
<div>3</div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div>1</div> | |
<div></div> | |
<div></div> | |
<div>3</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>8</div> | |
<div></div> | |
</div> | |
<div> | |
<div>12</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div>11</div> | |
</div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>15</div> | |
<div></div> | |
</div> | |
<div> | |
<div>5</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>13</div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div></div> | |
<div>16</div> | |
<div>15</div> | |
</div> | |
<div> | |
<div></div> | |
<div>14</div> | |
<div></div> | |
<div>10</div> | |
</div> | |
<div> | |
<div>13</div> | |
<div>6</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>7</div> | |
<div>5</div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>12</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>5</div> | |
<div>6</div> | |
<div></div> | |
</div> | |
<div> | |
<div></div> | |
<div>14</div> | |
<div>16</div> | |
<div></div> | |
</div> | |
<div> | |
<div>10</div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
<div> | |
<div> | |
<div></div> | |
<div>10</div> | |
<div>7</div> | |
<div>13</div> | |
</div> | |
<div> | |
<div></div> | |
<div>11</div> | |
<div></div> | |
<div></div> | |
</div> | |
<div> | |
<div>2</div> | |
<div></div> | |
<div></div> | |
<div>12</div> | |
</div> | |
<div> | |
<div>9</div> | |
<div>6</div> | |
<div>14</div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment