Web sayfalarımızı tasarlarken bazı durumlarda dikey çizgi oluşturma ihtiyacımız olabiliyor. Örneğin, bir timeline tasarlamak isterseniz dikey çizgiyi kullanmanız gerekecektir. Html etiketlerinden olan <hr> etiketi ile yatay çizgi oluşturabiliyoruz. Ama dikey çizgi oluşturmak için herhangi bir Html etiketi bulunmuyor. Bu yüzden Css ile dikey çizgi oluşturacağız.
Css ile dikey çizgi oluşturmanın birden fazla yöntemi bulunuyor. Bu yazımızda en basit ve kullanışlı yöntemden bahsedeceğim.
⇒ Öncelikle bir <div> etiketi oluşturup, id attribute’una verticle yazıyorum.
|
1 2 3 |
<div id="verticle"></div> |
⇒ Css kodlarımızı yazalım.
|
1 2 3 4 5 6 7 |
#verticle{ width: 4px; height: 200px; background-color: cornflowerblue; } |
Gördüğünüz gibi Css ile 3 satır kod yazarak oluşturabiliyoruz.
Şimdi de oluşturacağımız bir dikey çizgiyi yatayda tam ortaya nasıl konumlandırabiliriz ona bakalım.
⇒ Yine bir <div> etiketi oluşturup, id attribute’una verticle yazıyorum.
|
1 2 3 |
<div id="verticle"></div> |
⇒ Css kodlarımızı yazalım.
|
1 2 3 4 5 6 7 8 9 |
#verticle { border-left: 4px solid cornflowerblue; height: 200px; position: absolute; left: 50%; margin-left: -2px; } |
İstediğimiz bir yükseklik değeri verdikten sonra, yatayda ortalamak için position özelliğine absolute değerini, left özelliğine ise 50% değerini veriyoruz.
Son olarak sayfanın tam ortasında olması için vermiş olduğumuz border-left değerinin yarısının eksi (-) değerini, margin-left olarak veriyoruz.
Örneği incelerseniz dikey çizginin yatayda tam ortalandığını görebilirsiniz.
Umarım sizin faydalı bir yazı olmuştur. Şu yazılarda ilginizi çekebilir.
Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)
Yeni bir yazımda görüşmek üzere.
Faydalı bir yazı olmuş. WordPress yazı içeriğine uygulamama katkısı oldu teşekkürler.
Yorumunuz için ben teşekkür ederim.
Merhaba Üstadım;
WordPress konu başlıklarının yanına çizgi eklemek istiyorum. single.php dosyasındaki başlık kodu aşağıdaki gibi nasıl yapabilirim acaba?
Merhaba Musa,
Aşağıdaki gibi derken? tam anlayamadım. Yapmak istediğin yazı başlıklarının soluna kenarlık vermek mi?