Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

CSS ile tablo oluşturmak

Konu, 'Genel Webmaster Konuları' kısmında ckusmez tarafından paylaşıldı.

  1. ckusmez

    ckusmez Üye

    Kayıt:
    26 Temmuz 2008
    Mesajlar:
    180
    Beğenilen Mesajlar:
    0
    İyi Günler Arkadaşlar

    CSS'e yeni giriş yapmış biriyim. İlgili komutlara çalıştım ama tecrübem sıfır.

    Şimdi ben scriptimi mantıklı alanlara böldüm

    PHP:
    <div id="header">
    <
    div id="footer">
    <
    div id="content">
    gibi

    şimdi header kısmında şöyle bir yapı kurmak istiyorum

    PHP:
    <table cellpadding="5" cellspacing="10" border="0">
    <
    tr>
    <
    td align="left"><a href='/'><img src='img/logo.png' border='0' width='254' height='113'></a></td>
    <
    td align="center"><form action='search.php' method='POST'><input type='text' name='search' size='40'>&nbsp;<input type='submit' value='Ara'></form></td>
    <
    td align="right">Hoşgeldiniz SayınÜye<br/>
    <
    a href='account.php'>Hesabım</a> | <a href='login.php?do=logout'>Çıkış</a></td>
    </
    table>
    bu tip yapılar için kaynak önerebilir misiniz ?
     
  2. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    Ckusmez oluşturmak istediğin aşağıdaki gibi bir taslakmı ?

    Hayal Ettiğimiz Taslak

    [​IMG]

    Eğer öyle ise, hayal ettiğimiz bu taslağı html background'ını renklendirerek taslak üstünde planlıyalım.

    Html Planı

    [​IMG]


    Güzel şimdide bu plandaki kodlarımızı xhtml 1.0 doctype'ini baz alarak gerçeğe dökmeye başlayalım.

    HTML

    Kod:
     <div class="container">
       <div class="header"></div> 
       <div class="body">
         <div class="sidebar left"><div>
         <div class="content"></div>
         <div class="sidebar right"><div>
     </div>
    </div>
    
    Aferin bize geldik bu iskeleti düşündüğümüz şekilde ayağa kaldırmaya şimdi bunun için gerekli stilleri yazalım

    CSS

    Kod:
    .container           { width:960px; margin:0 auto; }
    .header	        { height:100px;}
    .body			{ width:100%; overflow:hidden; padding:10px 0}
    .sidebar,.content { float:left}
    .content            { width:540px; margin:0 10px}
    .sidebar             { width:200px}
    

    Video
    Çalışmanın arka plan filmi buradan izle


    Demo
    Herşey bu kadar buradaki adrestende örneğimizin renklendirilmiş demosunu inceleyebiliriz.




    .
     
    Son düzenleme yönetici tarafından yapıldı: 25 Aralık 2009
  3. ckusmez

    ckusmez Üye

    Kayıt:
    26 Temmuz 2008
    Mesajlar:
    180
    Beğenilen Mesajlar:
    0
    hocam aslında aradığım tam olarak bu olmasa da bana çok güzel fikir verdi teşekkür ediyorum size sağolun.
     
  4. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    önemli değil css yeni giriş yaptığını söyleyince nasıl bir method izlemen gerektiği hakkında fikir edinmiş olursun yine 1661 nolu mesajı sahiplerinden birine hediye etmiş olalım aşure gününde :)

    Cevabın netliğine gelirsek aradığın iskeleti sana ilk beyaz olan grafikteki gibi sorarsan cevap verecek olan arkadaşların isabet oranı kaçınılmaz olur.

    kolay gelsin.
     
  5. heval

    heval Üye

    Kayıt:
    30 Mayıs 2007
    Mesajlar:
    85
    Beğenilen Mesajlar:
    0
    güzel anlatım tebrikler alico.
     
  6. mustklc

    mustklc Aktif Üye

    Kayıt:
    7 Aralık 2008
    Mesajlar:
    368
    Beğenilen Mesajlar:
    0
  7. SorunluVelet

    SorunluVelet Aktif Üye

    Kayıt:
    4 Ocak 2010
    Mesajlar:
    318
    Beğenilen Mesajlar:
    0
    Meslek:
    Web Programcısı
    Şehir:
    Kocaeli
  8. printf

    printf Daimi Üye

    Kayıt:
    9 Ağustos 2008
    Mesajlar:
    2,095
    Beğenilen Mesajlar:
    0
    Meslek:
    Mühendis Adayı , okuyor
    Şehir:
    Ankara||Istanbul
  9. SorunluVelet

    SorunluVelet Aktif Üye

    Kayıt:
    4 Ocak 2010
    Mesajlar:
    318
    Beğenilen Mesajlar:
    0
    Meslek:
    Web Programcısı
    Şehir:
    Kocaeli
    tmm :D
     
  10. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    sağol bu arada özür dilerim video private kapalı kalmış :( açtım izlenebilir şimdi

    http://www.vimeo.com/8386287