Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!------ HTML ---->
- <!DOCTYPE html>
- <html>
- <head>
- <title>Vierkant gedoe</title>
- <link rel="stylesheet" type="text/css" href="global.css">
- </head>
- <body>
- <table>
- <tr>
- <td class="elem1"></td>
- <td class="elem2"></td>
- <td class="elem3"></td>
- <td class="elem4"></td>
- <td class="elem5"></td>
- <td class="elem6"></td>
- <td class="elem7"></td>
- <td class="elem8"></td>
- <td class="elem9"></td>
- <td class="elem10"></td>
- <td class="elem11"></td>
- <td class="elem12"></td>
- <td class="elem13"></td>
- <td class="elem14"></td>
- <td class="elem15"></td>
- </tr>
- </table>
- </body>
- </html>
- <!---- CSS ---->
- body {
- width: 100%;
- height: 100%;
- margin: 10;
- padding: 10;
- background-color: #999;
- }
- table {
- width: 500px;
- height: 500px;
- margin: 0;
- padding: 0;
- border-collapse: collapse;
- }
- .elem1 {
- width: 100px;
- height: 200px;
- margin: 0;
- padding: 0;
- position: absolute;
- background: #000;
- border: 2px solid black;
- }
- .elem2 {
- width: 100px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 102px;
- background: #FFFF00;
- border: 2px solid black;
- }
- .elem3 {
- width: 200px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 204px;
- background: #FF0000;
- border: 2px solid black;
- }
- .elem6 {
- width: 100px;
- height: 200px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 406px;
- background: #0000FF;
- border: 2px solid black;
- }
- .elem4 {
- width: 200px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 102px;
- margin-top: 102px;
- background: #fff;
- border: 2px solid black;
- }
- .elem5 {
- width: 100px;
- height: 202px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 304px;
- margin-top: 102px;
- background: #FFFF00;
- border: 2px solid black;
- }
- .elem7 {
- width: 200px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-top: 204px;
- background: #0000FF;
- border: 2px solid black;
- }
- .elem8 {
- width: 100px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 202px;
- margin-top: 204px;
- background: #000;
- border: 2px solid black;
- }
- .elem9 {
- width: 100px;
- height: 200px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 406px;
- margin-top: 202px;
- background: #fff;
- border: 2px solid black;
- }
- .elem10 {
- width: 100px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-top: 306px;
- background: #fff;
- border: 2px solid black;
- }
- .elem11 {
- width: 100px;
- height: 200px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 102px;
- margin-top: 306px;
- background: #FFFF00;
- border: 2px solid black;
- }
- .elem12 {
- width: 200px;
- height: 98px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 204px;
- margin-top: 306px;
- background: #FF0000;
- border: 2px solid black;
- }
- .elem13 {
- width: 100px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-top: 406px;
- background: #FF0000;
- border: 2px solid black;
- }
- .elem14 {
- width: 100px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 204px;
- margin-top: 406px;
- background: #0000FF;
- border: 2px solid black;
- }
- .elem15 {
- width: 200px;
- height: 100px;
- margin: 0;
- padding: 0;
- position: absolute;
- margin-left: 306px;
- margin-top: 406px;
- background: #000;
- border: 2px solid black;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement