2 changed files with 98 additions and 0 deletions
+ 69
- 0
04-EX01/opdracht.css
View File
| @@ -0,0 +1,69 @@ | |||
| .eerste { | |||
| background-color:gold; | |||
| height: 50px; | |||
| width: 100%; | |||
| position: fixed; | |||
| padding-left: 5px; | |||
| } | |||
| .balk{ | |||
| background-color: blue; | |||
| height: 40px; | |||
| width: 700px; | |||
| position: absolute; | |||
| bottom: 5px; | |||
| } | |||
| .menu1 { | |||
| border: 5px solid green; | |||
| } | |||
| .menu2 { | |||
| border: 5px solid green; | |||
| } | |||
| .menu3 { | |||
| border: 5px solid green; | |||
| } | |||
| .menu4 { | |||
| border: 5px solid green; | |||
| } | |||
| .menu5 { | |||
| border: 5px solid green; | |||
| } | |||
| .menu1, .menu2, .menu3, .menu4, .menu5 { | |||
| height: 40px; | |||
| width: 140px; | |||
| box-sizing: border-box; | |||
| float: left; | |||
| bottom: -5px; | |||
| position: relative; | |||
| } | |||
| .menurechts { | |||
| background-color:white; | |||
| height: 40px; | |||
| width: 10%; | |||
| position: relative; | |||
| float: right; | |||
| top: 5px; | |||
| right: 15px; | |||
| } | |||
| .containergroot { | |||
| background-color: green; | |||
| height: 500px; | |||
| width: 100%; | |||
| position: relative; | |||
| top: 80px; | |||
| } | |||
| .containerklein { | |||
| background-color:red; | |||
| height: 500px; | |||
| width: 98%; | |||
| position: absolute; | |||
| left: 1%; | |||
| bottom: -10px; | |||
| } | |||
+ 29
- 0
04-EX01/opdracht.html
View File
| @@ -0,0 +1,29 @@ | |||
| <!doctype HTML> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>HTML/CSS - 001: Opdrachts</title> | |||
| <link rel="stylesheet" href="opdracht.css";> | |||
| </head> | |||
| <body> | |||
| <div class="eerste"> | |||
| <div class="balk"></div> | |||
| <div class="menu1"></div> | |||
| <div class="menu2"></div> | |||
| <div class="menu3"></div> | |||
| <div class="menu4"></div> | |||
| <div class="menu5"></div> | |||
| <div class="menurechts"></div> | |||
| </div> | |||
| <div class="containergroot"> | |||
| <div class="containerklein"> | |||
| </div> | |||
| </div> | |||
| </body> | |||
| </html> | |||
Loading…