Fatih Hayrioğlu'nun not defteri » tablo http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/ http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/#comments Mon, 13 Apr 2009 11:29:41 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1037 Tablo satırına ardalan resmi tanımladığımızda Firefox ve Opera’da sorun yok iken Internet Explorer ve Webkit tabanlı tarayıcılarda(Safari ve Google Chrome) sorun çıkarıyor. Biz burada Internet Explorer için nasıl bir çözüm üretebiliriz onu göstereceğiz. Webkit tabanlı tarayıcılar için çözüm bulamadım üzgünüm.

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
}

İE de hatalı resmi

Örneği görmek için tıklayınız.

tanımlaması Firefox ve Opera da sorunsuz çalışırken IE ve Webkit tabanlı tarayıcılarda sorun çıkaracaktır.

Çözüm için

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
    position:relative;
}

table tr td{
    color:#fff;
    font:12px Arial, Helvetica, sans-serif;
    background:none;
}

İE düzeltişmiş görüntüsü

tanımlamaları yeterlidir. Örneği görmek için tıklayınız.

Kaynak

http://test.pixelbebop.com/test33/

]]> http://www.fatihhayrioglu.com/tablo-satirina-verilen-ardalan-resminin-tekrarlama-sorunu/feed/ 4 18 Ağustos 2008 web’den seçme haberler http://www.fatihhayrioglu.com/18-agustos-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/18-agustos-2008-webden-secme-haberler/#comments Mon, 18 Aug 2008 15:27:12 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=576
  • Firefox 3.1 ile birlikte gelen yeni CSS3 desteklerinden biri yeni border-images tanımı. Bağlantı
  • SmasingMagazine CSS ile yapılmış 10 güzel tabloyu seçmiş. Bağlantı
  • CSS ile Amazon sitesi arama sonuç ekranındaki görünümü yapmak. Bağlantı
  • İyi bir jQuery kullanmak için izlenmesi gerek yol. Bağlantı
  • Web kod yazarları için kod örnekleri sunan güzel bir site. Zamanla içeriğinin dahada artacağını ümit ediyorum. Bağlantı
  • İnternette yazı tipi kullanma seçenekleri. Bağlantı
  • CSS ve SEO – brkcan.com Bağlantı
  • SEO Dediğin Tek Dişi Kalmış Canavar – mafiamax.com Bağlantı
  • FireBug yardımı ile güzel sayfa kodlamak. Bağlantı
  • Twitter Nedir? Ne değildir? – webdeneyimleri.com Bağlantı
  • Yahoo’nun javascript kütüphanesinin(YUI) 3. sürümü çıkıyor. Bağlantı
  • jQuery ile otomatik dipnot yapmak. Bağlantı
  • Monitör çözünürlükleri ve site tasarımları üzerine güzel bir makale. Bağlantı
  • Mailing hakkında geniş bilgi. Bağlantı
  • Web standartlarında yanlış anladığımız 5 konu. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/18-agustos-2008-webden-secme-haberler/feed/ 1     06 Ağustos 2008 web’den seçme haberler http://www.fatihhayrioglu.com/06-agustos-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/06-agustos-2008-webden-secme-haberler/#comments Wed, 06 Aug 2008 11:55:43 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=562
  • Asp.Net 3.5 ile gelen yenilikler. Bağlantı
  • 10 güzel CSS ipucu. Bağlantı
  • Formlarda metinlerin yerlerini belirlemek. Bağlantı
  • W3C kontrolüne takılan hataları nasıl düzeltirsiniz? – siberkultur.com Bağlantı
  • Güzel derlenmiş CSS linkleri Bağlantı
  • Ücretsiz güzel bir wordpress teması. Bağlantı
  • Fare imlecinin tıklandığı yerde mesaj kutusu açmak. Bağlantı
  • Tablo Etiketinin Gönlünü Almak 2 – webdeneyimleri.com Bağlantı
  • sFIR tekniğine alternatif bir yöntem FaceLift, avantajları ve dezavantajları ile incelemeye değer. Bence en büyük dezavantajı PHP ile çalışması. Bağlantı
  • SitePoint CSS kitabından ipuçları. Bağlantı
  • Sitemize sFIR 3 ile farklı yazı tipleri nasıl ekleriz? Bağlantı
  • Mozilla Laboratuvarları geleceğin internet tarayıcıları hakkında düşünüp bir video hazırlamışlar. Bağlantı
  • Blog Yazılarına Daha Fazla Yorum Almanın Yolları – selcukhoca.com Bağlantı
  • WordPress 2.7 de eklenti yönetimi – blog.wolkanca.com Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/06-agustos-2008-webden-secme-haberler/feed/ 1     26 Mayıs 2008 web’den seçme haberler http://www.fatihhayrioglu.com/26-mayis-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/26-mayis-2008-webden-secme-haberler/#comments Mon, 26 May 2008 12:35:33 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=503
  • CSS ile düzenlenmiş tablolar. Bağlantı
  • input ve button arasında farklılıklar. Bağlantı
  • CSS ile mesaj kutuları hazırlamak. Bağlantı
  • jQuery ile yapılmış güzel bir tarih aralığı seçimi. Bağlantı
  • CSS ve Jquery ile yapılmış güzel bir menü örneği. Bağlantı
  • jQuery yeni sürümü çıkmış 1.2.5 bazı sorunlar giderilmiş. Bağlantı
  • “Tek bir bilgisayarda birden fazla Internet Explorer” – eburhan.com Bağlantı
  • Basite indirgenmiş güzel bir yatay akordiyon menü örneği. Bağlantı
  • HTML5 ile birlikte gelen sıralı listeleri tersten sıralama özelliği. Bağlantı
  • Firefox3 1 ay içerisinde çıkması bekleniyor. Firefox3′ün gizli özellikleri Bağlantı
  • Dışa link için css ile ikon koymak. Bağlantı
  • jquery ile ilgili farklı bir büyük resim uygulaması. Bağlantı
  • Tarayıcı Uyumluluğu İçin CSS Sıfırlama – yakuter.com Bağlantı
  • 30 dakikada jQuery giriş yapmak. Bağlantı
  • jQuery ile animasyon geçişli içerikler. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/26-mayis-2008-webden-secme-haberler/feed/ 1     Tablo Özellikleri http://www.fatihhayrioglu.com/tablo-ozellikleri/ http://www.fatihhayrioglu.com/tablo-ozellikleri/#comments Mon, 10 Sep 2007 20:00:15 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=395 Daha önce "CSS ile Tabloları şekillendirmek" adlı makalemizde tablo yapılarını gördük ve görünümünü daha güzel nasıl yaparız onun üzerinde durmuştuk. W3C bu durumu göz önünde bulundurarak tablo ve tablo elementlerinin görünümünü düzenlemek için tablo özellikleri ekledi. Tablolar diğer HTML elementlerinden daha farklı kendine has elementlerdir ve farklı özellikleri vardır. Burada CSS2 ile birlikte gelen yeni özellikleri inceleyeceğiz.

    CSS2 ile birlikte gelen bu özelliklerden birçoğumuzun haberi olmayabilir. Ancak bizlere yardımcı olacak bu özelliklere göz atmak güzel. Bu özellikleri uygulamamızda en önemli etken tabiki IE’nin bu özelliklerin bir kısmını desteklememesidir. Bu tabiki IE’ye puan kaybettiriyor ve Microsoft’da bunun farkına geçte olsa vardığı söyleniyor ve IE8 ile birlikte tam CSS desteğini bizlere sunacakmış, tabi o zamana kadar Firefox IE’yi silip süpürmezse :D

    table-layout

    Yapısı : table-layout: <deger>
    Aldığı Değerler : auto | fixed | kalıtsallık
    Başlnagıç değeri: auto
    Uygulanabilen elementler: display: table ve display:inline-table olarak belirlenen elementlere
    Kalıtsallık: Var

    Browser Uyumu:

    Internet Explorer 5.0+
    Firefox 1+
    Opera 9.2+
    Safari 1.3+
    Chrome 2+
    W3C’s CSS Level 2+
    CSS Profile 2.0

    Normalde tablolar içeriğindeki bilgiye göre genişliğini arttırır. Bu bize bir esnek kazandırır ancak bazen tablo genişliğimizin sabit kalmasını isteriz. table-layout:fixed değeri tablo genişliğimizi sabitlememizi sağlar. table-layout:auto ise tablo genişliğini içeriğe göre arttırır. 

    <!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" />
<title>table-layout örneği</title>
<style>
table.otomatik {table-layout: auto; width: 350px; border-collapse: collapse;}
table.sabit {table-layout: fixed; width: 350px; border-collapse: collapse;}
td, th {border: 1px solid;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="otomatik">
  <caption>
  Limitli ADSL Fiyatları
  </caption>
  <tr>
    <th>Hızı*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Bağlantı Ücreti** </th>
    <th>Aylık Ücret </th>
    <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>4</td>
    <td rowspan="3">29 YTL</td>
    <td>29 YTL</td>
    <td>0,010 YTL</td>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>6</td>
    <td>39 YTL</td>
    <td>0,009 YTL</td>
  </tr>
  <tr>
    <td>2048/512'e kadar</td>
    <td>6</td>
    <td>49YTL</td>
    <td>0,009 YTL</td>
  </tr>
</table>
&nbsp;
<table cellpadding="0" cellspacing="0" class="sabit">
  <caption>
  Limitli ADSL Fiyatları
  </caption>
  <tr>
    <th>Hızı*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Bağlantı Ücreti** </th>
    <th>Aylık Ücret </th>
    <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>4</td>
    <td rowspan="3">29 YTL</td>
    <td>29 YTL</td>
    <td>0,010 YTL</td>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>6</td>
    <td>39 YTL</td>
    <td>0,009 YTL</td>
  </tr>
  <tr>
    <td>2048/512'e kadar</td>
    <td>6</td>
    <td>49YTL</td>
    <td>0,009 YTL</td>
  </tr>
</table>
</body>
</html>

    caption-side örneği

    Örneği görmek içintıklayınız.

    caption-side

    Yapısı :caption-side: <deger>
    Aldığı Değerler :top | bottom | inherit
    Başlnagıç değeri:top
    Uygulanabilen elementler:display: table-caption olarak belirlenen elementlere
    Kalıtsallık:Yok

    Not: CSS2 ile birlikte left ve right değerleride vardı ancak kullanışsızlığı nedeni ile CSS2.1′de kaldırıldı.

    caption-side:Tablonun başlığının(<caption>) nerede(altta mı üstte mi) olacağını belirler.

    caption-side örneği

    Örneği görmek içintıklayınız.

    Bu özelliği IE(ie5+/mac destekliyor) desteklemiyor. Tüm tarayıcıların desteklediği şekilde kod yazmak için <caption> etiketininalignözelliği kullanılmalıdır. Örnek:

    <caption align="bottom">
ve
<caption align="top">
    Browser Uyumu:

    Internet Explorer 8+
    Firefox 1+
    Opera 9.2+
    Safari 1.3+
    Chrome 2+
    W3C’s CSS Level 2+
    CSS Profile 2.1

    border-collapse

    Yapısı :border-collapse: <deger>
    Aldığı Değerler :collapse | separate | kalıtsallık
    Başlangıç değeri:separate
    Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
    Kalıtsallık:Var

    Browser Uyumu:

    Internet Explorer 5.5+
    Firefox 1+
    Opera 9.2+
    Safari 1.3+
    Chrome 2+
    W3C’s CSS Level 2+
    CSS Profile 2.0

    border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmamızı veya açmamızı sağlar.separateataması yapılmış ise hücreler arasına bir kaç piksellik mesafe konur, HTML içinden bu boşlukları <table> etiketinin cellspacing özelliği ile kaldırmak istesek bile tarayıcılar bu seferde iki kenarlığı bir bir üstü gösterecektir. Eğercollapsedeğeri verilirse iki hücre arasındaki mesafe kalkacaktır ve tek kenarlık görünecektir.

    <!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" />
<title>border-collapse örneği</title>
<style>
table.ayri { border-collapse: separate; }
table.birlesik { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="birlesik">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

    Örneği görmek içintıklayınız.

    border-collapse örneği

    border-spacing

    Yapısı :border-spacing: <deger>
    Aldığı Değerler :<uzunluk> <uzunluk>? | inherit
    Başlangıç değeri:0
    Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
    Kalıtsallık:Var

    Browser Uyumu:

    Internet Explorer 8+
    Firefox 1+
    Opera 9.2+
    Safari 1.3+
    Chrome 2+
    W3C’s CSS Level 2+
    CSS Profile 2.0

    border-spacing, normal uzunluk değerleri alır veborder-collapse:separateile birlikte kullanılır. Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.

    <!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" />
<title>border-spacing örneği</title>
<style>
table.ayri { border-collapse: separate; border-spacing: 3px 5px; }
table.birlesik { border-collapse: separate; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="birlesik">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

    Örneği görmek içintıklayınız.

    border-spacing örneği

    empty-cells

    Yapısı :empty-cells: <deger>
    Aldığı Değerler :show | hide | kalıtsallık
    Başlangıç değeri:show
    Uygulanabilen elementler:display:table-cellolarak belirlenen elementlere
    Kalıtsallık:Var

    Browser Uyumu:

    Internet Explorer 8+
    Firefox 1+
    Opera 9.2+
    Safari 1.3+
    Chrome 2+
    W3C’s CSS Level 2+
    CSS Profile 2.0

    Bir tabloya bazı değerler atadığımızda(örneğin kenarlık değeri) boş olan hücreler bu değeri görmez, bu durumu düzeltmek için boş olan hücreler için boş karakter( ) koyarız genel.empty-cellsözelliği ile boş kalan hücrelere nasıl davranması gerektiğini bildirebiliriz. göster(show) değeri ile hücrenin içeriği olan hücreler ile aynı özellikleri almasını sağlayabiliriz. gizle(hide) değeri ile de hücrenin yokmuş gibi davranmasını sağlarız.

    Bu özellik Internet Explorer tarafından desteklenmemektedir.

    <!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" />
<title>empty-cells örneği</title>
<style>
table.goster { empty-cells:show }
table.gizle { empty-cells:hide }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="goster">
  <tr>
    <td></td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="gizle">
  <tr>
    <td></td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

    Örneği görmek içintıklayınız.

    empty-cells örneği

    Kaynaklar

    ]]>     http://www.fatihhayrioglu.com/tablo-ozellikleri/feed/ 28     Sql’de Tekrarsız sonuçlar elde etmek – DISTINCT http://www.fatihhayrioglu.com/sqlde-tekrarsiz-sonuclar-elde-etmek-distinct/ http://www.fatihhayrioglu.com/sqlde-tekrarsiz-sonuclar-elde-etmek-distinct/#comments Thu, 06 Sep 2007 11:17:37 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=390 Bu kodu her defasında kullanmadan önce nasıl kullanıldığını arıyorum. Bu günde aradım ve buraya yazmaya karar verdim. Unutursam burada bulurum diye. Belki sizlerede yarar.

    Şimdi kullanıcıların uyelik’lerinin ve resimlerinin olduğu iki tablom var. Bunları bir birine bağlıyorum ve sadece resimleri olanları gösteriyorum. Ancak şöyle bir sorunum oldu. Her resim için sonuçlar tekrarlıyor. Yani adam iki adet resim ekleyince sonuçta iki kere gösteriliyor. Tekrarı engellemek için ise DISTINCT kullandım.

    DISTINCT: SQL’de tablo içinde birbirinin aynı veriler bulunabilir.Aynı satırların listeleme esnasında bir kez yazılması için Distinct sözcügü kullanılır.

    SELECT DISTINCT kullanici.Email, kullanici.Name, kullanici.Surname  FROM kullanici INNER JOIN images ON kullanici.Id = images.UyeId

    Şekline yazınca oluyor. Bu kod sonucu e-postalar tekil olduğu için tekrar eden verilerden kurtulmuş oluyorum.

    ]]>     http://www.fatihhayrioglu.com/sqlde-tekrarsiz-sonuclar-elde-etmek-distinct/feed/ 6     Tablo kolon genişliğini css ile ayarlama http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/ http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/#comments Thu, 23 Aug 2007 07:40:03 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=381 Tablolarda bazen içeriğe göre tablonun genişlemesini istemeyiz veya içeriği aşağı kaymasını engellemek isteriz. İşte çözüm hemde Gmail’den.

    Google bize web hakkında örnekleri ile de yardım ediyor. Gmail’de tablo genişliğini sabitlemenin daha doğrusu metinin tablo genişliğine göre overflow:hiden uygulamasını gösteren güzel bir yöntem

    .grid {
	table-layout: fixed;
} 

.grid * td {
    empty-cells: show;
    overflow: hidden;
    width: 100%;
}

    Gmail Tablo genişliği

    Güzel bir ayrıntıyı yakalamışlar. table-layout: fixed; tanımı işin püf noktası

    Örnek sayfayı görmek için tıklayınız.

    Kayanak: http://blog.opencomponentry.com/2007/08/22/gmail-table-column-sizing-css-fun/

    ]]>     http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/feed/ 11     CSS İpuçları 13 – CSS’de Cellspacing=”0″ nasıl yakalarız http://www.fatihhayrioglu.com/css-ipuclari-13-cssde-cellspacing0-nasil-yakalariz/ http://www.fatihhayrioglu.com/css-ipuclari-13-cssde-cellspacing0-nasil-yakalariz/#comments Thu, 02 Aug 2007 07:24:24 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=354 Artık sayfalarımızı CSS ile oluşturup şekillendiriyoruz. Tabloların Cellspacing=”0″ atamasını css ile nasıl yaparız. İşte cevabı:

    table{
border-spacing: 0px;
border-collapse: collapse;
}

    bu kadar.

    Kaynak

    ]]>     http://www.fatihhayrioglu.com/css-ipuclari-13-cssde-cellspacing0-nasil-yakalariz/feed/ 5