CSS - z-index ile katman olusturamamak

**metsatöll** · 29.06.2006 22:09

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 Kodu:

<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 22:48

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 23:13

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 10:17

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 Kodu:

<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 10:18

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 10:20

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

**metsatöll** · 30.06.2006 23:09

@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 Kodu:

<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 02:55

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 10:49

bildigim seyi, yanlis yapiyormusum,

tesekkür ederim..

Konu Başlığı: CSS - z-index ile katman olusturamamak

Konuyu Paylaş

Seçenekler

CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Re: CSS - z-index ile katman olusturamamak

Bu konu başlığı için etiketler

Mesaj Seçenekleri