CSS - z-index ile katman olusturamamak

metsatöll · 29.06.2006

Asagidaki gibi bir kodum var,
bu kod ile yapmak istedigim bir diklemesine katman sayfayi ortalamis olan (container), ve bu containerin arkasina gelecek olan bir baska katman (backgroundline)

z-index ile container katmanini üste almaya calistim,

Problemim : backgroundline icin yükseklik-uzunluk ve margin degerlerini atadim ama, istedigim gibi bir sonuc alamadim... cimen seklinde üste bulunan resimin container katmaninin altina gelmesi icin ne yapmam gerekiyor?

// Edit : Daha acik olmak icin su andaki kodla olusan görüntüyle beraber, benim nasil yaparim diye sordugum görünümün resimlerini ekledim

HTML Code:

<HTML>
<head>
<style>
        body	{
            background: #fff url('bg.gif'); 
            }
        #backgroundline {
            margin:100 auto auto 0;
            background: #fff url('grass.png');
            width: 100%;
            height: 159px;
            z-index: 1;
            }
        #container	{
            position: relative;
            margin: 0 auto;
            height: 100%;
            width: 800px;
            background-color: #fff;
            border: 1px solid #000;
            voice-family: "\"}\""; /* IE için */
            voice-family: inherit;
            width: 778px;
            z-index: 2;
            }
        HTML>body #container	{ /* OPERA için */
            width: 778px;
            }
</style>
</head>

<body>
    <div id="backgroundline">asvfsgf</div>
    <div id="container">asfasf</div>  
</body> 
</HTML>

karavanabatu · 29.06.2006

Kod:

<HTML>
<head> 
<style> 

body { background: #fff url('bg.gif'); }

#backgroundline { 
margin:0 auto; 
background: #fff url('grass.png'); 
width: 100%;
height: 159px; 
z-index: 1;
} 

#container { 
position: relative; 
margin: 0 auto;
height: 100%;
width: 800px; 
background-color: #fff; 
border: 1px solid #000; 
voice-family: "\"}\""; /* IE için */ 
voice-family: inherit; 
width: 778px; 
z-index: 2; 
} 

HTML<body #container { 
width: 778px; 
} 
</style> 
</head>
<body>  
  
<div id="container">asfasf</div> 
<div id="backgroundline">asvfsgf</div>
</body> 
</HTML>

Yanlış anlamadıysam bu kod işini görür.

CreaNext · 29.06.2006

Alıntı:

karavanabatu tarafından gönderilen mesaj:

Yanlış anlamadıysam bu kod işini görür.

alakası yok. div lerin yerini değiştirmekle ne ilgisi var.

Lautreamont · 30.06.2006

z-index sadece position: absolute; durumda olan hücrelere verilebilir. bu nedenle şu anda sayfaya ortalamaya çalıştığın hücreye z-index veremezsin. (yada sayfaya ortalayamazsın)

Bu arada yapmaya çalıştığın layout için hiçbir z-index kullanmana gerek yok. hücrelerin özelliklerini doğru tanımlaman ve içiçe sokman yeterli.

HTML Code:

<HTML>
<head>
	<style>
		body	{
			background: #fff url('bg.gif');
		}
		#background	{
			background: #fff url(grass.jpg) top left repeat-x; 
/* Bu hücreye belirli bir height değeri vermene gerek yok.
background position ile arka resmi yerleştirebilirsin. */
			width: 100%;
		}
		#container	{
			position: relative;
			margin: 0 auto;
			width: 800px;
			background-color: #fff;
			}
	</style> 
</head>

<body>
	<div id="background">
		<div id="container">
			asfasf
		</div>
	</div>
</body>

</HTML>

kod tam istediğin biçimi sağlamıyor olabilir; ancak mantığı yukarıdaki şekilde. Ben olsam arka plan resmini body'ye verir. sayfayı #container ile ortalar {positiion:relative;} içine gelecek sayfaları container'a göre ayarlardım.

Dhilgul · 30.06.2006

En basit çözüm için absolute positioning işini görür.

Bi diğer çözüm de backgroundline'da z-index belirtme, default olarak 0 alır zaten. container'ı da 1 yap.

İkinci çözümü denemedim ama position:absolute kullanman kesin çözüm.

Dhilgul · 30.06.2006

Lautreamont ile aynı anda yazmışız ama o sanatını konuşturmuş yine.

metsatöll · 30.06.2006

@Lautreamont
Asagida verdigin kodun aynisi (bir tek background position da degistirilmis degerler var). Tam istedigim gibi oldu ama background katmanini sola sifirlamamin yolu nasil acaba, margin ile halledilebilecegini sandim ama margin:0; degeri bir ise yaramadi

@dhilgul,
yardimin icin sagol ama benim hala positsioning lerle aram iyi deil

HTML Code:

<HTML>
<head>
<style>
  body {
        background: #fff url('bg.gif'); 
        } 
#background {
        background: url(grass.jpg) 0px 150px repeat-x; 
        width: 100%;
        } 
#container { 
        position: relative; 
        margin: 15px auto 25px 80px; 
        width: 800px; 
        background-color: #fff; 
        border: 1px solid #000; 
        } 

</style> 
</head> 
<body>  
    <div id="background">  
        <div id="container">  


    </div>  
    </div> 
</body>
</HTML>

Lautreamont · 01.07.2006

orada gördüğün boşluk browser'ın default olarak verdiği en genel boşluk. body'ye yada HTML'ye margin:0; padding:0; verirsen sorunun çözülür. Farklı browserların farklı boşluk değerleri tanımladığını düşünürsek sitede kullanılan tüm HTML elemanlarını sıfırlamak için:

Kod:

* {
margin:0;
padding:0;
}

kodunu kullanabilirsin.

metsatöll · 01.07.2006

bildigim seyi, yanlis yapiyormusum,

tesekkür ederim..

30.06.2006	#4 (permalink)
Lautreamont Üyelik Tarihi: 22.04.2002 Yer: smyrna Mesaj: 508 Görsel: 2	Re: CSS - z-index ile katman olusturamamak z-index sadece position: absolute; durumda olan hücrelere verilebilir. bu nedenle şu anda sayfaya ortalamaya çalıştığın hücreye z-index veremezsin. (yada sayfaya ortalayamazsın) Bu arada yapmaya çalıştığın layout için hiçbir z-index kullanmana gerek yok. hücrelerin özelliklerini doğru tanımlaman ve içiçe sokman yeterli. HTML Code: <HTML> <head> <style> body { background: #fff url('bg.gif'); } #background { background: #fff url(grass.jpg) top left repeat-x; /* Bu hücreye belirli bir height değeri vermene gerek yok. background position ile arka resmi yerleştirebilirsin. */ width: 100%; } #container { position: relative; margin: 0 auto; width: 800px; background-color: #fff; } </style> </head> <body> <div id="background"> <div id="container"> asfasf </div> </div> </body> </HTML> kod tam istediğin biçimi sağlamıyor olabilir; ancak mantığı yukarıdaki şekilde. Ben olsam arka plan resmini body'ye verir. sayfayı #container ile ortalar {positiion:relative;} içine gelecek sayfaları container'a göre ayarlardım. __________________ Je ne veux pas être flétri de la qualification de poseur. Je ne laisserai pas des Mémoires. La poésie n'est pas la tempête, pas plus que le cyclone. C'est un fleuve majestueux et fertile. (...)

30.06.2006	#5 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	Re: CSS - z-index ile katman olusturamamak En basit çözüm için absolute positioning işini görür. Bi diğer çözüm de backgroundline'da z-index belirtme, default olarak 0 alır zaten. container'ı da 1 yap. İkinci çözümü denemedim ama position:absolute kullanman kesin çözüm.

30.06.2006	#6 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	Re: CSS - z-index ile katman olusturamamak Lautreamont ile aynı anda yazmışız ama o sanatını konuşturmuş yine.

01.07.2006	#8 (permalink)
Lautreamont Üyelik Tarihi: 22.04.2002 Yer: smyrna Mesaj: 508 Görsel: 2	Re: CSS - z-index ile katman olusturamamak orada gördüğün boşluk browser'ın default olarak verdiği en genel boşluk. body'ye yada HTML'ye margin:0; padding:0; verirsen sorunun çözülür. Farklı browserların farklı boşluk değerleri tanımladığını düşünürsek sitede kullanılan tüm HTML elemanlarını sıfırlamak için: Kod: * { margin:0; padding:0; } kodunu kullanabilirsin. __________________ Je ne veux pas être flétri de la qualification de poseur. Je ne laisserai pas des Mémoires. La poésie n'est pas la tempête, pas plus que le cyclone. C'est un fleuve majestueux et fertile. (...)

01.07.2006	#9 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 28 Mesaj: 527 Görsel: 9	Re: CSS - z-index ile katman olusturamamak bildigim seyi, yanlis yapiyormusum, tesekkür ederim.. __________________ Gabfire - Talkntravel

Sponsorlu Bağlantılar
Zoque.Forum Reklam