1. Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha Fazla Bilgi.

CSS ile 3 Sütunlu Site hazırlama

'Web Tasarımı' forumunda Powers tarafından 23 Kasım 2012 tarihinde açılan konu

  1. Powers

    Powers Administrator Site Yetkilisi

    CSS yardımıyla 3 sütunlu framesiz nasıl web sitesi hazırlanır diye soracaksanız iki yöntem var ilki tüm cssyi html'e gömmek ikincisi ise css dosyasını çağırmaktır.

    Css'yi htmlye gömecek olursak aşağıdaki dosyayı index.html diye kaydetmek yeterli olacaktır.

    HTML:
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Yorum Kalemi</title>
    <style type="text/css">
    body
    {
    margin:0px;
    padding:0px;
    text-align:center;
    }
    #ust_div
    {
    width:900px;
    height:100px;
    background-color:Aqua;
    }
    #alt_div
    {
    clear:both;
    width:900px;
    height:50px;
    background-color:Aqua;
    }
    #sol_div
    { float:left;
    height:100%;
    width:150px;
    background-color:Gray;
    }
    #sag_div
    {
    float:right;
    height:100%;
    width:150px;
    background-color:Blue;
    }
    #orta_div
    {
    float:left; 
    height:100%;
    width:600px;
    background-color:Green;
    }
    #ana_div
    {
    width:900px;
    height:450px;
    margin:auto;
    }
    </style>
    </head>
    
    <body>
    <div id="ana_div">
    <div id="ust_div"></div>
    <div id="sol_div"></div>
    <div id="orta_div"></div>
    <div id="sag_div"></div>
    <div id="alt_div"></div>
    </div>
    </body>
    
    </html>
    
    Eğer css'yi dışarıdan çalıştıracak olursanız. YorumKalemi.css diye bir dosya oluşturup içine aşağıdaki kodları yazmanız gerekir.

    Kod:
    body
    {
    margin:0px;
    padding:0px;
    text-align:center;
    }
    #ust_div
    {
    width:900px;
    height:100px;
    background-color:Aqua;
    }
    #alt_div
    {
    clear:both;
    width:900px;
    height:50px;
    background-color:Aqua;
    }
    #sol_div
    { float:left;
    height:100%;
    width:150px;
    background-color:Gray;
    }
    #sag_div
    {
    float:right;
    height:100%;
    width:150px;
    background-color:Blue;
    }
    #orta_div
    {
    float:left; 
    height:100%;
    width:600px;
    background-color:Green;
    }
    #ana_div
    {
    width:900px;
    height:450px;
    margin:auto;
    }
    daha sonra aşağıdaki gibi bir html dosyası oluşturarak işlemi tamamlayabilirsiniz.

    HTML:
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Yorum Kalemi</title>
    <link href="YorumKalemi.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="ana_div">
    <div id="ust_div"></div>
    <div id="sol_div"></div>
    <div id="orta_div"></div>
    <div id="sag_div"></div>
    <div id="alt_div"></div>
    </div>
    </body>
    
    </html>
    
     
    Tags:
  2. Geveze

    Geveze Member

    Çok işime yarayacak teşekkürler
     
  3. Serdar SEZEN

    Serdar SEZEN New Member

    güzel bir paylaşım teşekkürler...
     
  4. Gl4dius

    Gl4dius New Member

    Cevap: CSS ile 3 Sütunlu Site hazırlama

    tamda aradığım konu idi teşekkürler
     

Bu Sayfayı Paylaş

Yükleniyor...