Dikey çizgi çizmek web sayfası tasarlarken karşılaşılan zorluklardan biridir. HTML sadece <hr> tagı ile yatay çizgi çizme imkanı sunar; dikey çizgi tagı yoktur. Dikey çizgi çizebilmek için biraz uğraşmak gerekmektedir. Bu yazıda HTML ve CSS kodları yardımıyla dikey çizgi çizebilmek için <div>tagını kullanarak uygulayabileceğiniz iki yöntemden bahsetmek istiyorum.
1. <div> tagının "border" özelliğini kullanmak
Yan yana dizilen divlerden bir tanesine kenarlık eklenerek dikey çizgi elde edebilir. Bununla ilgili örnek kodlama:
<div id="taban" style= border: solid 2px #cccccc; width:452px; height:auto; float:left;">
<div id="Soltaraf" style="width:225px; height:auto; border-right: 2px solid #FFFFFF; float:left; background-color: #999;">
Sol Taraf<br />
İcerik 1<br />
İcerik 1<br />
İcerik 1<br />
İcerik 1<br />
İcerik 1<br />
İcerik 1<br />
</div>
<div id="Sagtaraf" style="width:225px; height:auto; float:left; background-color: #CC9;">
Sağ Taraf<br />
İcerik 2<br />
İcerik 2<br />
İcerik 2<br />
İcerik 2<br />
İcerik 2<br />
İcerik 2<br />
</div>
</div>
Burada 3 tane div kullandım. Tüm divleri barındıran "taban" ve onun içeriğini oluşturan "Soltaraf" ile "Sagtaraf" divleri. "Soltaraf" divine border-right: 2px solid #FFFFFF; kodu ile sağdan 2px kalınlığında bir çerçeve elemanı ekledim. Böylece "Soltaraf" ile "Sagtaraf" arasında 2px kalınlığında beyaz bir sınır çizgisi elde ettim. Aynı şey "Sagtaraf" divinin sol çerçevesine uygulayarak da yapılabilir. Bunun içn "Sagtaraf" divinde "style" içine border-left:2px solid #FFFFFF; kodunu eklemek yeterli olacaktır. Bu kodlamanın sonucu aşağıdaki gibidir:
2.Ayrıca bir <div> tagı koyarak sınır çizgisi olşturmak
Tasarladığınız web sayfasında <div> tagını dikey çizgi elde etmek için kullanabilirsiniz.Böyle bir uygulama için örnek kodlama:
<div id="taban" style="background-color: #000; border: 2px solid #FF0; height:140px; width:450px;">
<div id="Soltaraf" style="float:left; height:140px; width:224px; background-color: #CCC;">
Sol Taraf <br />
İçerik 1<br />
İçerik 1 <br />
İçerik 1 <br />
İçerik 1 <br />
İçerik 1 <br />
İçerik 1 <br />
</div>
<div id="Dikeycizgi" style="width:2px; height: 140px; float:left; background-color: #FF0000; "></div>
<div id="Sagtaraf" style="background-color: #0FF; float: right; height: 140px; width: 224px;">
Sağ Taraf <br />
İçerik 2 <br />
İçerik 2 <br />
İçerik 2 <br />
İçerik 2 <br />
İçerik 2 <br />
İçerik 2 <br />
</div>
</div>
Bu seferki sistemde dört eleman bulunmakta. İlk seferdekilere ek olarak "Dikeycizgi" adında bir div elemanı ekledim. Bu eleman "Soltaraf" ile "Sagtaraf" divlerinin ortasında durmakta ve bir sınır çizgisi; "Dikey Çizgi" görevi görmektedir. 2px kalınlığında ve kırmızı renkte ve tam bir sınır çizigisi oluşturabilmesi için diğer divlerle aynı boydadır. Bu kodlamanın sonucu da aşağıdaki gibidir:
Bu ve benzeri kodlamaları yaparken elemanlara ait kenarlık ve çerçeve kalınlıkları, varsa eklenen margin, padding değerleri de hesaba katılmalı, web sayfasını oluşturan bileşenlerin boyutlandırılması ona göre yapılmalıdır.