Bloğumda toplam 12 kategoride yazılmış 311 yazı ve 269 yorum var.

CSS: Son Çocuk ( last-child ) Kullanımı

6 sene önce yazıldı, 2.654 kere okundu. 0

Arkadaşlar merhabalar. Bildiğimiz gibi css bizim en önemli kodlama dillerimizden biri bir web tasarımcı olarak. Yine bu işe yeni başlayanlar veya css ile yeni tanışanlar için uygun bir paylaşım olacak bu makale.

Bazen ul, ol gibi listeler oluşturmamız gerekiyor. Ancak her li’ye verdiğimiz border veya buna benzer özellikleri son li için iptal etmemiz gerekebiliyor. Ya da son li için ekstradan özellik belirlememiz gerekebiliyor. Bu gibi durumlarda çoğu arkadaşlar ilk başlarda son li ye elle müdahale ediyorlar ki ben de çok uzun zaman önce öyle yapıyordum, yalan yok. Ancak her şeyin kolay yolu mutlaka vardır diye düşünerek ilerlersek bu yolda, herşey gerçekten de daha kolay olacaktır.

Örneğin, bir liste hazırlıyoruz. Bu listemiz bir menüyü içeriyor. Sitemizdeki ana menü olsun. Her li için border-right değeri verdik ve son li de bu border aktif olursa çirkin gözükeceğinden kaldırmamız gerekiyor. Bunu css üzerinden last-child seçicisi ile nasıl yapacağımızı gelin örnek kodlarla yakından inceleyelim;

Html menü kodlarımız;

<ul class="menu">

<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">Ürünlerimiz</a></li>
<li><a href="#">İletişim</a></li>

</ul>

Gördüğümüz gibi basit bir menü oluşturduk. Gelin şimdi stil kodlarımızı inceleyelim;

.menu { margin:0; padding:0; list-style:none; }
.menu li { line-height:35px; float:left; padding:0 15px 0 15px; border-right:1px #000 solid; }
.menu li:last-child { border:none; }
.menu li a { text-decoration:none; color:#000; font-size:14px; }

.menu li:last-child { border:none; } kısmı bizim son li’deki border’ı sıfırladığımız kısım gördüğünüz üzere. Listelerimizde bu mantığı kullanarak menülerimizi daha kolay bir şekilde hazırlayabiliriz, hatta bu kadar basit bir kod sayesinde önümüze bir dolu seçenek çıkacağı için yaratıcılığımıza yol açmış olabiliriz.

Başka bir yazımızda görüşmek üzere arkadaşlar. Sorularınızı sormaktan çekinmeyin, kendinize iyi bakın :)

BENZER  CSS3 Online Oval Kenar Oluşturma Aracı

Konuyla alakalı bir şeyler yazabilirsin.

İsimTescil.net Sonunda Arayüzünü Güncelledi

Merhaba arkadaşlar. Uzun bir zaman boyunca gına getiren, sürekli yavaşlığı ve “her yüzüne bakışımızda...

1 ay önce. 52 0 Devam Et

Sitelerinize WhatsApp Butonu Ekleyerek Müşterilerinizle Etkileşime Geçin

Merhaba arkadaşlar. WhatsApp günün hemen her anında iletişim ihtiyacımızı karşılayan olmazsa olmaz bir araç h...

2 ay önce. 58 0 Devam Et

İşletmelerde Ön Muhasebe Yazılımı Kullanmanın Önemi ve Bulut Tabanlı Yazılımlar

Merhaba arkadaşlar. Özellikle son zamanlarda girişimcilik ruhunun çok fazla kişiye ulaştığını, herkesin özell...

2 ay önce. 22 0 Devam Et

Material Design Icons – MDI ile Sitelerinize Icon Set Nasıl Eklenir

Selam arkadaşlar. Bu yazıda sitelerimizi daha doğrusu arayüzlerimizi hazırlarken Material Design Icon Set’ind...

2 ay önce. 22 0 Devam Et

SSD Disk Kullanmak Bilgisayarımızı Ne Kadar Hızlandırır?

Solid State diskler piyasa çıktığından beri bilgisayar satıcıları hatta elindeki ikinci el bilgisayarı satan in...

2 ay önce. 39 0 Devam Et

Hakkımda

1994'ün Haziran'ında Beyşehir/Konya'da dünyaya gelmişim. O zamanlar, gerek tombikliğim gerek yeşil gözlülüğüm sebebiyle gören herkes tarafından el üzerinde ( hatta defalarca havaya atılıp tutulma gibi ) tutulmuşum.

Bebekliğim Konya'da bir köyde, çocukluğum İstanbul'da geçti. İstanbul'da başladığım iş hayatına doğduğum yer, Beyşehir'de devam ediyorum.

Uzun yıllar çeşitli firmalarda çalıştıktan sonra 2017’den beri kendi yazılım ve reklam şirketimi kurdum. Geliştirmeye ve değiştirmeye devam ediyoruz.