Html ve CSS ayarları ile yuvarlak köşeli yazı çerçeveleri nasıl yapılır

Tarih: 18 Nisan 2009

Bu yazımda önce CSS ve HTML ayarları arasındaki farka kısa bir göz atalım:

CSS ayarları nasıl yapılır

yuvarlak köşeli yazı

Ayrı bir style sayfası veya bölümü vardır. Orada yapılacak çok küçük bir örnek:
#anasayfa{font-size:1.1em; color:#333333; background:#f8f8f8;}
Örnek olsun diye uzatmadım. İşte bu bir CSS örneğidir. Ugulanmasına gelince, söz konusu olan “anasayfa” diye tanımlanan sayfanın html zemininde içeriğin en başına şu gelir: <div id="anasayfa"> içeriğin en sonuna ise </div> getirilir. Böylece o sayfadaki her şey CSS ayarlarında belirtildiği gibi olur.

HTML ile STYLE ayarlaması nasıl yapılır

CSS kullanmadan, sadece “style” uygulanır. Aynen yukardakine benzer kodlar yine sayfanın HTML zemininde içeriğin en başına ve en sonuna getirilir.
Ayarlama yapılacak yerin içeriğinin HTML zemininde (sayfasında) içeriğin en başına HTML kodları olarak style uygulanması için bir örnek:
<div style="font-size:1.1em; color:#333333; background:#f8f8f8;">
içeriğin en sonunda ise değişiklik yok, yine </div> getirilir.

Şimdi, yukardaki iki örneği kıyaslayarak CSS ile ayarlamalar yapmanın pratikliğini anlamış olursunuz. İkinci örnek benzeri uygulamaları sadece özgür ve farklı davranmak istediğiniz yazılara “istediğiniz farklı biçimlendirmeyi yapmak” için başvurabilirsiniz. Meselâ ben son zamanlarda resim kenar süslemeleri için her yazımda ayrı html kodlaması yapıyorum. CSS’te tanımlamış olduğum varsayılan ayarları kullanmıyorum.

Yuvarlak köşeli link çerçevesi yapalım

Arka plan resmi kullanmadan, css ayarlamalarıyla yuvarlak köşeli çerçeve ile yazılarınıza çevre kenarlıkları veya sınır yapabilirsiniz. CSS dilinde kenarlıklara border denir.

Web köşeli çerçeve

Internet explorer “sağda gördüğünüz örnekte” az da olsa hatalı gösteriyor ama yan menülerde kullanınca tamamen hatasız oluyor.

Aslında köşeler gerçekten yuvarlak değildir; bir tür göz aldanması. Ayrıca bu vereceğim kodlarla linkli yazılar çerçeveli yapılıyor. Meselâ blogunuzdaki yan menüler için düşünebilirsiniz.
Sağda bir örnek görüyorsunuz. Kodlarını aşağıya yazıyorum.

Stil sayfanızda olacak kodlar:
.yuv ul{width:230px; list-style-type:none; margin:0 auto; padding:0;}
.yuv li a{display:block; position:relative; border-width:1px 0; border-color:#ccc; border-style:solid; color:#555; text-decoration:none; margin:4px 1px;}
.yuv li a span {display:block; position:relative; margin:0 -1px; border-width:0 1px; border-color:#ccc; border-style:solid; background-color:#eee; padding:2px 6px;}
.yuv li a:hover{border-color:#aaa; color:#333;}
.yuv li a:hover span {border-color:#aaa; background-color:#ddd;}

En baştaki .yuv bu kodların HTML sayfalarındaki sınır kodlarının adıdır. Değişiklik yapabilirsiniz. Genişliği filan da değiştirebilirsiniz.

Ve HTML sayfalarına koyulacak şekli..
<div class="yuv"><ul><li>
<a href="#"><span>Ana Sayfa</span></a>
<a href="#"><span>Arşivler Sayfası</span></a>
<a href="#"><span>Filan konu linki</span></a>
<a href="#"><span>Falan link</span></a>
</li></ul></div>

http ile başlayan URL’lerin yerine (kolay örnek gösterim olsun diye) # işaretleri koydum. Burada span tagları nereye geliyor, nerede ne var dikkat edin. Bir de eğer yan menülerde değil bunun gibi sayfalarda linkler için kullanacaksanız linkleri alt alta yazmayın yan yana boşluk bırakmadan yazın yoksa satır araları çok fazla mesafeli olur.

Güncelleme: 12 Aralık 2009 Cumartesi
Yukardaki Bilgileri paralel olarak, yazılara oval köşeli kenarlıklar yapmak için takip ettiğim bloglardan birinde “bugün” güzel örnekler verilmiş.
İlgilenenler bakabilir: » CSS3:Oval Köşe Kullanımı

Etiketler: |

Kayıp Dosya Eki

Açıklamalar:
1- Okuduğunuz yazı hakkında sorunuzu veya yorumunuzu aşağıya yazabilirsiniz.
2- Yazılarımı RSS ile takip edebilirsiniz.

Yukardaki yazı ile ilgili ek bilgiler ve yorumlar:

  1. trksh diyor ki:

    İlk paragrafta anlattığın kodlarla daha iyi bir şey olacağına inanıyorum. Ama 5 ay sonra kodları bulabildin mi bilmem :)

  2. E. Ali diyor ki:

    Bu yazıyı sözde zenginleştirecektim tamamen unutmuşum. şimdi en azından hangi sitede bulunduğunu hatırladım. bir bakayım burada anlatmayı beceremezsem en azından kodların bulunduğu web sayfasının linkini eklerim.

  3. E. Ali diyor ki:

    Yazı güncellenmiştir. Son satırlara bakın.

  4. tolga diyor ki:

    çoklu satır yazılarda styl veya css ile satırlar arasındaki farkı nasıl ayarlarız..
    ***************
    Satır yüksekliğini tanımlamak için “line-height” ibaresi kullanılır.
    Örneğin line-height:28px;
    Veya line-height:1.55em;
    px ile veya em ile, ölçü birimleri kullanılabilir. Ayarlayıp kayıt ederek, birkaç defa rakamlarda değişiklik ile uygun gördüğünüz yüksekliği ayarlarsınız.