Son Hali:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.clearboth0 { clear: both; height: 0px; }
body { font-family: Arial; font-size: 14px; padding: 3px; margin: 0px; overflow: hidden; }
#Tum { width: 100%; height: 100%; }
#Tum .Header { background-color: #eeeeee; text-transform: uppercase; width: 100%; height: 10%; }
#Tum .Header > div { float: left; margin-left: 10%; font-size: 26px; font-weight: bold; }
#Tum .Resim { background-image: url("http://img.over-blog-kiwi.com/0/68/72/23/201307/ob_f3bb1255d2de766c35f93b40f15557ea_image.jpg"); background-size: cover; background-position: center 70%; width: 100%; height: 30%; }
#Tum .ButonTum { width: 100%; height: 60%; }
#Tum .ButonTum .Buton { font-weight: bold; text-transform: uppercase; width: 33.33%; height: 33.33%; float: left; text-align: center; }
#Tum .ButonTum .Buton:nth-child(2n+1) { background-color: #90C3D4; color: #5276D9; }
#Tum .ButonTum .Buton:nth-child(2n) { background-color: #5276D9; color: #90C3D4; }
#Tum .ButonTum .Buton > div, #Tum .Header > div { transform: translateY(-50%); top: 50%; position: relative; }
</style>
</head>
<body>
<div id="Tum">
<div class="Header">
<div>Başlık Alanı</div>
</div>
<!-- .Header -->
<div class="clearboth0"></div>
<div class="Resim"></div>
<!-- .Resim -->
<div class="clearboth0"></div>
<div class="ButonTum">
<div class="Buton"><div>Buton 1</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 2</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 3</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 4</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 5</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 6</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 7</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 8</div></div>
<!-- .Buton -->
<div class="Buton"><div>Buton 9</div></div>
<!-- .Buton -->
</div>
<!-- .ButonTum -->
</div>
<!-- #Tum -->
</body>
</html>Önizleme:
