CSS - z-index ile katman olusturamamak

metsatöll · 29.06.2006 | 21:09 | #1

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 | 21:48 | #2

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 | 22:13 | #3

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 | 09:17 | #4

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 | 09:18 | #5

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 | 09:20 | #6

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

metsatöll · 30.06.2006 | 22:09 | #7

@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 | 01:55 | #8

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 | 09:49 | #9

bildigim seyi, yanlis yapiyormusum,

tesekkür ederim..

Lautreamont Üyelik Tarihi: 22.04.2002 Mesaj: 508 Görsel: 2	30.06.2006 \| 09:17 \| #4 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. (...)
	Alıntı yap

Dhilgul Üyelik Tarihi: 05.05.2006 Mesaj: 387	30.06.2006 \| 09:18 \| #5 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 Üyelik Tarihi: 05.05.2006 Mesaj: 387
	Alıntı yap

Dhilgul Üyelik Tarihi: 05.05.2006 Mesaj: 387	30.06.2006 \| 09:20 \| #6 Lautreamont ile aynı anda yazmışız ama o sanatını konuşturmuş yine.
Dhilgul Üyelik Tarihi: 05.05.2006 Mesaj: 387
	Alıntı yap

Lautreamont Üyelik Tarihi: 22.04.2002 Mesaj: 508 Görsel: 2	01.07.2006 \| 01:55 \| #8 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. (...)
	Alıntı yap

metsatöll Üyelik Tarihi: 11.07.2001 Mesaj: 570 Görsel: 9	01.07.2006 \| 09:49 \| #9 bildigim seyi, yanlis yapiyormusum, tesekkür ederim..
metsatöll Üyelik Tarihi: 11.07.2001 Mesaj: 570 Görsel: 9	__________________ Gabfire - Talkntravel
	Alıntı yap

Seçenekler
Yazıci Çıktısı Alın Bu Konuyu Arkadaşınıza Gönderin