Css ile tablo oluşturma

Web tabanlı uygulama geliştirme araçları(PHP, ASP vb...) ile ilgili konuları buraya yazabilirsiniz.
Cevapla
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Css ile tablo oluşturma

Mesaj gönderen husonet »

Arkadaşlar ufak ufak css öğrenmeye karar verdim karar verdimde normal tabloyu div ile saatlerdir oluşturmadım vazmı geçsem ne yapsam :)

yardımcı olursanız sevinirim...

Kod: Tümünü seç

<div  >
	<?php foreach ($kategoriler->result_array() AS $rows): ?>
		<div style="float:left;clear:left;" ><?=$rows['ID']?> </div>
		<div style="floar:left;clear:left;" ><?=$rows['KATEGORI']?> </div>
		<div style="float:right;clear:right;"><input type='button' value='Degistir'/></div>
	<?php endforeach; ?>
</div>

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
Kullanıcı avatarı
Battosai
Üye
Mesajlar: 1316
Kayıt: 01 Eki 2007 12:02
Konum: Ankara

Re: Css ile tablo oluşturma

Mesaj gönderen Battosai »

Listeleme için bildiğimiz <table> kullanmak daha pratik....css meselesinde tarayıcıların farklı tavır takınmasından dolayı sorunlar çıkabiliyor...css yi sayfayı bölümlere ayırmada veya genel tasarım amaçlı kullanmak lazım...gerçi listeleme için hiç div kullanmadım avantajları nedir pek bimiyorum ama <table> daha kolay şimdilik....
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen husonet »

bende table kullanıyorumda amac macera işte :)

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
mkysoft
Kıdemli Üye
Mesajlar: 3103
Kayıt: 26 Ağu 2003 12:35
Konum: Berlin
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen mkysoft »

bu css'den çok div kullanarak tablo oluşturmaya dönmüş. Yapılabilir sanırım ama tarayıcıya göre davranışları değişebilir çünkü DIV için boyut vermemişsiniz.
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen husonet »

div le css aynı farklımı oluyor css le nasıl yapılı peki mkysoft

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
emin_as
Üye
Mesajlar: 559
Kayıt: 01 Eki 2008 10:05
Konum: izmir
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen emin_as »

Teknik olarak divlerle tablo sonuçları elde edilebilir. Div lerin flow özelliği vardır, içindeki bilgiye göre genişleyip, uzayabilir. Css aslında bu tür div lerin niteliklerini belirlemek için kullanılır.
Örnegin bir resim galerisi yaparken bunu div ile de yapabilirsin, tablo ile de yapabilirsin. Tablo diyelim 6 kolon olursa, bu kolon sayısı degişmeyecek sabit kalacaktır. Oysa div lerle sabit bir pixel genişligi verirsen ve float u ayarlarsan, sayfa genişligine göre gösterilecek resim sayısı artabilir, azabilir.

Genel olarak eger liste halinde bilgi verilecekse table kullanın denir, ama onun dışında bloklar yapacaksanız, mutlaka divlerle çalışılması önerilir.

Css ile ilgili çok güzel örneklerin oldugu bir site var, tavsiye ederim.
http://www.cssplay.co.uk/
Css ile yapılmış bir foto galerisi:
http://www.cssplay.co.uk/menu/lightbox#Flowers
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen husonet »

üstad bu flow komutu nasıl oluyor?

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
emin_as
Üye
Mesajlar: 559
Kayıt: 01 Eki 2008 10:05
Konum: izmir
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen emin_as »

Bu linkte float:left örnegi gösteriliyor.
http://css.maxdesign.com.au/floatutoria ... al0407.htm

Css cascading style sheet in kısaltılmışıdır. Esas espri sayfanın içerigi ile biçiminin farklı kodlanmasıdır. Div lerle, spanlarla kendi sayfanın içerigini doldurursun.

Aşagıdaki gibi içerigin olur.

Kod: Tümünü seç

<body>
<div class="header"> .... </div> 

<div class="menu"> .... </div>
<div class="icerik"> ... </div>
<div class="footer"> ...  </div>
</body>

Kod: Tümünü seç

.baslik
{
   position: absolute ;right:10 ; top: 10;
]
.footer
[
  position: clear:left;
]
..
Görüldüğü gibi sen aslında hiç bir biçim tanımı neyin nerede oldugunu söylemiyorsun. Sadece bilgileri yolluyorsun, içerik kısmını ise css ile oluşturuluyorsun. Css dosyanı istediğin gibi tasarımlıyorsun. Avantajı şu oluyor, bu içerigi hazirlayan ile css yi hazirlayan farkli kişiler olabilir. Daha önemlisi farklı bir günde sadece css yi degiştirip, sitenin görünümünü tekrar hazirlayabilirsin.

Bu konuda örnek site zen garden dir. Hazır bir içerigin farklı css lerle ne kadar degişik tasarlanabilecegini en güzel örnegidir.
http://www.csszengarden.com/

Select designden menusunden farklı tasarımlar seçersen, içerigin aynı kaldıgını sadece css nin degiştigini görürsün.

Aşagıdakilerin hepsinin içerigi aynı, sadece css dosyası degişik.
http://www.csszengarden.com/?cssfile=/2 ... css&page=0
http://www.csszengarden.com/?cssfile=/2 ... css&page=0
http://www.csszengarden.com/?cssfile=/2 ... css&page=0
http://www.csszengarden.com/?cssfile=/2 ... css&page=0
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen husonet »

Eyvallah

örnkeler süperdi işte bende bunun için uğraşıyorum :)

yani divler aynı kalacak ama css ler üzerinde oynayacağız yanlış anlamıyorum dimi

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
emin_as
Üye
Mesajlar: 559
Kayıt: 01 Eki 2008 10:05
Konum: izmir
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen emin_as »

Buradaki örnekte faydalı olur.
http://www.w3schools.com/css/tryit.asp? ... ge_gallery

Evet içerik sabit, css ile istediğimiz gibi düzenlemeyi yapacagız. Bunun çok büyük avantajı şu: server bu işleri yapmıyor, client tarafta browser işi hallediyor. Sonuçta server a yüklenilmemiş oluyor. Dezavantajı ise bazı browserlarin css konusunda farklı uyumsuzlukları olabiliyor, ona dikkat etmek gerekiyor.
Kullanıcı avatarı
Battosai
Üye
Mesajlar: 1316
Kayıt: 01 Eki 2007 12:02
Konum: Ankara

Re: Css ile tablo oluşturma

Mesaj gönderen Battosai »

Evet listeleme dışında, şekil amaçlı olarakta en iyisi css dir...Çok kullanışlı olması yanında tasarımı kolayca değiştirebiliyorsunuz...Fekat browser sorunlarını dikkat...
Kullanıcı avatarı
husonet
Admin
Mesajlar: 2962
Kayıt: 25 Haz 2003 02:14
Konum: İstanbul
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen husonet »

Emin hocam verdiğiniz bilgiler ışığında bişeyler yaptım ama tablo gibi sutunlar aynı hizada olmuyor bakınız aşağıya ressim ekledim

Yalnız ben genişlik vermeden hizalasın istiyorum bu mümkünmüdür?

Resim

Yazdığım css

Kod: Tümünü seç

div.Column
{
  display:inline;
  float:left;
  height: auto;
  width: auto;
  text-align:left;
  padding: 1px;  
  margin: 0;
  vertical-align:bottom;
  /*border:solid 0.1em;*/
}

div.ColumnEnd
{
  float:left;
  height: auto;
  width: auto;
  text-align:rigth;
  clear:left;
}

Kod: Tümünü seç

	<?php foreach ($kategoriler->result_array() AS $rows): ?>
    <div>
		<div class="Column" ><?=$rows['ID']?> </div>
		<div class="Column"><?=$rows['KATEGORI']?> </div>
		<div class="Column"><input type='button' value='Değiştir'/></div>
        <div class="ColumnEnd"></div>
    </div>
	<?php endforeach; ?>
Teşekkürler

Gazete manşetleri
* DİKKAT :Lütfen forum kurallarını okuyalım ve uyalım...!
* Warez,crack vs. paylaşımı kesinlikle yasaktır.
emin_as
Üye
Mesajlar: 559
Kayıt: 01 Eki 2008 10:05
Konum: izmir
İletişim:

Re: Css ile tablo oluşturma

Mesaj gönderen emin_as »

wdith leri auto yapmayacaksın, auto olursa yazı boyuna göre her satırda degişir. Yazıya göre uzar, kısalır.

Onun yerine width lere sabit deger atayabilirsin. Bu şekilde aynı hizada görünür.

Bir de bu tür form alanları için fieldset kullanman daha faydalı olabilir. Fieldsetler onları biçimlendirmek daha kolaydır.

Aşagıdaki link, formlar ve css düzenlemesi hakkında bilgiler içeriyor, sanırım yardımcı olur.
http://www.webcredible.co.uk/user-frien ... orms.shtml
Cevapla