+ Yanıtla
Toplam 9 sonuçtan 1 ile 9 arası olanlar

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

  1. #1

    CSS - z-index ile katman olusturamamak

    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> 
    Ekli Dosya(lar)
    • Dosya Uzantısı: jpg 01.jpg (66.7 KB, 28 defa görüntülendi)
    • Dosya Uzantısı: jpg 02.jpg (38.3 KB, 30 defa görüntülendi)
    Mesaj metsatöll tarafından 29.06.2006 (23:33) yeniden düzenlendi.

  2. #2

    Re: CSS - z-index ile katman olusturamamak

    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.

  3. #3

    Re: CSS - z-index ile katman olusturamamak

    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.
    Estetik Detayda Gizlidir.

  4. #4

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

  5. #5

    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.

  6. #6

    Re: CSS - z-index ile katman olusturamamak

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

  7. #7

    Re: CSS - z-index ile katman olusturamamak

    @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> 
    Ekli Dosya(lar)

  8. #8

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

  9. #9

    Re: CSS - z-index ile katman olusturamamak

    bildigim seyi, yanlis yapiyormusum,

    tesekkür ederim..

+ Yanıtla

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

Mesaj Seçenekleri

  • Yeni başlık açamazsınız
  • Cevap yazabilirsiniz
  • Dosya ekleyemezsiniz
  • Mesajlarınızı değiştiremezsiniz