Sayfa 1 - Toplam 2 12 SonSon
Bulunan 1 den 10 - Toplam 11
Tablo Css de Yapılır - - Web & Grafik - Ceviz Forum
  1. #1
    Ceviz Üstadı
    Üyelik Tarihi
    20-Kasım-2003
    Nereden
    Kocaeli
    Mesaj
    2,119

    Varsayılan Tablo Css de Yapılır

    Son iki konuya ait cevap içermektedir. (lafı uzatma örneği göster diyenler buraya tıklayın)

    reset.css
    Kod:
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, em, img, ins, strong, sub, sup, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
    {
    	margin:0;
    	padding:0;
    	border:0;}
    table		{border-spacing:0;}
    a:hover	{text-decoration:none;}
    a{outline-width:0}
    dd		{display:inline}

    grid.css

    Kod:
    /*
    burası sayfa örneği için
    */
    body{padding:30px}
    body,a{font:normal 11px arial}
    .case{width:620px}
    
    /*
    	Grid Genel Stil Ayarları
    */
    .grid						{width:100%;}
    * html .grid					{border-collapse:collapse}
    .grid th a					{text-decoration:none; color:#414141}
    .grid th a em,.grid th a:hover	{text-decoration:underline;font-style:normal}
    .grid thead tr					{background:#EAEAEA}
    .grid th,.grid td				{text-align:left;padding:8px 5px;}
    .grid td						{padding:5px;}
    .grid th						{border-left:1px solid white; padding-bottom:5px; border-bottom:3px solid #EAEAEA}
    .grid th:hover				{background-color:#F3F3F3; border-bottom:3px solid #FA6501}
    .grid tbody tr.d				{background:#F7F7F7}
    .grid tbody td					{border-bottom:1px solid #F2F2F2; border-left:1px solid #F2F2F2;}
    .grid tbody tr:hover			{background:#F0FBFF}
    .grid tbody td:hover			{background:#DFF7FF}
    .grid td.f					{background:#F0F0F0; border-bottom:1px solid #E6E6E6;border-top:1px solid #fff;color:#4B4B4B}
    .grid td.f:hover				{background:#F7F7F7!important; color:#D90000!important;}
    .grid th.f,.grid tbody tr td.f	{border-left:0!important}
    
    /*
    	Genislik Olculerini Buradan Özelleştir
    */
    .grid thead th#T1				{width:35px}
    Html Sayfası
    Kod:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" type="text/css" href="reset.css" />
            <link rel="stylesheet" type="text/css" href="grid.css" />
    		
    	    <title>Css Table Grid - alico - CeViz.NeT</title>
        </head>
        <body>
        	
            
    		<!--
    			GRID TABLE  ORNEK
    		-->
    		
    		<div class="case">
    		
    			<table class="grid">
    				<thead>
    					<tr>
    						<th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
    						<th><a href="#" id="T2"><em>U</em>ser</a></th>
    						<th><a href="#" id="T3"><em>N</em>ame</a></th>
    						<th><a href="#" id="T4"><em>L</em>astName</a></th>
    						<th><a href="#" id="T5"><em>A</em>ctive</a></th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr><td class="f">01</td><td>Alico</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">02</td><td>Hunter</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">03</td><td>Ansugo</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">04</td><td>Sniper</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">05</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">06</td><td>Hunter</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">07</td><td>Ansugo</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">08</td><td>Sniper</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">09</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">11</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    				</tbody>
    			</table>
    			
    		</div>
    		
    		
        </body>
    </html>

    Aptal IE6 (A) tagı hariç hiç bir elementin hover özelliğini desteklemediğinden ötürü hover'lar çalışmayacaktır. Ancak bunun için onmousehover ile kastırmaya gerek yok IE6 yı artık desteklediği kadar özellik ile kullanıcıya sununki kullanıcı eksikliği farkedip güncellemesi için bir sebebi olsun!

    Yok yinede yapacam dersen html içine javascript yazmak yerine JQuery ile buda kolayca halledilir hover pozisyonları ie için stil ismi verilir ve toplam tr saydırılıp stil hoverler header üstünde load edilebilir.


    Bu örnek IE6 FF3 ve Safari de denenmiştir. Aşağıdaki eklentiden örneği indirip deneyebilirsiniz. Yada buradan örneğe bakabilirsiniz
    Eklenen Dosyalar Eklenen Dosyalar
    Front-end Dev & UI Designer
    alico.me

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

    Varsayılan Açıklama

    Birde son iki örnektir farkettim. Tablo üzerinden açıklanan örneklerden thead, tbody, tfoot kuralları üşenildiği içinmi yoksa bi haber olunulduğu içinmi yazılmıyor ?

    İlgili örnekte css ile özelleştirmeler daha geliştirildiğinde css kurallarında ayırım yapabilmek için bunlar gereklidir.

    Kuralına göre yazalım Kan yapar.
    Front-end Dev & UI Designer
    alico.me

  3. #3
    Cave Quid Optes James De Souza Üyenin Avatarı
    Üyelik Tarihi
    19-Şubat-2008
    Nereden
    İzmir
    Mesaj
    2,028

    Varsayılan

    ben bu örneği indirdim, çalıştırdım çalıştı. kullanmaya karar verdim, dosyaları gömdüm sayfaya, döngüye soktum, son hali id'ler class'lar falan birebir uyuştu ancak örnekteki gibi düzgün çalışmadı. yazı karakterleri ve hover olayı çalışmadı (ie7). sayfaya gömülmüş başka bir css de yok.
    PHP Kodu:
    <div class="case">  
       <
    table class="grid">
        <
    thead>
         <
    tr>
          <
    th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
          <
    th><a href="#" id="T2"><em>S</em>ipariş Kodu</a></th>
          <
    th><a href="#" id="T3"><em>T</em>arih</a></th>
          <
    th><a href="#" id="T4"><em>T</em>utarı</a></th>
          <
    th><a href="#" id="T5"><em>D</em>urumu</a></th>
          <
    th><a href="#" id="T5"><em>İ</em>şlem</a></th>
         </
    tr>
        </
    thead>
        <
    tbody>
          <%
    while 
    not rs.eof
       
    if i mod 2 1 then bgc "class=d" else bgc "" end if 
      %>
         <
    tr <%=bgc%>>
          <
    td class="f"><%=i%></td>
          <
    td><%=rs("Hareket_No")%></td>
          <
    td><%=rs("Tarih")%></td>
          <
    td><%=rs("Toplam")%> YTL</td>
          <
    td><span id="durum<%=i%>">
        <%if 
    rs("sil") = "0" then
     dn 
    rs("durum")
     if 
    not IsNumeric(dnthen dn "0"
     
    select case dn
      
    case "1"
       
    response.Write "Tedarik Sürecinde"
      
    case "2"
       
    response.Write "Kargoya Verildi"
      
    case "3"
       
    response.Write "Teslim Edildi"
      
    case else
       
    response.Write "Onay Bekleniyor"
     
    end select
     
    else
      
    response.Write("İptal Edildi!!!")
     
    end if
     %></
    span></td>
          <
    td><form id="s<%=i%>" onSubmit="return sendPost(this.id,'<%=i%>','<%=rs("Hareket_No")%>')" >
     <%if 
    dn "0" and rs("sil") = "0" then%><input name="iptal" id="ib<%=i%>" type="submit" value="İptal Et" onClick="return confirm('Siparişinizi iptal etmek istediğinize eminmisiniz?')" style="width:50px; height:20px; font-size:9px"><%end if%></form></td>
         </
    tr>
      <%
      
    i=i+1
      rs
    .movenext
      wend
     rs
    .close
     set rs 
    nothing
      
    %>
        </
    tbody>
       </
    table>   
      </
    div
    çok garip geldi.
    be careful what you wish for

  4. #4
    Ceviz Üyesi
    Üyelik Tarihi
    12-Aralık-2007
    Mesaj
    66

    Varsayılan

    Harika olmuş.Teşekkürler.

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

    Varsayılan

    @devill35

    IE6 da hover özelliği çalışmayacaktır ancak IE7'de hover özelliğinin çalışması lazım
    Front-end Dev & UI Designer
    alico.me

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

    Varsayılan

    @devill35

    Ie7'de border açıklık hatası vardı, bunun için IE6 için olan hack kodunu IE7 için'de uygulamak lazım.

    grid.css 10 satır
    Kod:
    *:first-child+html .grid,* html .grid	{border-collapse:collapse}
    Front-end Dev & UI Designer
    alico.me

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

    Varsayılan Php Döngü Örneği

    Kod:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" type="text/css" href="reset.css" />
            <link rel="stylesheet" type="text/css" href="grid.css" />
    	    <title>Css Table Grid - alico - CeViz.NeT</title>
        </head>
        <body>
        	
            
    		<!--
    			GRID TABLE  ORNEK
    		-->
    		
    		<div class="case">
    		
    			<table class="grid">
    				<thead>
    					<tr>
    						<th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
    						<th><a href="#" id="T2"><em>U</em>ser</a></th>
    						<th><a href="#" id="T3"><em>N</em>ame</a></th>
    						<th><a href="#" id="T4"><em>L</em>astName</a></th>
    						<th><a href="#" id="T5"><em>A</em>ctive</a></th>
    					</tr>
    				</thead>
    				<tbody>
    					<?
    						$c=' class="d"';
    						for($i=0; $i<=9; $i++)
    						{
    							if($c!='') $c=''; else $c=' class="d"';
    							if(strlen($i)==1) $s='0'.$i; else $s=$i;
    							
    							$d.='<tr'.$c.'><td class="f">'.$s.'</td><td>C1-'.$i.'</td><td>C2-'.$i.'</td><td>C3-'.$i.'</td><td>C4-'.$i.'</td></tr>';
    						}
    						echo $d;
    					?>
    				</tbody>
    			</table>
    		</div>
        </body>
    </html>

    Php Örneği
    http://www.thealico.com/atolye/code/css_tablo/grid.php
    Front-end Dev & UI Designer
    alico.me

  8. #8
    Ceviz Üyesi
    Üyelik Tarihi
    22-Mart-2008
    Mesaj
    209

    Varsayılan

    Alıntı alico Demiş ki: Mesajı Görüntüle
    Birde son iki örnektir farkettim. Tablo üzerinden açıklanan örneklerden thead, tbody, tfoot kuralları üşenildiği içinmi yoksa bi haber olunulduğu içinmi yazılmıyor ?

    İlgili örnekte css ile özelleştirmeler daha geliştirildiğinde css kurallarında ayırım yapabilmek için bunlar gereklidir.

    Kuralına göre yazalım Kan yapar.
    Aslına bakılırsa bihaber olmak değil ama özellikle tfoot elementi tüm browserlar tarafından yeterince deskteklenmiyor.Özellikle HTML4- browserlar yanlış yerde gösteriyor.
    Tam olarak emin değilim ama sayfamızda iki adet benzer thead-tfoot gibi elementleri barındıran 2 tablomuz varsa bazı browserlar bu tablolar arasındaki ayırımı yapamıyor.
    Bu arada örnek gayet güzel olmuş elinize sağlık.

  9. #9
    Ceviz Üyesi Virtuozzo Üyenin Avatarı
    Üyelik Tarihi
    17-Mart-2007
    Nereden
    İstanbul
    Mesaj
    675

    Varsayılan

    Hala tablo kullanan var mı ya?
    Şaşırdım!

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

    Varsayılan

    @Virtuozzo

    Arkadaşım mesele o değil! Yanlış yerden bakıp konuya yorum yazıyorsun

    Grid data listesini table hariç başka bir element ile yapma girişimi ile tablosuz html yapıyorum diyen salak varmı ?

    Eğer varsa bu salaklara sesleniyorum yaptığınız iş semantik kodlama değildir. Anlamlı html kodlaması html elementlerinin amacına uygun yerde kullanılmasıdır.

    Bundan ötürü siz bir css sitesinde detaylı bir grid liste yapısını table yerine başka bir element ile kastırarak yanlış mantık ile hazırlamış çalışmaya hayranlıkla bakıyorsanız bu işin ana temasını anlamamışsınız demektir.


    Örneğin bu yaptığım çalışma tamamen xhmtl css düzeneğinde bir çalışmadır. Ancak bu durum aynı çalışma modelinin şu sayfasındaki irtibat bilgileri adına kullanmış olduğum tabloyu yada buradaki detaylı bir listeyi table yerine başka bir element ile yapmamı gerektirmeceği gibi böyle bir şeye girişmemde son derece yanlış hatalı bir kodlama olacağı kesindir.
    Front-end Dev & UI Designer
    alico.me

Sayfa 1 - Toplam 2 12 SonSon

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
  •