folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder HTML Ve CSS İle İlgili Tablo Problemi



HTML Ve CSS İle İlgili Tablo Problemi

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wh0
    wh0's avatar
    Kayıt Tarihi: 21/Temmuz/2008
    Homo

    merhaba,

    html bir tablom degisik form ebatlarinda ekrana sigmamaktadir.

    scroll islemi yapildigi zaman birinci satirin ve birinci sutunun sabit kalmasini istiyorum.

    css / html den pek fazla anlamadigim icin yapamadim. arastiramadim (birkac method denedim ama basarisiz) da cunku zamanim cok kisitli.

    extra bilgi : javascript veya jquery kullanmadan yapmam gerekiyor.

     

     

    HTML Sablonumun Indirme Linki:

    http://www.2shared.com/document/fMXL7Rd-/test.html

     

    saygilar.

  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    krypt
    krypt's avatar
    Kayıt Tarihi: 05/Mart/2004
    Erkek

    Sabit durmasını istediğin satır ya da sütuna position: fixed; vermeyi denedin mi? Değişik ekran çözünürlükleri problemini doğru anladıysam eğer "media queries" araştır.

    krypt tarafından 12/Mar/14 10:02 tarihinde düzenlenmiştir

    while (1<2)
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wh0
    wh0's avatar
    Kayıt Tarihi: 21/Temmuz/2008
    Homo

    tekrar merhaba,

    birinci resimdeki sari olarak isaretlenmis alanlarin scroll islemlerinde sabit kalmasini saglamak istiyorum.

    position fixed vs. denedim. ama dagiliyor html.

    ornek sablonu konuya ekledim. sizde indirip denemeler yapabilirsiniz.

  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    sezeruludag
    sezeruludag's avatar
    Kayıt Tarihi: 22/Ağustos/2011
    Erkek
    WH0 bunu yazdı

    tekrar merhaba,

    birinci resimdeki sari olarak isaretlenmis alanlarin scroll islemlerinde sabit kalmasini saglamak istiyorum.

    position fixed vs. denedim. ama dagiliyor html.

    ornek sablonu konuya ekledim. sizde indirip denemeler yapabilirsiniz.

    sabit kalmasını istediğin yerleri ayrı tablo yap öyle "fixed" ayarla daha kolay olacaktır.


    Hatasız Kod Olmaz... :)
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ZINDIK
    ZINDIK's avatar
    Kayıt Tarihi: 31/Mart/2007
    Erkek

    Hacı böyle bişi mi yapmak istiyon?

    Test: http://jsfiddle.net/PGP97/

    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/1999/xhtml/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <head>
    
    <style type="text/css">
    	body {
    		margin:0;
    		padding:0 10px 0 10px;
    		height:100%;
    		overflow-y:auto;
    	}
    
    	#content {
    		margin:113px 0px 0px 150px;
    		display:block;
    		padding:10px;
    	}
    
    	#header {
    		display:block;
    		top:0px;
    		left:0px;
    		width:100%;
    		height: 112px;
    		position:fixed;
    		background-color: #ffffff;
    		border:1px solid #888;
    	}
    
    	#navigation {
    		display:block;
    		top:113px;
    		left:0px;
    		width:142px;
    		height: 100%;
    		position:fixed;
    		border:1px solid #888;
    	}
    
    	* html #header {position:absolute;}
    	* html #navigation {position:absolute;}
    </style>
    
    <!--[if lte IE 6]>
       <style type="text/css">
       /*<![CDATA[*/
    html {overflow-x:auto; overflow-y:hidden;}
       /*]]>*/
       </style>
    <![endif]-->
    
    </head>
    
    <body>
    
    <div id="header">
    <h1>HEADER</h1>
    </div>
    
    <div id="navigation">
    <ul>
    	<li><a href="#test1">Test #1</a></li>
    	<li><a href="#test2">Test #2</a></li>
    	<li><a href="#test3">Test #3</a></li>
    	<li><a href="#test4">Test #4</a></li>
    	<li><a href="#test5">Test #5</a></li>
    	<li><a href="#test6">Test #6</a></li>
    	<li><a href="#test7">Test #7</a></li>
    	<li><a href="#test8">Test #8</a></li>
    
    </ul>
    </div>
    
    <div id="content">
    
    <h1>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad*</h1>
    <p>&nbsp;</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    <p>lorem ipsum dolor sit amet, <br />
      lem yelid ve lem yüled <br />
      velem yekun kufuven ahad</p>
    </div>
    
    </body>
    </html>
    
  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wh0
    wh0's avatar
    Kayıt Tarihi: 21/Temmuz/2008
    Homo

    merhaba outmost,

    aslinda tam istedigim sey asagidaki linkte verdigim ornektir.

    http://jsfiddle.net/C8Dtf/366/

    ama ilk mesajimda belirttigim gibi extra javascript / jquery kullanmadan pure-css/html kullanarak yapmak istiyorum.

    wh0 tarafından 12/Mar/14 10:54 tarihinde düzenlenmiştir
  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wh0
    wh0's avatar
    Kayıt Tarihi: 21/Temmuz/2008
    Homo
    sezeruludag bunu yazdı
    WH0 bunu yazdı

    tekrar merhaba,

    birinci resimdeki sari olarak isaretlenmis alanlarin scroll islemlerinde sabit kalmasini saglamak istiyorum.

    position fixed vs. denedim. ama dagiliyor html.

    ornek sablonu konuya ekledim. sizde indirip denemeler yapabilirsiniz.

    sabit kalmasını istediğin yerleri ayrı tablo yap öyle "fixed" ayarla daha kolay olacaktır.

    merhaba sezer, oda cok ilkel bir cozum. ben bunu zaten kendim javascript ile yapabilirim problem degil.
     ama pure-css ve html ile yukarida vermis oldugum sablonu bozmadan yapmak istiyorum.

    wh0 tarafından 12/Mar/14 10:50 tarihinde düzenlenmiştir
  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    manglerman
    manglerman's avatar
    Kayıt Tarihi: 30/Aralık/2003
    Erkek

    3 farklı div kullan.

    1) soldaki satır başlıkları

    2) üstteki sütun başlıkları

    3) veri kısmı

     

    veri olan kısmı

    width:80%;

    height:80%;

    display:inline;

     

    yap soldaki satı başlıklarını:

    position:fixed:

    float:left

    width:20%;

     

    üstteki sütun başlıklarını

    position:fixed.

    heigtht:20%;

    clear:both;

     

     

    muhtemelen olacaktır.

     

    ufak tefek kayma olusa rakamlarla oyna. padding margin filan kullan.

     

    edit: al la :) sabah sabah uğraştım yaptım :) yüzdelerle istediğin gibi oyna.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html, body {height:100%;padding:0;margin:0;}
            .header 
            { 
                width:100%;
                height:10%;
                background-color:purple;
            }
            .left
            { 
                width:10%;
                height:90%;
                display:inline;
                float:left;
                background-color:green;
            }
            .right
            { 
                width:90%;
                height:90%;
                overflow:scroll;
                display:inline;
                float:right;
                background-color:red;
            }
        </style>
    
    </head>
    <body style="height:100%;">
        <div class="header">asda </div>
        <div class="left">sol asd asd</div>
        <div class="right">solasdasdas</div>
    </body>
    </html>
    

     

    manglerman tarafından 12/Mar/14 11:35 tarihinde düzenlenmiştir

    türk kızlarından sabun yapalım, rus kızları elini yıkasın.:)
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    futurist
    futurist's avatar
    Kayıt Tarihi: 19/Ocak/2014
    Dişi

    sabit kalmasını istediğin kısmı ayrı div oluşuracak

    kayacak olan kısmı ayrı div oluşturacaksın

    tabloyu sola yasla sabit kalacak yeri fixed yaptıktan sonra sağda kaymasını istediğin yere 960 px olarak tasarla

     

    hangi ekranda  açılırsa açılırsın solda duracak tam gözükecek. ekran büyüdükçe sağ kısım boşluk durur sadece

    örnek olarak youtube böyle tasarlanmış.

     

    yada dediğim mantıkla ortalarsanda olur

    eğer hareket edecek olana scrool verirsen o kısımda çıkar hiç bir ekleme yapmazsan ekranın tamamında kayma yapar .

    biliyorsun diyerek çok geneledim ama karışıka kodla yazayım. yukarıdaki yorum güzel açıklamış % lik değer vermek divlere en akıllıcası olacak

    son olarak tablo kullanma bütün işini divle yap tablolu site geç açılır

     


    Sanmasınlar yıkıldık, sanmasınlar çöktük. Bir başka bahar için sadece yaprak döktük. (Mevlana)
  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ZINDIK
    ZINDIK's avatar
    Kayıt Tarihi: 31/Mart/2007
    Erkek
    WH0 bunu yazdı

    merhaba outmost,

    aslinda tam istedigim sey asagidaki linkte verdigim ornektir.

    http://jsfiddle.net/C8Dtf/366/

    ama ilk mesajimda belirttigim gibi extra javascript / jquery kullanmadan pure-css/html kullanarak yapmak istiyorum.

    Hacı modern web teknolojileri kullanmak istememenin nedeni nedir? Fonksiyonel olarak yetersiz olduğu için pure-css/html tek başına pek tercih edilmiyor. +Ekstra bir sürü iş istiyor.

    verdiğin örneğin demosu gayet güzelmiş : https://datatables.net/extras/fixedheader/

    Pure CSS/HTML ile nasıl yapılır araması;

    https://www.google.com/search?q=Pure%20CSS%20Scrollable%20Table%20with%20Fixed%20Header

    gördüğün üzere yıllanmış tutorialler +çok çirkin ve kullanışsız duruyor. fonksiyonel olarak modern bir kullanıcı arabirimde olması gereken özellikleri de ekliyeceksen bir sürü iş çıkarır sana.

    http://salzerdesign.com/test/fixedTable.html

    http://www.imaputz.com/cssStuff/bigFourVersion.html

    http://www.imaputz.com/cssStuff/bulletVersion.html

    ...

  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wh0
    wh0's avatar
    Kayıt Tarihi: 21/Temmuz/2008
    Homo

    sanirim bircok arkadas, ornek html sayfasini indirmeden ,test etmeden bakmadan direkt resimlere bakarak yorum yazdiklari icin onerdikleri alternatif cozumleri uygulayamiyorum.

    HTML Sablonumun Indirme Linki:

    http://www.2shared.com/document/fMXL7Rd-/test.html

    ornegi indirip koduna bakmadan lutfen resim uzerinden giderek yorum yazmayin.

     

Toplam Hit: 1703 Toplam Mesaj: 23