CSS ile Yatay Çizgi Arasında Başlık Oluşturmak

Arkadaşlar,

Bir başlığım olsun istiyorum. İki yanında da yatay çizgi olsun. Aşağıdaki gibi:

-----------------------   BAŞLIK   --------------------- 

Bunu CSS ile nasıl yapabilirim? Bu yanındaki çizgiler kesik değil tabi.

Bu yapıyı CSS konumlandırma (positioning) özelliğini kullanarak yapabiliriz. Öncelikle aşağıdaki gibi bir HTML yapısına ihtiyacımız var.

<div class="baslik">
  <span class="yazi">Başlık</span>
  <hr />
</div>

Burada .baslik sınıfına position: relative; özelliğini vererek kapsayıcı olduğunu belirtiyoruz.

.baslik {
  position: relative;
  text-align: center;
}

Sonrasında hr elementini position: absolute; özelliği ile kapsayıcının içine konumlandırıyoruz.

.baslik hr {
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
}

Son olarak da z-index özelliği ile .yazi sınıfını en üstte gösterelim.

.baslik .yazi {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

Yukarıdaki kodların mantığını daha iyi kavramak için aşağıdaki dersleri inceleyebilirsiniz.

Yukarıdaki örneğe ek olarak bir cizgi png bulup <hr></hr> taglarına css ile background olarak ekleyebilirsin. Şuan deneyip kod gönderemiyorum ama daha önce böyle birşeyi yaptığımı hatırlıyorum. Akşam unutmazsam dener gönderirim. 

evet yaptım oldu yanlız çizgi kalınlığını size ile belirleyemiyorum html5 desteklemiyormuş background ile yapmam gerkiyor sanırım teşekkür ederim

Height ile yükseklik verebiliyor olman lazım.

   hr{
            background-color:black;
            height:10px;
            width:100%;
        }

https://www.google.com.tr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=html+hr+style

bu linkten farklı <hr/> tasarımları da bulabilirsin.

evt tamam byu şekilde oldu teşekkürler

 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git