Dashboard Tasarımı Hakkında Yardım

Sinan Uğurlu

Kilopat
Katılım
30 Mayıs 2018
Mesajlar
504
Çözümler
12
Yer
Datacenter
Daha fazla  
Cinsiyet
Erkek
Meslek
Yazılım ve Ağ Altyapı Danış.
İyi günler, kendimi web tasarımında geliştirmeye çalışıyorum. Kendim bazı tasarımlar yapıyorum, ancak bir sorum var; bir dashboard tasarlıyordum ve ekranı oturtmakta zorlanıyorum. Sorum şu; ekranı yüzde cinsinden aldığımızda ben mesela %20'sinde Dashboard olacak, %80'inde içerik olacak. Ancak içerik div'ine border verdiğimde sayfa tam oturmuyor. Acaba bu sorunu nasıl atlatırım? Umarım sorunumu anlatabilmişimdir.
 
Son düzenleyen: Moderatör:
Özür dilerim, eminim kodlarda çok ciddi hatalar vardır, ancak henüz çok yeniyim bilmenizi isterim 😌
 

Dosya Ekleri

  • Ek Açıklama 2020-05-05 221216.png
    Ek Açıklama 2020-05-05 221216.png
    9,6 KB · Görüntüleme: 78
  • Ek Açıklama 2020-05-05 221306.png
    Ek Açıklama 2020-05-05 221306.png
    33,8 KB · Görüntüleme: 54
Bu şekilde bir site yerleşiminde yapınızı yüzdesel genişliklerle ayarlamamanız gerekiyor. Yapınızda sol panelin genişliği piksel şeklinde olmalı. Örneğin 255px bir genişliğe sahip olacak. İçerik kısmını ise position: absolute; ile konumlandıracaksınız.

HTML:
<div class="solPanel">
    Sol panel.
</div>

<div class="icerik">
    Burası da içerik
</div>

CSS:
.solPanel {
    width: 255px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
}

.icerik {
    position: absolute;
    left: 255px; /* Sol panelin içine girmesin diye, içeriğin solundan sol panelin genişliği kadar bir boşluk bırakıcaz. */
    top: 0;
    right: 0;
    bottom: 0;
}
 
Çözüm çok basitmiş, teşekkür ederim 😀
Verdiğim çözümle dahi, içeriği test etmek için içerisine yerleştirdiğiniz uzun metin sağa doğru uzayabilir. Çünkü satır atlamıyorsunuz. Böylesine uzun ve soluksuz bir yazı normal bir yönetici paneli tasarımında olmayacağı için çok bir önemi yok bu sorunun.
 
Uyarı! Bu konu 6 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Technopat Haberler

Yeni konular

Geri
Yukarı