HTML Ve CSS İle İlgili Tablo Problemi

12/Mar/14 09:57

Kısayol

Şikayet

Özel Mesaj

wh0

Kayıt Tarihi: 21/Temmuz/2008

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.

🏴‍☠️Hi'dan gelen varır Who'ya, Hi'da onun adıdır Who'da...

Alıntı yap

12/Mar/14 10:02

Kısayol

Şikayet

Özel Mesaj

Böcüklerin Efendisi
krypt

Kayıt Tarihi: 05/Mart/2004

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)

Alıntı yap

12/Mar/14 10:05

Kısayol

Şikayet

Özel Mesaj

wh0

Kayıt Tarihi: 21/Temmuz/2008

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.

🏴‍☠️Hi'dan gelen varır Who'ya, Hi'da onun adıdır Who'da...

Alıntı yap

12/Mar/14 10:42

Kısayol

Şikayet

Özel Mesaj

sezeruludag

Kayıt Tarihi: 22/Ağustos/2011

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... :)

Alıntı yap

12/Mar/14 10:45

Kısayol

Şikayet

Özel Mesaj

ZINDIK

Kayıt Tarihi: 31/Mart/2007

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>

Alıntı yap

12/Mar/14 10:48

Kısayol

Şikayet

Özel Mesaj

wh0

Kayıt Tarihi: 21/Temmuz/2008

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

🏴‍☠️Hi'dan gelen varır Who'ya, Hi'da onun adıdır Who'da...

Alıntı yap

12/Mar/14 10:49

Kısayol

Şikayet

Özel Mesaj

wh0

Kayıt Tarihi: 21/Temmuz/2008

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

🏴‍☠️Hi'dan gelen varır Who'ya, Hi'da onun adıdır Who'da...

Alıntı yap

12/Mar/14 10:57

Kısayol

Şikayet

Özel Mesaj

manglerman

Kayıt Tarihi: 30/Aralık/2003

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.:)

Alıntı yap

12/Mar/14 11:20

Kısayol

Şikayet

Özel Mesaj

futurist

Kayıt Tarihi: 19/Ocak/2014

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

Arkadaş uğruna ölmek kolaydır, ama uğruna ölünecek arkadaş bulmak çok zordur

Alıntı yap

12/Mar/14 11:31

Kısayol

Şikayet

Özel Mesaj

ZINDIK

Kayıt Tarihi: 31/Mart/2007

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

...

Alıntı yap

12/Mar/14 11:33

Kısayol

Şikayet

Özel Mesaj

wh0

Kayıt Tarihi: 21/Temmuz/2008

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.

🏴‍☠️Hi'dan gelen varır Who'ya, Hi'da onun adıdır Who'da...

Alıntı yap