CSS Margin & Padding
Merhaba Arkadaşlar,
Bu makalede sizlere en çok kullandığımız CSS nesnelerinden ” Margin ” ve ” Padding ” i anlatacağım. Sayfa içerisinde konumlandırılan sayfa bileşenlerinde , menülerde , iç ve dış boşluklarda.. Kısacası hemen hemen her işlemde bu ikiliyi sık sık kullanıyoruz. Margin ile kutularımızın sağdan , soldan , üstten , alttan kendilerine en yakın bulunan ve kısacası sırtını ona yasladığı nesnelerden uzaklığını ayarlayabiliyoruz. Padding ise oluşturduğumuz kutuların içerisine yerleştireceğimiz yazı , resim gibi sayfa bileşenlerinin kutu kenarlıklarından ne kadar uzak kalacağını yani kısacası ne kadar iç boşluk olacağını belirlememizi sağlar.
- Her iki işlem için de sayfada tek değer ( margin : 10px ; padding 10px ) kullanırsak bu nesnelerin dört yönden de eşit boşluklar ile konumlandırılacağı anlamına ,
- iki değer ( margin: 10px 20px; padding: 10px 20px ) kullanırsak bu üst ve alttan 10px & sağ ile sol kısımdan 20px ‘lik bir boşluk olacağını ,
- üç değer kullanırsak ( margin:10px 15px 20px; padding: 10px 15px 20px ) bu üstten 10px – sağ ve soldan 15px , alttan ise 20px ‘lik bir boşluk olacağını,
- dört değer kullanırsak ( margin: 5px 10px 15px 20px; padding: 5px 10px 15px 20px ) bu üstten 5px – sağdan 10px – alttan 15px ve soldan 20px lik bir boşluk olacağını
gösterir. Uygulamamıza geçelim ve bu iki işlemi kullanarak daha iyi kavrayalım. Bu işlem için en güzel uygulamanın dikey bir menü ile yapılabileceğini düşünüyorum. Bunun için ” index.html ” ve ” stil.css ” adında iki adet sayfa oluşturuyoruz. ” index.html ” dosyamız içerisinde ilk olarak klasik html kodlarımızı oluşturuyoruz ve ardından ”
- ” mantığını kullanarak içerisinde ” Anasayfa ” , ” Hakkımızda ” , ” Referanslar ” , ” Galeri ” , ” İletişim ” butonları bulunan bir menü oluşturuyoruz.
<html>
<head>
<title>BilgiSayaci.Org - Margin & Padding Uygulaması</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>
index sayfamızı bu kodları yazdıktan sonra çalıştırdığımızda üzerlerine link atanmış dikey bir biçimde duran text ‘leri göreceğiz.
Şimdi stil sayfamıza gidiyoruz ve ilk olarak bu linkleri düzenli bir hale getiriyoruz.
li {list-style-type: none;}
a {text-decoration: none; color: #000; font-family: tahoma,sans-serif; font-weight: bold; font-size: 16px;}
Gördüğünüz üzere bu li ve a css blokları ile liste başında bulunan noktaları kaldırdık , linklerin alt çizgilerini kaldırdık, renklerini siyah yaptık , font ‘unu tahoma , tipini kalın ve boyutunu 16px yaptık.
Şimdi sıra işin içerisine margin ve padding i sokma işlemine geldi. padding ‘i şu anki görünümde kullanacağım ancak margin için ise :hover özelliğini yani linklerden herhangi birinin üzerine mouse imleci ile gelme ihtimalini değerlendireceğim. CSS ‘imizin margin ‘siz hali şu şekilde olacaktır.
li {list-style-type: none; background-color: #ddd; border-bottom: 3px solid #fff; padding: 5px; width: 150px; }
a {text-decoration: none; color: #000; font-family: tahoma,sans-serif; font-weight: bold; font-size: 16px;}
Bu işlemimizle de padding kullanarak ” li ” lerimizin iç boşluklarını eşit bir biçimde ayarladık ve border , background-color , width gibi genel özellikleri ile birlikte kullanılabilir bir menü haline getirdik. Şimdi ise margin işlemimiz için linklerin ” :hover ” özelliğine kısa bir hareket getireceğiz. Bu sayede herhangi bir linkin üzerine mouse imleci ile gelindiğinde 10px ‘lik bir sağa doğru hareket olacaktır. Ayrıca sayfalarda küçük ama dikkat çekilen bir özellik olan ” .active ” class ‘ını kullanarak hangi sayfada bulunduğumuzu menüler sayesinde de görebilmiş olacağız. “” etiketleri içerisinden örneğin ” Referanslar ” sayfasında olduğumuzu varsayarsak bu sayfanın linkini “” şeklinde düzenleyerek stil sayfamızda belirttiğimiz özellikleri hayata geçirebiliriz. Stil sayfamızın tüm bu işlemlerden sonra ki hali şu şekilde olacaktır :
li {list-style-type: none; background-color: #ddd; border-bottom: 3px solid #fff; padding: 5px; width: 150px; }
a {text-decoration: none; color: #000; font-family: tahoma,sans-serif; font-weight: bold; font-size: 16px;}
a:hover{margin-left: 10px; color: #593b3b;}
.active{margin-left: 10px;}
[/Css]
Stil sayfamızı bu hale getirdikten sonra kaydedersek eğer ” active ” class ‘ı dışındaki tüm özellikler çalışacaktır. Active class ‘ımızı da işlemlerimiz içerisine sokmak için hemen üst tarafta anlattığım gibi Referanslar sayfasında var olduğumuzu düşünerek ” index.html ” kodlarını düzenliyoruz ve ortaya son haliyle şu şekilde bir ” index.html ” çıkıyor.
<html>
<head>
<title>BilgiSayaci.Org - Margin & Padding Uygulaması</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#" class="active">Referanslar</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 18 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar