Ekranın-Ortasına-Div-Yerleştirme_emresupcinHepinize merhaba sevgili okurlarım ve Hayırlı Cumalar.

Bu gün sizlere ‘DİV Yerleştirme’  konusunu anlatacağım. HTML kodlarını kullanarak bu işlemi gerçekleştireceğiz. Öncelikle şöyle bir açıklama yapayım: Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her türlü içerik girilebilir. Div’in asıl amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır.

 

Bir Divi ekranın tam ortasına yerleştirmek hemen hemen hepimizin ihtiyacı olmuştur. Tanımladığınız bir divi CSS kullanarak çok basit bir şekilde ekranın ortasına yerleştirebiliriz.

 

 

İlk olarak bir HTML sayfası oluşturun ve ekranın tam ortasında gözükmesini istediğimiz divi aşağıdaki gibi tanımlayın.

 

        1  <div id="container">
        2  <p>Ekranın Ortasına Gelecek Olan Div</p>
        3  </div>

———————————————————————————-

Div için sabit bir genişlik ve yükseklik verelim.

 

        1  #container {

        2     width: 100px;
        3     height: 100px;
        4     background-color: #567;
        5  }
———————————————————————————-
Ekran boyutlarından bağımsız olarak divi belirli bir yere yerleştirmek için divin top ve left pozisyonlarına %50 veriyoruz.
        1  #container {
             
        2     width: 100px;
        3     height: 100px;
        4     background-color: #567;
        5     position:absolute;
        6     left: 50%;
        7     top: 50%;
        8  }
———————————————————————————-
Yukarıdaki gibi bırakırsak divin sol trafı ve en üst tarafı ekranın tam ortasında olacaktır. Ama bizim istediğimiz ise dinin tam merkezinin ekranın ortasında olması. Öyleyse soldan div genişliğinin yarısı kadar sola, üstten divin yüksekliğinin yarısı kadar yukarı taşırsa istediğimizi elde etmiş oluruz.
        1  #container {

        2     width: 100px;
        3     height: 100px;
        4     background-color: #567;
    
        5     position:absolute;
        6     left: 50%;
        7     top: 50%;
        8     margin-left: -50px;
        9     margin-top: -50px;
        10  }
———————————————————————————-
HTML sayfamız aşağıdaki gibi olacaktır.
        1  <html>

        2  <head>
        3  <style>
        4         #container
        5         {
        6            width: 100px;
        7            height: 100px;
        8            background-color: #567;
        9            position: absolute;
        10            left: 50%;
        11            top: 50%;
        12            margin-left: -50px;
        13            margin-top: -50px;
        14         }
        15  </style>
        16  </head>
        17  <body style="background:#000">
        18           <div id="container">
        19           <p>Ekranın Ortasına Gelecek Olan Div</p>
        20           </div>
        21  </body>
        22  </html>
Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Değişken İsimlendirmede Dikkat Edilecek Noktalar | Devamı…

Sonraki Yazı:ASP.Net ile JQuery Slider Dinamik Veri Kaynağı Okunması?

BENZER YAZILAR
YORUMLAR

Bu yazıya 1 yorum yapılmış.

  1. Yazar
    Serdar

    Merhaba hocam benim istediğim bir tane div ama full ekranı kaplayacak şekilde olması bunla ilgili yapılabilecek bir şey var mı?

SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.