HTML-CSS Dikey Çizgi Ekle

Web sayfanızda dikey bir çizgi oluşturmak için birkaç nedeniniz olabilir, ancak HTML'nin dikey çizgiler için herhangi bir öğesi yoktur. HTML'de yalnızca yatay bir çizgi için <hr> öğesi bulunmasına rağmen; html'de bir <vr>(vertical line) öğesi bulunmamaktadır ancak yine de HTML'de aşağıda belirtildiği gibi dikey bir çizgi oluşturmanın birden fazla yolu vardır:

Sayfada bir Dikey çizgi çizmek için html'deki div etiketini kullanacağız. Dikey çizgi yapmak için, border-left veya border-right özelliğini kullanın. Div'in height özelliği ile birlikte, istenen uzunlukta bir dikey çizgi çizeceksiniz.

CSS:


.vr {
  border-left: 5px solid #e67e22;
  height: 300px;
}

HTML:


<div class="vr"></div>

ÇIKTI:

Sayfanızdaki dikey çizgiyi ortalamak için:

CSS:


.vr {
  border-left: 5px solid #e67e22;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

HTML:


<div class="vr"></div>

ÇIKTI:

HTML'deki <hr> etiketini dikeyde çizmek için değiştirelim:

CSS:


hr{ 
  
    border:         none;
    border-left:    1px solid black;
    height:         100vh;
    width:          1px;       
}

HTML:


<hr>

ÇIKTI:

Metin arasına dikey çizgiler koymak istiyorsanız ve zaten yan yana float özelliği verilmiş bazı paragraflarınız varsa, bir border-right özelliği ile metni ayıran dikey çizgiler ekleyebilirsiniz.

CSS:


p {
       width: 200px;
       float: left;
       margin:10px;
       padding:10px;
       border-right: 1px solid red;
    }

HTML:


<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

ÇIKTI:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

66

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.