MARGİN KULLANARAK DİVLER ARASINA BOŞLUK VERMEK

Bir önceki dersimizin (CSS Eklentili Web) son bölümünde CSS eklentili yatay eksende yan yana konumlanan üç DIV'li web sayfasını yapmıştık.

Bu sayfamızda ise, margin etiketi kullanarak divlerin arasına boşluk vermeyi anlatacağım. Şimdi ilk çalışmamızdaki son web sayfasını yeniden oluşturalım,
İlk adımda "stil.css" dosyasını oluşturalım, bunun için bilgisayarınızda yeni bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim üç divli hazır CSS etiketlerini kopyalayarak Noteped'e yapıştırın ve stil.css olarak masa üstüne kaydedin.

Şimdi de HTML Dosyamızı hazırlayalım. Bilgisayarınızda bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim hazır üç divli web sayfası kodunu kopyalayarak yapıştırın.

Artık çalışmamızı sonlandırabilirsiniz, kodları yapıştırdığınız Noteped'i deneme.html ismiyle farklı kaydederek bir web sayfası elde edelim. Bilgisayarımızda aşağıdaki gibi iki dosya oluştu,

Artık uygulamamızı kontrol edebiliriz. "deneme.html" dosyasını açıp bakalım. Sizin deneme.html web sayfasında da aynı görseli elde etmiş olmanız gerekmektedir.


UYGULAMAYI GELİŞTİRME;

Yatay eksende yan yana dizilmiş divlerin arasına boşluk vermek için stil.css dosyasını Notoped olarak açın ve yan yana konumlanmış divlerden ikinci div'in son satırına margin etiketini yapıştırın. (aşağıdaki örnek gibi) ve değişikliği kaydedin.

Şunu belirteyim ki, sadece margin:10px; yazarsak div'in dört tarafında 10px boşluk oluşur,
margin-top:10px; (div'e üstten 10px boşluk verilir)
margin-right:10px; (div'e sağdan 10px boşluk verilir)
margin-left:10px; (div'e soldan 10px boşluk verilir)
margin-battom:10px; (div'e alttan 10px boşluk verilir)

Örnek olarak, ikinci div'e boşluk verelim ikinci div'e sağdan ve soldan boşluk vermek için (aşağıdaki örnek gibi) değişikliği kaydedin.

#ikinci_div {
    width:250px;
    height:150px;
    border: 1px #000000 solid;
    background-color:#6699FF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    line-height:150px;
    float:left;;
     margin-left:10px; (div soluna 15px boşluk veriyoruz)
     margin-rigth:10px; (div sağına 15px boşluk veriyoruz)
    }

Yatay eksende yan yana dizilmiş div'leri kontrol edebiliriz. "deneme.html" dosyasını açıp bakalım. Sizin deneme.html web sayfasında ikinci div'in sağında ve solunda margin boşluğu verilmiş aynı görseli elde etmiş olmanız gerekmektedir.

Bu dersimizde burada tamamlandı,

  

Copyright © 2018 Hüseyin Tepe