Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Nerede absolute nerede relative?

Konu, 'Web Programlama' kısmında webandyazilimprofesor tarafından paylaşıldı.

  1. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    arkadaşlar bir web sitesi hazırlıyorum. Responsive olarak hazırlıyorum. Ama nerede position değerini absolute yapacağımı nerede relative yapacağımı bilmiyorum.

    Yardımınıza ihtiyacım var.
     
  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    absolute kullanırsan, kullandığın nesne, konum olarak sayfadaki nesnelerden bağımsız hale gelir. yerden havaya kaldırmış olursun.

    Bu durumda nesne nerede duracağını bilemez, o sebeple nesneye konum değerleri vermelisin.
    left: 10px; top:10px; gibi...

    Sayfada havaya kaldırdığın birden fazla nesne olabilir, Birbirlerinin önünü kapatırlar.
    Hangisi önde, hangisi arkada olacak, katman numarası vermelisin.
    z-index: 10; gibi... z-index numarası daha büyük olan daha üst katmanda görüntülenir.
    absolute positionda, içinde bulunduğu sayfanın kenarlarını referans alır.

    relative positionda da nesneyi havaya kaldırırsın ve katman numarası verirsin.
    absolute dan farkı, içinde yada altında yani en yakınında bulunduğu nesnenin kenarlarına göre kendini yerleştirir. Başka bir div in içindeyse, o dive göre konum alır, içinde değilse en yakınındaki nesneye, başka nesne yoksa sayfanın kenarına göre...(%100 doğrudur diyemem, bildiğim bu)

    top left vermezsen, default değer olarak sıfır kullanır.
    javascript le absolute ve relative nesnelerin pozisyonları ile oynayacaksan, mutlaka top ve-veya left vermelisin, yoksa js kodun çalışmaz.

    Örnek kod w3cschool dan. (evet kopya çektim:oops:)

    Kod:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.relative {
        position: relative;
        left: 30px;
        border: 3px solid #73AD21;
    }
    </style>
    </head>
    <body>
    
    <h2>position: relative;</h2>
    
    <p>An element with position: relative; is positioned relative to its normal position:</p>
    
    <div style="border: 1px solid black; margin-left: 50px;">
        <div class="relative">
            This div element has position: relative;
        </div>
    </div>
    
    </body>
    </html>
     
    Son düzenleme: 30 Mayıs 2018
  3. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    öncelikle cevap verdiğiniz için çok teşekkür ederim. Ben bir sayfayı mobilde açtım sayfa resmiekte var bir göz atın(header tam siyah değil,istediğim gibi değil)

    Bunu nasıl çözebilirim?

    Yardımınıza ihtiyacım var.
     

    Ekli Dosyalar:

  4. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    @webandyazilimprofesor
    "header tam siyah değil" derken, üstteki menü gri renk onumu kast ediyorsunuz.?

    Bunun için sayfa html kodunu ve css kodunu koymanız gerekir, yoksa iş basit olsada çözemeyiz.
     
  5. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    ben giriş ve kayıt butonunun oluğu bölümü kast ediyorum oranında siyah olması lazım.Kodlar ekteki dosyada var.

    Yardımınıza ihtiyacım var.
     

    Ekli Dosyalar:

  6. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    @webandyazilimprofesor

    Çalıştırdım, bende arka plan siyah göründü.

    Bakmamız için eklediğiniz dosyada eksik kodlar olmalı ve o kodlar arkaplanı beyaz yapıyordur.

    javascript ile yada eventhandler tanımı ile background veriyorsanız bir yerde, ancak o şekilde olabilir diye düşünüyorum.
     
  7. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    Emin misiniz? Birde telefondan baksanız çok sevinirim.

    Yardımınıza ihtiyacım var.
     
  8. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Dediğim gibi, php kodlarını ayıklayıp çalıştırdım ve siyahtı.
    php bilmediğim için php ile orayı beyaz yapabiliyormusun yorum yapamam.
     
  9. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    yani tüm öğeleri absolute ile yerleştirsem responsive tasarım yapmazsam görüntü bozulmaz değil mi?

    Yardımınıza ihtiyacım var.
     
  10. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Senin dizaynında absolute a ihtiyaç yok.

    Absolute genelde hareketli nesneler için kullanılır. mesela ekran kenarından çıkıp sonra kaybolan bildirimler gibi, yada geniş bir alanda küçük bir nesneyi ortaya sağa filan yaslayacaksan gibi yada sayfada diğer nesnelerin üstünde göstermek istediğin mesajlar gibi.

    Ayrıca button tanımlarında hem class="" vermişsin hemde style="" koymuşsun. Normalde style="" baskındır ama ikisi aynı anda kullanılırsa zamanla karşıklık yaratır.
    class vermişsen, style kullanmadan tüm özellikleri class içinde vermelisin, bu standard da sağlar.

    <div lerle sorun yaşadığın yerlerde, <table larla hallet. O zaman yerleştirme sorunu yaşamazsın.

    table ların SEO dostu olmadığı hikayesi tam doğru değildir.
    Tamamen table larla 15 sene önce yazdığım site, ikinci yıldan itibaren, kendi alanında google da hep ilk sırada çıkıyor. yani sitenin özü ne iş yaptığı ve nasıl hizmet verdiği, sadeliği ve sağlamlığı önemli..

    google ın table düşmanı olması saçmalıktan öte bişey değil. büyük ihtimalle google daki bi önemli yazılımcı table içindekileri analiz ettiremyirum demiştir, div kullanılsın demiştir, dünyada google ın peşine takılmıştır, beceriksiz bi yazılımcı yüzünden. Hep böyle oluyor. table kaldırmak için 40 tane yeni özellik yaratmak-eklemek zorunda kaldılar ve çorbaya döndürdüler işi... çok daha karmaşık oldu.

    div lerde zorlanıyorsan table lar kullan ve style= fazla kullanma, olabildiğince çok class ile halletmeye çalış.
    buttonlarda dinamik olarak renk değiştirmek için onmouseover move ve out a da ihtiyacın yok, class ile yapmalısın.

    örneğin
    .btGirisler { background-color: ...; color: ...; radius:...; width:...; height:...;}
    .btGirisler:hover { background-color: ...; color: ...; ... ...}

    gibi, hatta animasyonlu bile yapabilirsin.
    .btGirisler { opacity: 0.5; background-color: ...; color: ...; radius:...; width:...; height:...;}
    .btGirisler:hover { background-color: ...; color: ...; opacity: 1; transition: all 0.6s ease-out;}

    gibi, renk solukken mouse üstüne gelince renk canlanıyor. gibi... butonlarda animasyon pek kullanılmıyor ama yapabileceklerine örnek verdim.

    padding ler margin lerde çok işine yarar... sabit nesnelerde absolute relative pek fazla kullanmamalısın... ancak son çare... padding margin ve float özelliklerinide oku...
    w3cschool sitesi bu konuda iyidir. CSS Tutorial
     
    Son düzenleme: 1 Haziran 2018
  11. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bu arada css konusunda iyi olan biri bilgi verseydi iyi olurdu, css konusunda yeterli olduğumu söyleyemem, yanlış yönlendiriyorda olabilirim...
     
  12. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    bu bilgiler için çok teşekkür ederim. Birde ben daha bilgili biri anlatsın diyorsunuz. Table ile konumlandırma da bir örnek kod verebilir misiniz (sadece bir iki label, bir iki buton) Birde class kullan derken? Son olarak tüm siteyi table ile yapsam bir sorun çıkar mı size siz yazdığınız sitede hep table mi kullandınız?

    Yardımınıza ihtiyacım var.
     
  13. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bu 2 linkte bir sürü basit table örneği var.

    Bu linkte, table tanımları var.
    HTML Tables

    Bu linktede, table ların özelliklerini css ile nasıl tanımlayabilirsin örnekleri var.
    CSS Styling Tables


    Table ları, divlerle sayfadaki nesneleri tam yerleştiremediğin zaman kullanmanı öneririm. <divlerle, <section ve <article larla yapabiliyorsan, table a gerek yok.

    Eski yazdığım siteler her yerde table çoktu.
    Şimdi ise, css de yeni çıkan elemetler yüzünden biraz azalttım ama yinede çok.

    Yukardaki 2 linkteki bir çok örneği iyice öğren, her özellik nasıl çalışıyor tek tek test et.

    Bugünü sadece öğrenmekle geçirirsen, yarın ve daha sonra rahat edersin.

    class tan kastım css class ları. Senin kodda var mesela <button class="girisb"
     
  14. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    cevabınız için çok teşekkür ederim. Hangi site(leri) yaptınız? Bir incelemek isterim böyle bir yazılım ustasından çıkmış siteyi ve ya siteleri. :)

    Cevaplarınızı bekliyorum.