@@ -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: */ |
@@ -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> |