pillinetwork hesabınızla giriş yapın.

İşin İçine CSS Katınca Neler Olur?

Merhaba sevgili okurlar;

Sizlerle bugün?!? Yasemin'in penceresi gibi bir program sunmaya başlamadım değil mi. Baştan alalım:

Herkese selamlar,

Yazı dizilerimin devamına biraz da css katmak istedim. Css'in verdiği o rahatlığı öğrenince, insan hiç tasarımı kasmıyor. 1 saatte yaptığı iş 10 dakikaya iniyor bazen. Onun için css önemli bir konu.

Bugün sizlere anlatacağım konular :

  • float ve clear'ın kullanımı
  • overflow nedir?
  • CSS 3'le beraber gelenler ve nerelerde işe yarayacağı
  • CSS'i IE de kullanırken bize az da olsa kolaylık bir yöntem.

Bugünlük bu kadar konu yeter sanıyorum. Hemen girişimizi yapalım :

Float ve Clear'ın Kullanımı :
Float : Bir elementin yaslanma şeklini belirler. left, right, inherit ve none seçeneklerini alabilir. Varsayılan değeri "none" dur. Float ile bir satır kaplayan divleri yan yana dizebiliriz, Listeleri yan yana dizebiliriz. Daha birçok yerde işimize yarıyor.

Clear : Floatla bağlı olan bu css özelliğimiz, float'ın yaptığı sola veya sağa kaydırma işlemini sonlandırır. 5 değeri vardır : left, right, both, inherit, none. Varsayılan değeri "none" dur.

Bunları açıkladığımıza göre örnek bir sayfa geliştirelim :
Bir listemiz olsun. Listeminizin içerisinde ise float verilmiş 2 adet div olsun. Bir div solda bir div sağda gözüksün. Listemizin her elemanında border olsun( kaymayı görebilmemiz için ).

Örnek uygulamamızın kısa kodlarını yayınlıyorum. ( Arkadaşlar satır satır anlatmaya gerek görmüyorum, çünkü zaten her şey besbelli. )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!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>Örnek : Css - Float, Clear</title>

<style type="text/css">

div#main {

	border:1px solid #333;

	padding:10px;

	width:800px;

}

ul {

	width:100%;

	list-style-type:none;

	padding:0;

	margin:0;

}

ul li {

	float:left;

	border:2px solid #666;

	margin:5px;

}

ul li div.bir {

	float:left;

	width:200px;

}

ul li div.iki {

	float:left;

	width:150px;

}

</style>

</head>



<body>

	<div id="main">

        <ul>

            <li>

                <div class="bir">Ürün Adı</div>

                <div class="iki">1500 $</div>

            </li>

            <li>

                <div class="bir">Ürün Adı 2</div>

                <div class="iki">10 €</div>

            </li>

            <li>

                <div class="bir">Ürün Adı 2</div>

                <div class="iki">10 €</div>

            </li>

        </ul>

    </div>

</body>

Sonuç( Dikkat edin, ul elementimiz div'in içinde gözükmüyor. ) :

Css Örnek 1 - Float Sorunu
Css Örnek 1 - Float Sorunu

Şimdi altında bir clear olunca sonuca bakalım. ( Lütfen </div> den önceki satıra dikkat ediniz. )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!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>Örnek : Css - Float, Clear</title>

<style type="text/css">

div#main {

	border:1px solid #333;

	padding:10px;

	width:800px;

}

ul {

	width:100%;

	list-style-type:none;

	padding:0;

	margin:0;

}

ul li {

	float:left;

	border:2px solid #666;

	margin:5px;

}

ul li div.bir {

	float:left;

	width:200px;

}

ul li div.iki {

	float:left;

	width:150px;

}

</style>

</head>



<body>

	<div id="main">

        <ul>

            <li>

                <div class="bir">Ürün Adı</div>

                <div class="iki">1500 $</div>

            </li>

            <li>

                <div class="bir">Ürün Adı 2</div>

                <div class="iki">10 €</div>

            </li>

            <li>

                <div class="bir">Ürün Adı 2</div>

                <div class="iki">10 €</div>

            </li>

        </ul>

        <div style="clear:left;"></div> <!-- Float değerli 'left' olanların sonunu getirir. -->

    </div>

</body>

Sonuç :

Css Örnek 1 - Float Sorununun Clearla sona erdirilmesi
Css Örnek 1 - Float Sorununun Clearla sona erdirilmesi

Gördüğünüz gibi clear verdiğimizde floatlı öğeler kutunun içinde gibi gözükmeye başladı. Clearda 3 adet kullanılır değer var : left, right ve both.
Left = "float:left;" leri temizler.
Right = "float:right;" ları temizler.
Both = İkisini de temizler

Floatta ise float:right; dediğinizde nesne sağa dayalı olacaktır. Bunu deneyiniz.

Sıra geldi "overflow nedir?" sorumuza. Ben bu işlerde henüz yeniyken scrollbarın sadece IFrame kullanılarak koyulabileceğini düşünürdüm. Tabi o zaman ne javascript bilgim var, ne de css. Sonralarda öğrendim ki, bunun için overflow diye bir özellik varmış. Bunu öğrendiğimde öyle sevinmiştim ki :) Gelelim overflow'un ne olduğuna :
Css referansı olarak overflow'un W3 standartlarına göre 5 adet değeri vardır :

  1. auto
  2. hidden
  3. inherit
  4. scroll
  5. visible

varsayılan değeri auto'dur. Örneğin bir dive belirli bir widht ve height vermişseniz ve overflow auto ise sadece yazılar bu width veya height'i geçtiğinde scrollbar görünür olacaktır.

Css 3 ile birlikte overflow-x ve overflow-y de eklenmiştir. Bu özellikler sayesinde artık sadece x eksenini ve y eksenini ayarlayabileceksiniz.

Şimdi sizlere birkaç tane overflow örneği göstereyim( Lorem ipsum yazıları için teşekkürler www.lipsum.com ) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!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>Örnek : Css - Overflow</title>

<style type="text/css">

div#overflow_visible {

	width:500px;

	height:70px;

	overflow:visible; /* Yazının tamamını gösterecek şekilde büyüt */

	margin:15px;

	border:2px solid #666;

}



div#overflow_auto {

	width:500px;

	height:70px;

	overflow:auto; /* Width ve Heighte göre yazıyı ayarla */

	margin:15px;

	border:2px solid #666;

}



div#overflow_hidden {

	width:500px;

	height:70px;

	overflow:hidden; /* Yazılar kutu içerisinde kutu alanı kadar olan yerde gözükür. Geri kalanlar gözükmez. */

	margin:15px;

	border:2px solid #666;

}



div#overflow_scroll {

	width:500px;

	height:70px;

	overflow:scroll; /* Her durumda scrollbarlar gözükür. */

	margin:15px;

	border:2px solid #666;

}

</style>

</head>



<body>    

    <div id="overflow_auto">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam. Mauris dapibus, sapien et cursus varius, dui risus euismod purus, at suscipit sem lorem vel neque. Mauris quis eleifend nunc. Maecenas eleifend augue sit amet turpis eleifend facilisis. Integer congue elit ut ipsum dignissim ornare. Morbi ac volutpat urna. Aliquam mollis scelerisque eros, quis malesuada nisl bibendum sed. Aenean euismod bibendum ipsum et bibendum. Nulla sit amet sapien quis lectus malesuada porttitor mollis sit amet tellus. Duis velit quam, congue ac sodales eget, ornare non leo.

    </div>

    

    <div id="overflow_hidden">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam. Mauris dapibus, sapien et cursus varius, dui risus euismod purus, at suscipit sem lorem vel neque. Mauris quis eleifend nunc. Maecenas eleifend augue sit amet turpis eleifend facilisis. Integer congue elit ut ipsum dignissim ornare. Morbi ac volutpat urna.

    </div>

    

    <div id="overflow_scroll">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam.

    </div>

    

    <div id="overflow_visible">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam. Mauris dapibus, sapien et cursus varius, dui risus euismod purus, at suscipit sem lorem vel neque. Mauris quis eleifend nunc. Maecenas eleifend augue sit amet turpis eleifend facilisis. Integer congue elit ut ipsum dignissim ornare. Morbi ac volutpat urna.

    </div>

</body>

Çıktısı :

Css Örnek 2 - Overflow
Css Örnek 2 - Overflow

Overflow kullanarak uzun yazılarda çok büyük alan kazanabilirsiniz.

CSS 3'le beraber gelenler ve nerelerde işe yarayacağı :

CSS3 ün bize tasarımsal anlamda bir çok kolaylık kattı. Fakat tarayıcı uyumluluğu çok az. Yine de kullanımdan zevk aldıran özellikler bunlar. Yanlız bir çok özellik barındırdığı için bunlardan sadece şimdilik işinize yarayacak bir kaç tanesini örneklendireceğim.
Referans : http://www.css3.info/preview/

1. border-radius :
Bu özellik sayesinde artık bir dolu tablo ya da div kullanmak zorunda değilsiniz. Kısaca özetlemek gerekirse tablonun kenarlarını istediğiniz kadar ovalleştirir :

1
2
3
4
5
6
7
8
9
10
11
 
-moz-border-radius : 10px; /* Mozilla Firefoxta çalışır. */

-webkit-border-radius : 10px; /* Webkit kullanan tarayıcılarda çalışır. Örn : Google Chrome. */



-moz-border-radius : 10px; /* Mozilla Firefoxta çalışır. */

-webkit-border-radius : 10px; /* Webkit kullanan tarayıcılarda çalışır. Örn : Google Chrome. */



/* Diğer Özellikler */

-moz-border-radius-topleft /* / */ -webkit-border-top-left-radius

-moz-border-radius-topright /* / */ -webkit-border-top-right-radius

-moz-border-radius-bottomleft /* / */ -webkit-border-bottom-left-radius

-moz-border-radius-bottomright /* / */ -webkit-border-bottom-right-radius

Örnek : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!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>Örnek : Css3 - Border Radius</title>

<style type="text/css">

div#border_radius10 {

	-moz-border-radius:10px;

	-webkit-border-radius:10px;

	padding:10px;

	margin:10px;

	width:500px;

	

	border:2px solid #666;

}

div#border_bottom_radius10 {

	-moz-border-radius-bottomleft : 10px;

	-webkit-border-bottom-left-radius : 10px;

	-moz-border-radius-bottomright : 10px;

	-webkit-border-bottom-right-radius : 10px;

	

	padding:10px;

	margin:10px;

	width:500px;

	

	border:2px solid #666;

}

</style>

</head>



<body>    

    <div id="border_radius10">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam. Mauris dapibus, sapien et cursus varius, dui risus euismod purus, at suscipit sem lorem vel neque. Mauris quis eleifend nunc. Maecenas eleifend augue sit amet turpis eleifend facilisis. Integer congue elit ut ipsum dignissim ornare. Morbi ac volutpat urna. Aliquam mollis scelerisque eros, quis malesuada nisl bibendum sed. Aenean euismod bibendum ipsum et bibendum. Nulla sit amet sapien quis lectus malesuada porttitor mollis sit amet tellus. Duis velit quam, congue ac sodales eget, ornare non leo.

    </div>

    

    <div id="border_bottom_radius10">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam. Mauris dapibus, sapien et cursus varius, dui risus euismod purus, at suscipit sem lorem vel neque. Mauris quis eleifend nunc. Maecenas eleifend augue sit amet turpis eleifend facilisis. Integer congue elit ut ipsum dignissim ornare. Morbi ac volutpat urna. Aliquam mollis scelerisque eros, quis malesuada nisl bibendum sed. Aenean euismod bibendum ipsum et bibendum. Nulla sit amet sapien quis lectus malesuada porttitor mollis sit amet tellus. Duis velit quam, congue ac sodales eget, ornare non leo.

    </div>

    

</body>


Örnek Çıktısı :
Css Örnek 3 - Border Radius
Css Örnek 3 - Border Radius

Diğer özellikleri gösterdiğim referanstan rahatlıkla öğrenebilirsiniz. Boşuna ekstradan kaynak yazmaya gerek yok.

CSS'i IE de kullanırken bize az da olsa kolaylık bir yöntem :

"_" karakterini style içerisinde css koduna uyguladığınızda sadece IE5 ve 6 da olmak üzere "_" ile yazdığınız kod çalışacaktır( Aynı zamanda W3 standartları buna izin vermektedir ). Örneğin :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!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>Örnek : Css - IE5-6 Css Fix</title>

</head>



<body>    

    <div style="width:100px; _width:250px; border:2px solid #000;">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum justo aliquam erat gravida in faucibus diam aliquam.

    </div>

    

</body>

Kodunun IE 5 ve 6 tarayıcıları dışındaki çıktısı :

Css Örnek 4 - IE Fix1
Css Örnek 4 - IE Fix1

IE 5 ve 6 tarayacılarındaki çıktısı :

Css Örnek 4 - IE Fix2
Css Örnek 4 - IE Fix2













Cssle ilgili bu yazımız burada sonlanıyor. Umarım herkese yararlı bir döküman olmuştur. Bir dahaki yazılarımızda görüşmek üzere...

Hoşçakalın.

/* Etiketler: , , , , , , , , , , , , , , , */
/* centrual yazdı. 22 Temmuz 2009 13:47. 31 yorum var */

Yorumlar

güzel. elinize sağlık. faydalandım.

/* akcansoft.com | güncellikler.com | kaynakçı.org */
/* makcan | 16 Temmuz 2009 16:57 */

CSS kodlarken her zaman Stylizer programını kullanırım.
İçindeki Firefox veya IE browser ile sayfayı yenilemeden yaptığınız değişikliği anında görüyorsunuz.

Örneğin bir div'in genişliğini ayarlayacaksınız, deneme yanılma yoluyla istediğiniz boyuta ulaştırmaya çalışmak yerine Stylizer ile saniyeler içinde yapabilirsin.

Firefox ile Firebug eklentisini kullanan arkadaşlar artık Firebug'ı açmak bile istemeyecekler :)

Şuradaki videoyu izleyerseniz programın nasıl çalıştığını daha iyi anlayacaksınız.

/* xmRipper | 16 Temmuz 2009 19:08 */

Telekoma kafam girsin... ( you tubedan dolayı )

/* / oguzozcan.com / */
/* centrual | 16 Temmuz 2009 20:04 */

www.opendns.com kullanın. tüm engelli sitelere girebilirsiniz.

208.67.222.222
208.67.220.220

/* xmRipper | 17 Temmuz 2009 04:07 */

ie8e css 3.0 desteği gelse ne güzel olacak :)

/* mmacit | 17 Temmuz 2009 09:39 */

float kullandığınız her elemanda ie sorunlarını gidermek adına display:inline kullanmalısınız. Sanırım gözünüzden kaçtı.

Güzel anlatım olmuş tebrikler :)

/* amatör ruhlu platform */
/* kadirgunay | 17 Temmuz 2009 09:57 */

css 3.0 için vermiş olduğunuz örneği Firefox 3.5 ve Google Chrome 2.0.172 versiyonu sorunsuz şekilde çalıştırdı. Hatta Firefox'ta çok güzel gözüküyordu Chrome'a göre.

Maalesef Opera 9.64 ve IE 8.0 sınıfta kaldı. Teşekkürler.

/* smlsmsk | 17 Temmuz 2009 10:52 */

güzel yazı +1 rep emeğe saygı

/* ben.ferit.im */
/* Frosten | 17 Temmuz 2009 10:59 */

Elinize sağlık faydalı bir yazı olmuş.

@xmRipper teşekkürler Firebug'u kaldırdım bile. :)

/* tomb raider */
/* fedai47 | 17 Temmuz 2009 13:58 */

Teşekkür ederim.

/* / oguzozcan.com / */
/* centrual | 17 Temmuz 2009 18:15 */

kapsayamama sorunu için
<div style="clear:left;"></div>
kullanmayın. boş bir etiket açıp kapatıyorsunuz ve bu hiç de iyi birşey değil. Bunun yerine clearfix yöntemini kullanın.

/* Eburhan | SiteBilgi | Ajax-TR | jQuery-TR | Gopof | Sunucu Tara | formDogrula (fdo) */
/* eburhan | 19 Temmuz 2009 12:09 */

Amaç clear'ın ne işe yaradığını anlatmak. Ama bu dediğini de yazının bir yerine sokuştursak hiçte fena olmaz :)

Ayrıca güzel mantık uygulamış adam, seçili kutuyu içindekilerin tamamını kapsayacak şekilde ayarlamış. Bunu tuttum :P

/* / oguzozcan.com / */
/* centrual | 19 Temmuz 2009 12:13 */

ne hikmettir bana kafyı yedirten bu clear :D
sonunda istediğimi çözen bir şey buldum.
Sağol eline sağlık.

/* http://bakire-dunya.blogspot.com/ */
/* xiackok | 19 Temmuz 2009 16:11 */

yazar'a float ile ilgili bir şey sormak istiyorum,

Sayfamda 3tane div'im var. örnek aşağıdaki gibi


1
2
3
4
5
6
7
8
9
10
11
12
13
 
<head>
<title>Untitled Document</title>
<style type="text/css">
.sag {background:#990000;}
.orta { width:500px;background:#FFCC00; margin-left:auto; margin-right:auto; }
.sol {background:#ff8400; }
</style>
</head>
<body>
<div class="sag">sag</div>
<div class="orta">orta</div>
<div class="sol">sol</div>
</body>

Yapmak istediğim şey ise,
Orta 'daki div'i width:500px 'de browser'a göre ortalatmak istiyorum.,
sağ ve sol div'leri sayfa genişliğine göre resize ettirmek,

\
( sayfaya %100 olacak ) yani,

1000px genişliği olduğunu varsaydığımız browser'ın

orta div'i ortaladık, böylece 250px sağdan ve 250px soldan boşluk oldu.
bunlarda ayrı div'ler. Sayfayı küçülttüğümde Div'leride boyutlandırmak istiyorum ama yapamadım.

yardımcı olabilirmisin ?

/* LefilsdeDieu | 22 Temmuz 2009 11:25 */

Javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="tamalan">
        <div id="sol" style="width:250px; height:500px; float:left; background-color:#F30;">SOL</div>
        <div id="orta" style="width:500px; height:500px; float:left; background-color:#000;">ORTA</div>
        <div id="sag" style="width:250px; height:500px; float:left; background-color:#CC0;">SAĞ</div>
    </div>
	<script type="text/javascript">
         var div_alan_width = document.getElementById("tamalan").clientWidth;
         if( div_alan_width > 500 ) {
              var alan_boyut = (div_alan_width-500)/2;
			  var sol = document.getElementById("sol");
			  var sag = document.getElementById("sag");
              sol.style.width = alan_boyut+"px";
              sag.style.width = alan_boyut+"px";
         }
    </script>

Sonuç :

floatlı divlerin javascriptle sayfaya göre boyutlandırılması
floatlı divlerin javascriptle sayfaya göre boyutlandırılması

Css için deneme yapmam gerekiyor. Denemelerim başarıya ulaştığında cevabı yollarım :) Şimdilik işini görecektir.

/* / oguzozcan.com / */
/* centrual | 22 Temmuz 2009 14:18 */

buda js'in css'de çözümü olsun benden :)
bu soru bi seminerde sormuşlardı bize, sadece css elementleri kullanılarak bir çözümünü bulamamıştık, bende aşağıdaki gibi çözmüştüm.

senin çözümünle aynı mantık ben css içine yazdırmıştım ;)

body{margin:0;}
.sol
{ float:left; width:expression((document.body.clientWidth-500)/2);
background:#ddd;
}

.orta
{ width:500px; float:left; background:#ccc; }

.sag
{ float:left; width:expression((document.body.clientWidth-500)/2);
background:#555;
}

div class="sol"
div class="orta"
div class="sag"

göstermek istediğim şu sadece, kahrolsun float! :)
kullandıkça browserı saçmalatıyor :)

/* LefilsdeDieu | 22 Temmuz 2009 15:03 */

:) böyle durumlarda float yerine table kullanmayı tercih ediyorum. Gerçi tableda da aynı sorun çıkacaktır :)

expression tüm browsrlarda çalışıyor mu?

/* / oguzozcan.com / */
/* centrual | 22 Temmuz 2009 15:13 */

yok hayır net patlar ff ve chrome'da :)
ama ne yapabiliriz, clientWidth-500/2 ile js'de çözdürülür, bakmak lazım
bu genelde dikey çalışmalarda çok yaşanılan bi sorun, footer'ı bottom'a yaslamakta vs tasarımın tipine göre, purecss tadında çözümü malesef yok:(
css'den çözmek için bi browser boyutunu hesaplatılması gerekiyo, %100 verirsende float'da işe yaramaz, yani tam üste tükürsen bıyık alta tükürsen sakal durumu bu :)

/* LefilsdeDieu | 22 Temmuz 2009 16:04 */

Bişe diim mi, en sağlıklı olabilecek yöntem :

1
2
3
4
5
 
<div id="anadiv" style="position:relative; text-align:center">
     <div style="position:absolute; left:0; top:0;">Burası sol taraf</div>
     <div id="orta" style="position:absolute; width:500px;"> içerik buraya girilecek. </div>
     <div style="position:absolute; right:0; top:0;">Burası sağ taraf</div>
</div>

Çıktısı şu an için aynı olacaktır. ve renk bakımından şu an için herhangi bir kayma olmayacaktır.

Bundan sonra sağ taraf ve sol tarafın width'ini ayarlaması kalıyor. Ona bir çözüm bulmazsam kafayı yerim :D satırdaki yazıları ortalamak için div çözümleri falan vardı fakat buna halen çözüm üretemedim.

/* / oguzozcan.com / */
/* centrual | 22 Temmuz 2009 16:35 */

pure css kullanarak bir çözüm yok :)
belki üzerine çok düşünüp kafa yorsak belki bi ihtimal ama sanmıyorum,

Browser'ı hesaplatmak lazım, width:100% verdin
fakat bu seferde float verince 100% yemeyecek :)

ama bu satırları yazarken,
layer mantığında çözülebilirmi die düşünmeye başladım,
orta div'i bağımsız tutsak, ortadivi'i position:absolute'la margin left/right auto desek nasıl davranır, en dışa bi div atmadan margin'e göre position almaz sanıyorum, denemek lazım :)

ama fazla takılma çok kafa yediriyo :) şirkette günlerce çalıştık üzerine yok yani, expression kullanmadan çözemedik

/* LefilsdeDieu | 22 Temmuz 2009 19:09 */

Bir tane kod gördüm, adam divlerle yazıya gradient vermiş. Üstelik Photoshopta verilen gradientten hiç bir farkı yok. Tamamen uğraş meselesi. Ama eminim ki vardır bir çözümü. CSS'i yazan takım bunu gözardı etmiş olamaz. Çünkü o türde web siteleri var.

Bir ara uğraşcam bu olayla. Kodamanda özel mesaj olayı olsa ne güzel olurdu :)

/* / oguzozcan.com / */
/* centrual | 22 Temmuz 2009 19:23 */

css3 trickleridir

/* LefilsdeDieu | 22 Temmuz 2009 20:05 */

Yok yok. absolute positionla üst üste aynı yazıyı katmanlaştırmış. 1er px aralıklarla. Sonuç : şaheser :)

/* / oguzozcan.com / */
/* centrual | 22 Temmuz 2009 20:11 */

Çözümü becerdim sonunda. Mantık olarak :
İlk önce 2 ye ayırıyorum. Daha sonra 2 bölüme de 100% boyutlarında bir tablo açıp, soldakinin sağ tarafından 250px sağdakinin de sol tarafından 250px bıraktırıyorum. Bu sayede ortada 500px kalıyor her zaman. Ortada kalan 500px için absolute bir div açıyorum, widthini 100% ayarlıyorum. İçine de ortasını dolduracağımız divi ayarlıyoruz( 500px )

Sol taraftaki tablonun solu boyuta göre değişiyor, sağ taraftakinin de aynen.

Kodumuz :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div style="text-align:center; position:relative;" align="center">

    	<div style="position:absolute; width:100%; height:200px; text-align:center; z-index:2;">

        	<div style="width:500px; height:200px; margin:0 auto; background-color:#666; font-size:0;"> </div>

        </div>

    	<div style="width:50%; float:left;">

            <table style="width:100%; height:200px;" cellpadding="0" cellspacing="0">

                <tr>

                <td style="background-color:#CCC; font-size:0;"> </td>

                <td style="width:250px; background-color:#000;"></td>

                </tr>

            </table>

        </div>

        <div style="width:50%; float:right;">

            <table style="width:100%; height:200px;" cellpadding="0" cellspacing="0">

                <tr>

                <td style="width:250px; background-color:#000;"></td>

                <td style="background-color:#CCC; font-size:0;"> </td>

                </tr>

            </table>

        </div>

    </div>

Kolay gelsin :)

/* / oguzozcan.com / */
/* centrual | 24 Temmuz 2009 17:52 */

yok işte :) içerikte sadece



yapı böyle :) biraz fetish bi durum bu :)

/* LefilsdeDieu | 29 Temmuz 2009 00:08 */

Kaldıramadın demiii :D çakal seniiii :P

/* / oguzozcan.com / */
/* centrual | 29 Temmuz 2009 00:30 */

float ve css3 demek Cross Browser demektir :)
float guzel birsey cok ise yaradigi yerler var fakat browser a ozellikle ie de bug kaynagi. bu bug lari fixleyip cross browser yapmakta ayri bir caba gerektiriyor.
yazi icin tesekkurler

/* Client Side Web Developer XHTML // CSS // XML // XSLT // Javascript // JQuery // Prototype // EXT JS */
/* diddyob | 19 Ağustos 2009 10:40 */

xmRipper önerdiğin bu Stylizer programı çok iyimiş ya süper teşekkürler. Firebug ile uğraşıyorduk orda değişiklikler css e işlemiyordu sayfa üzerine işliyordu bu direk css'te değişiklik yapıyor ve ön izlemesini hemen veriyor çok süper.

/* Pcvolki[dot]com - Ara beni, Bul beni, Oku beni... Sonsuza dek. */
/* Pcvolki | 30 Eylül 2009 15:59 */

bravo !

/* ses y0k! */
/* Sizofrenik | 30 Eylül 2009 18:36 */

güzel anlatım, teşekkürler..

/* joyologo tasarım market 2.0 Joyolog Web 2.0 Hizmetleri joyoge tasarımcılar sosyal im ciobox yazılım kutusu 2.0 online çeviri aracı KargomNerede.com */
/* eofis | 31 Ekim 2009 02:18 */

float olacak objelerin dışındaki objeye overflow hidden derseniz clear etmenize gerek yoktur.

/* Renkli Dergi */
/* muratmoon | 31 Ekim 2009 12:44 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork