Mobil tasarım ekrana oturma sorunu
2
●462
- 20-01-2018, 18:03:40Merhaba,Bir mobil tasarımım var. Yatay ve dikey olarak ekrandan taşmasını istemiyorum. bunun için yapılan tasarımla ilgili bilgiler şu şekilde:Sayfada bir üst band(yükseklik 50px), 1 büyük resim (yükseklik 710px) ve ekranın geri kalanını kaplayan 3'er satır ve sütundan oluşan butonlarım var. Değişik ekranlara uydurmak için tasarım yaptım. Ekteki resimde yapılan tasarımın da örneğini görebilirsiniz. örneğin yüksekliği 2560px olan ekran için şunları yapıyorum: Yüksekliği js kodları ile alıp 2560 olarak buluyorum. üst band 50px, resim 710px alıyorum. 2560-710-50=1800px. Demekki altta butonlar için kalan alan 1800px. 3 satır olduğuna göre 1800/3=600px. Butonlara yükseklik değerini 600px olarak ayarladığımda tasarım aşağı doğru ekrandan taşıyor. bunu nasıl düzeltebileceğim konusunda yardımcı olabilecek kimse var mı?
- 21-01-2018, 02:07:22Son 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:
