Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
3
Cevap
0
Favori
3.240
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar sayfayı ikiye bölemiyoum şöyleki
    HTML kodu böyle, en başta her şeyi kapsayan bir div var "back_page"
    daha sonra onun çocuğu olan 2 div daha "first, second"
    en son da first'ün çocuğu var div "1"

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>SAMPLE</title>
      </head>
      <body>
        <div class="back_page">
          <div class="first">
            <h1>first class</h1>
            <div class="1">
              <h1>text inside the first class</h1>
            </div>
          </div>
          <div class="second">
            <h1>second class</h1>
          </div>
        </div>
      </body>
    </html>


    Şimdi ben first ve second için sayfayı eşit iki parçaya bölmek istiyorum.
    İşte Css kodu


    *
    {
      box-sizing: border-box;
    }

    html, body, h1, h2, h3, ul, li, a, p,
    header, main, section, article, footer, aside, nav
    {
      margin: 0;
      padding: 0;
    }

    header, main, section, article, footer, aside, nav
    {
      display: block;
    }


    .back_page
    {
      background-color: #199;
      height: 100%;
      display: block;
    }

    .first
    {
      float: left;
      height: 100%;
    }

    .second
    {
      height: 100%;
      float: left;
    }


    lakin ekran şöyle oluyor.
    Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım

    Sayfayı iki eşit parçaya bölemiyorum, CSS de takıldım


    Hiçbiri ekranın tamamını kaplamamış.
    Birde CSS deki bazı kodlar kopyala yapıştır. Anlamadığım yerler var
    1) display:block
    2) box-sizing: border-box







  • Bkz: .clear{clear:both}


    Örnek Kodlama Aşağıda; 


     
       
      { 
      box-sizing: border-box; 
      } 
       
      html, body, h1, h2, h3, ul, li, a, p, 
      header, main, section, article, footer, aside, nav 
      { 
      margin: 0; 
      padding: 0; 
      } 
       
      header, main, section, article, footer, aside, nav 
      { 
      display: block; 
      } 
       
       
      .back_page 
      { 
      background-color: #199; 
      display: block; 
      } 
       
      .first 
      { 
      float: left; 
      width:50%; 
      } 
       
      .second 
      { 
      float: left; 
      width:50%; 
      }  
       
      .clear{clear:both;} 
      


     
      <!DOCTYPE html> 
      <html> 
      <head> 
      <meta charset="utf-8"> 
      <link rel="stylesheet" href="style.css"> 
      <title>SAMPLE</title> 
      </head> 
      <body> 
      <div class="back_page"> 
      <div class="first"> 
      <h1>first class</h1> 
      <div class="1"> 
      <h1>text inside the first class</h1> 
      </div> 
      </div> 
      <div class="second"> 
      <h1>second class</h1> 
      </div> 
      <div class="clear"></div> 
      </div> 
      </body> 
      </html>

    < Bu ileti tablet sürüm kullanılarak atıldı >




    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız