CSS ile
Stil Vermek
CSS ile birlikte kodlama yaparken bir çok yerde <hr/> etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine <hr /> etiketini kullanabiliriz. <hr / > daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.
<hr> elementinin kullanımı da kolaydır. <hr> elementinin tek sorunu farklı web tarayıcılarında farklı algılanmasıdır burada biz hepsine aynı göstermeye çalışacağız. Aşağıdaki kodlar IE5+, Opera5+ ve FF1.0+ test edilmiştir.
<hr> Elementi hangi özellikleri destekliyor
- width ve height değerini tüm web tarayıcıları destekliyor.
- border özelliği Explorer ve Firefox destekliyor. Opera desteklemiyor.
- IE color özelliğini destekliyor.
- Firefox ve Opera background-color özelliğini destekliyor.
- Tüm tarayıcılar background-image özelliğini destekliyor ancak Explorer ve Opera’da bazı sorunları var.
hr {
border: 0;
width: 80%;
}
Bu kodlama IE ve Opera’da düzgün görünecektir. Ancak Firefox’ta görünmeyecektir. background-color ekleyerek kodumuzu Firefox’a da uygun hala getiriyoruz.
hr {
color: #f00;
background-color: #f00;
height: 5px;
}
<hr / > elementine stil ataması yaparken color ve background-color özelliklerin her ikisini de kullanmalıyız. Yüksekliği 3px’in altındaki değerler için Opera’nın eski sürümleri sorun çıkarıyor.
<hr /> hizalama
<hr /> etiketini hizalamada IE için text-align özelliği, Firefox ve Opera için margin özelliği kullanılır.
hr {
text-align: right; /* ie icin */
margin-right: 0; /* diger brovserlar icin */
}
<hr/> resim kullanmak
Web sitelerinde bölümleri ayırmak için basit resimler kullanırız. Bu amaçla <hr /> elementini kullanabiliriz. Bu işlem için background-image özelliğini kullanmalıyız. Tabi bir kaç sorunumuz çıkacaktır farklı web tarayıcılarda. Firefox gayet güzel çalışırken IE6- ve Opera’nın eski sürümlerinde sorun çıkarır. resmin etrafında kenarlık çıkarır. bunu engellemek için aşağıdaki şekilde kodlamamızı yapmalıyız.
<div class="hr"><hr /></div>
ve CSS kodu
div.hr {
background: #fff url(/images/ayrac_zr.gif) no-repeat scroll center;
height:28px;
width:180px;
}
div.hr hr {
display: none;
}
Tüm web tarayıcılarında sorunsuz çalışacaktır. Yukarıdaki kodda <hr /> etiketi bir <div> içine alarak css ile <hr /> etiketi görünmez yapılarak esnek bir çözüm sağlanmıştır. Fazladan bir katman eklemek standartlara uygun kodlama için istenmeyen bir durum olsa da kodlama esnekliği ve tüm web tarayıcılarında aynı sonucu vermesi nedeni ile kullanılabilir bir kodlamadır.
Burada bir iki ufak sorun var. Birincisi uygulanan zemin resmi çıktı alırken görünmemesidir. Bunun için yazcı için CSS kodlarken bu özelliği es geçmeliyiz. İkincisi <hr> elementine margin ve/veya padding tanımı yaptığımızda bazı web tarayıcılarında kaymalara neden oluyor, bu sorunu çözmek için margin ve/veya padding değerini <div> vermeliyiz.
teşekkürler işime yaradı.
Tobin arkadaş bu aracizgi koymak için nasıl bir komut koyucak hr için oluyordu da…
benim sürekli kullandığım ,
.aracizgi {
border-bottom: 1px dashed #999999;
}
kesi kesik çizgiler ile gerçekten siteyi daha da hoş kılıyor
Blokları ayırmak için kullanışlı oluyor, fakat bahsedilen sıkıntılar neden yaygın olarak tercih edilmediğinin sebebi de aynı zamanda sanırım…
bilmediğimiz o kadar .ok şey var ki ufkumuzu açtığınız için teşekkürler …
Yeni standartlar güzel, ancak uygulamaya geçmesi bayağı zaman alacaktır.
Merak etmeyin HR etiketinin ömrü fazla olmayacak. HTML 5 ile bu sorunlu etiketten vazgeçilip yerine “SEPARATOR” isimli yeni etiket koymayı düşünüyorlar.
Zaten “separator” daha semantik.
Aslında bende pek hr kullanmadım şimdiye kadar ama bazen gerçekten gerektiği yerler oluyor. İhtiyacını duyuyorsun.
Kodlama yaparken bazı yerlerde gayet kullanışlı bir hal aliyor.
Valla korktum bu hr den. Her tarayıcı kafasına göre belirlemiş bu hr nin özelliklerini.
bu kadar sorunlu bir elementi kullanmamak daha iyi :)