3 kolonlu web sayfası..Yanlışlarım varsa söyleyin lütfen.

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar 3 kolonlu web sayfası..Yanlışlarım varsa söyleyin lütfen.

Bu konudaki kullanıcılar: 1 misafir

3
Cevap 623
Tıklama 0
Öne Çıkarma

1. sayfa

3 kolonlu web sayfası..Yanlışlarım varsa söyleyin lütfen.

Cevap Yaz

Xavier34

14 yıl (11 mesaj)

Konu Sahibi

Merhaba,
3 kolonlu bir sayfa iskeleti oluşturdum da.Kodların sorun çıkarıp çıkarmayacağından emin değilim.Yazdığım sayfayı gönderiyorum.Yanlışlarımı söyler misiniz?

CSS kodları,

.sayfa
{
width:100%;
height:768px;
border:1px solid black;
margin:0 auto;
}

.ustalan
{
width:100%;
border-bottom:1px solid black;
height:150px;
}

.ortaalan
{
width:100%;
border-bottom:1px solid black;
height:468px;
}

.menu
{
width:15%;
border-right:1px solid black;
height:468px;
float:left;
}

.icerik
{
width:100%;
height:468px;
}

.banner
{
width:15%;
height:468px;
border-left:1px solid black;
float:right;
}

.altalan
{
width:100%;
height:160px;
}

Ve bunlarda HTML kodları

<body>
<div class="sayfa">
<div class="ustalan"></div>
<div class="ortaalan">
<div class="menu"></div>
<div class="icerik"><span>içerik buraya</span>
<div class="banner"><span>reklamlar</span></div>
</div>
</div>

<div class="altalan"></div>
</div>

</body>

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

UyKusuZ~

14 yıl (21 mesaj)

Onbaşı

Sorun çıkarmaz. ie 6 - 7 dışındaki bütün tarayıcılarda çalışır ki zaten onlarında modası geçti.

Bu mesaja 1 cevap geldi.

TradeMark

14 yıl (1594 mesaj)

Binbaşı

Öncelikle kodlarını "code" etiketleri içine yazarsan daha bir anlaşılır daha bir güzel olur. Soruna gelince;

 
  <!--HTML--> 
  <body> 
      <div class="sayfa"> 
          <div class="ustalan"></div> 
          <div class="ortaalan"> 
              <div class="menu"></div> 
              <div class="icerik"> 
                  <span>içerik buraya</span> 
                  <div class="banner"> 
                      <span>reklamlar</span> 
                  </div> 
              </div> 
          </div> 
          <div class="altalan"></div> 
      </div> 
  </body>  
  <!--HTML bitti--> 
   
  /*------CSS------*/ 
  .sayfa { 
    width:100%; 
    height:768px; 
    float:left; 
    /** 
     * float kullanman iyi olur. Onun dışında auto margin kullanmak bir işine yaramaz çünkü sayfanın ortalanmasına ihtiyacın yok 
     * 
     */ 
    border:1px solid black; 
    /** 
     * Eğer % birimi kullanarak genişlik/yükseklik verip px birimli border kullanırsan sayfa yatay olarak taşar ya da taşması muhtemeldir. 
     * Burayı kontrol edip, 1px yerine 0.025% gibi bir değer verebilirsin. 
     * Tabi bu durumdan (2 * 0.025) değerini 100 değerinden çıkarman gerekir. 
     * Aynı durum 100% genişlik verip px birimli border verdiğin tüm elementler için geçerlidir. 
     * Bazı tarayıcılar border değerini genişlik/yükseklik değerine ekler. 
     * 
     */ 
  } 
   
  .ustalan { 
    width:100%; 
    height:150px; 
    float:left; 
    /** 
     * burada diğerlerinde de float kullanmak yine faydana olur aksi halde div'ler birbirine girebilir. 
     * 
     */ 
    border-bottom:1px solid black; 
  } 
   
  .ortaalan { 
    width:100%; 
    height:468px; 
    float:left; 
    /** 
     * burada da yukarıda yazıklarım geçerli 
     * 
     */ 
    border-bottom:1px solid black; 
  } 
   
  .menu { 
    width:15%; 
    height:468px; 
    float:left; 
    border-right:1px solid black; 
  } 
   
  .icerik { 
    width:85%; 
    /** 
     * Bu kısmı 100% yaparsan sayfan yatay olarak yine taşar. 
     * Çünkü icerik class'ı ve menu class'ı aynı seviye elementlerdir ve ikisinin genişliği toplamı tarayıcı penceresi genişliğinin %115'i eder. 
     * CSS kullanırken hesaplamalara dikkat et 
     * 
     */ 
    height:468px; 
    float:left; 
  } 
   
  .banner { 
    width:15%; 
    height:468px; 
    float:right; 
    border-left:1px solid black; 
  } 
   
  .altalan { 
    width:100%; 
    height:160px; 
    float:left; 
  } 
  /*-----CSS bitti-----*/

Benim görebildiklerim bunlar. Gecenin köründe ancak bu kadar oluyor.

< Bu mesaj bu kişi tarafından değiştirildi TradeMark -- 23 Nisan 2012; 0:25:41 >
Bu mesaja 1 cevap geldi.

Xavier34

14 yıl (11 mesaj)

Konu Sahibi

Çok teşekkür ettim =) Çok açıklayıcı oldu.Söylediklerinize dikkat edeceğim.

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar 3 kolonlu web sayfası..Yanlışlarım varsa söyleyin lütfen.