Bulunan 1 den 10 - Toplam 10
CSS ile tablo oluşturmak - - Web & Grafik - Ceviz Forum
  1. #1
    Ceviz Üyesi ckusmez Üyenin Avatarı
    Üyelik Tarihi
    26-Temmuz-2008
    Mesaj
    178

    Varsayılan CSS ile tablo oluşturmak

    İ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 Kodu:
    <div id="header">
    <
    div id="footer">
    <
    div id="content"
    gibi

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

    PHP Kodu:
    <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. #2
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,118

    Varsayılan

    Ckusmez oluşturmak istediğin aşağıdaki gibi bir taslakmı ?

    Hayal Ettiğimiz Taslak


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

    Html Planı



    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.




    .
    Eklenen Resimler Eklenen Resimler
    Son düzenleyen alico, 25-Aralık-2009 saat 23:49.
    Front-end Dev & UI Designer
    alico.me

  3. #3
    Ceviz Üyesi ckusmez Üyenin Avatarı
    Üyelik Tarihi
    26-Temmuz-2008
    Mesaj
    178

    Varsayılan

    hocam aslında aradığım tam olarak bu olmasa da bana çok güzel fikir verdi teşekkür ediyorum size sağolun.

  4. #4
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,118

    Varsayılan

    ö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.
    Front-end Dev & UI Designer
    alico.me

  5. #5
    Ceviz Üyesi
    Üyelik Tarihi
    30-Mayıs-2007
    Mesaj
    81

    Varsayılan

    güzel anlatım tebrikler alico.
    -------------------------------------------------------------------------

    web: matematiktesti.org





  6. #6
    Ceviz Üyesi
    Üyelik Tarihi
    07-Aralık-2008
    Mesaj
    366

    Varsayılan

    http://www.csscreator.com/version2/pagelayout.php

    bu sitede sol taraftan değerleri girip generate layout dediğiniz zaman size full css tasarımını veriyor.

  7. #7
    Ceviz Üyesi SorunluVelet Üyenin Avatarı
    Üyelik Tarihi
    04-Ocak-2010
    Nereden
    Kocaeli
    Mesaj
    295

    Varsayılan

    rica etsem su konuyada bi göz atarmısınız
    http://forum.ceviz.net/web-tasarim/8...lismamasi.html

  8. #8
    Ceviz Üyesi
    Üyelik Tarihi
    09-Ağustos-2008
    Nereden
    Ankara||Istanbul
    Mesaj
    2,072

    Varsayılan

    Alıntı SorunluVelet Demiş ki: Mesajı Görüntüle
    rica etsem su konuyada bi göz atarmısınız
    http://forum.ceviz.net/web-tasarim/8...lismamasi.html
    acele etme velet, parayla değil sırayla.
    ^_^

  9. #9
    Ceviz Üyesi SorunluVelet Üyenin Avatarı
    Üyelik Tarihi
    04-Ocak-2010
    Nereden
    Kocaeli
    Mesaj
    295

    Varsayılan

    tmm

  10. #10
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,118

    Varsayılan

    Alıntı heval Demiş ki: Mesajı Görüntüle
    güzel anlatım tebrikler alico.
    sağol bu arada özür dilerim video private kapalı kalmış açtım izlenebilir şimdi

    http://www.vimeo.com/8386287
    Front-end Dev & UI Designer
    alico.me

Konu Bilgileri

Bu Konuya Gözatan Kullanıcılar

Şu anda 1 kullanıcı bu konuyu görüntülüyor. (0 kayıtlı ve 1 misafir)

Yer İmleri

Mesaj Yetkileriniz

  • Yeni konu açmaya yetkiniz yok
  • Cevap yazmaya yetkiniz yok
  • Eklenti yüklemeye yetkiniz yok
  • Mesajınızı düzeltmeye yetkiniz yok
  •