2 changed files with 93 additions and 0 deletions
+ 57
- 0
03-positioning/PositioningEx.css
View File
| @@ -0,0 +1,57 @@ | |||
| div{ | |||
| box-sizing: border-box; | |||
| } | |||
| .container{ | |||
| position: fixed; | |||
| height: 50px; | |||
| width: 100%; | |||
| background-color: lightskyblue; | |||
| top: 0; | |||
| left: 0; | |||
| padding: 5px; | |||
| } | |||
| .bottomBack{ | |||
| /* padding: 10px; */ | |||
| background-color: darkgreen; | |||
| height: 700px; | |||
| width: 100%; | |||
| top: 55px; | |||
| position: relative; | |||
| } | |||
| .bottomFront{ | |||
| background-color: limegreen; | |||
| position: absolute; | |||
| left: 10px; | |||
| right: 10px; | |||
| top: 10px; | |||
| bottom: -10px; | |||
| } | |||
| .rightButton{ | |||
| position: absolute; | |||
| right: 5px; | |||
| background-color: grey; | |||
| height: 40px; | |||
| width: 10%; | |||
| } | |||
| .leftBar{ | |||
| position: absolute; | |||
| left: 5px; | |||
| background-color: grey; | |||
| height: 40px; | |||
| width: 75%; | |||
| padding: 5px; | |||
| } | |||
| .buttons{ | |||
| float: left; | |||
| height: 30px; | |||
| width: 20%; | |||
| background-color: darkblue; | |||
| border: 2px solid greenyellow; | |||
| } | |||
| /* top bot left right werkt enkel bij position: */ | |||
+ 36
- 0
03-positioning/PositioningEx.html
View File
| @@ -0,0 +1,36 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Positioning</title> | |||
| <link rel="stylesheet" href="PositioningEx.css"> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
| <div class="rightButton"></div> | |||
| <div class="leftBar"> | |||
| <div class="buttons"></div> | |||
| <div class="buttons"></div> | |||
| <div class="buttons"></div> | |||
| <div class="buttons"></div> | |||
| <div class="buttons"></div> | |||
| </div> | |||
| <div class="bottomBack"> | |||
| <div class="bottomFront"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </body> | |||
| </html> | |||
Loading…