Css İle Yükleniyor Cubuğu Yapmak
Bazı sayfalar arası geçişlerde bazende index sayfalarında görürüz "yükleniyor lütfen bekleyiniz..." diye tabi bu geçiş sayfalarında coğunlukla bir yükleniyor grafiği kullanılıyor gayette güzeller ama bunu grafik kullanmadan yapmak da mümkün ne kadar kullanışlı olur bilemem tabi ama insan aklına gelince yapıyor işte
başlayalım cubuğumuzu yapmaya herzamanki gibi html kodlarımızla başlayalım<div class="ortala">
<p>Yükleniyor Lütfen Bekleyiniz...</p>
<div class="govde">
<marquee direction="right" scrollamount="3" scrolldelay="60"><div align="center">/////////////////////////////////////////////////////////////////////////</div></marquee>
</div>
</div>
<p>Yükleniyor Lütfen Bekleyiniz...</p>
<div class="govde">
<marquee direction="right" scrollamount="3" scrolldelay="60"><div align="center">/////////////////////////////////////////////////////////////////////////</div></marquee>
</div>
</div>
üstteki html kodumuzda adını "ortala" koyduğum ilk div elementi içerisine yazımızı yazdık "ortala" elementini kapatmadan bir div elementi daha kullandık onun adı da "gövde" olsun onun içinede marquee elementi kullandık bldiğiniz gibi marquee içindeki resim, yazı vs. gibi şeyleri sağdan sola, soldan sağa kaymasını sağlayan elementtir ve div elementlerini kapattık. Geçelim css kodumuzu yazmaya
.ortala {
width: 320px;
height: auto;
margin: auto auto;
position: relative;
padding-top: 4cm;
}
width: 320px;
height: auto;
margin: auto auto;
position: relative;
padding-top: 4cm;
}
div elementine verdiğimiz ortala tanımı ilk elementten başlayalım uzunluk ve yükseklik değeri verdik margin ile ortaladık göreceli konumlandırma verdik ve üstten 4 santim ittik geçelim "gövde" kısmına
.govde {
display: block;
width: 320px;
height: 30px;
overflow: hidden;
padding:0;
margin-top: 0.5cm;
position: absolute;
left: 0px;
background: #fff url(bg.png) bottom left no-repeat;
padding: 0 3px 6px 3px;
}
display: block;
width: 320px;
height: 30px;
overflow: hidden;
padding:0;
margin-top: 0.5cm;
position: absolute;
left: 0px;
background: #fff url(bg.png) bottom left no-repeat;
padding: 0 3px 6px 3px;
}
ikinci elementimiz olan "govde" de ise blok görünümü verdik yine uzunluk ve genişlik değeri verdik ve taşmaların gözükmemesi için overflow:hidden kodunu kullandık gövde kutumuzun içindeki padding değerini sıfırladık üstten 0.5 santim boşluk bıraktık ve mutlak konumlandırma ile sola sıfırladık.
Neden böyle bir konumlandırma verdik daha kolay ortalayabilirdik cubuğumuzu fakat marquee elementini "align=center" yada margin ile ortaladığımızda içindeki yazımız yaklışık 5 saniye kadar geçikmeli gözüküyor zaten yapıcağımız bir meta yönlendirme ortalama 3 veya 5 saniye kadar olacağı için bu bizim işimize gelmezdi bu yüzden göreceli ve mutlak konumlandırma kullandık. Evet geçelim diğer kodumuza
.govde marquee {
font-size: 3em;
font-weight: bold;
font-family: Verdana;
font-style: italic;
letter-spacing: -17px;
width: 320px;
height: 30px;
overflow: hidden;
color: #FFF !important;
color: black;
}
font-size: 3em;
font-weight: bold;
font-family: Verdana;
font-style: italic;
letter-spacing: -17px;
width: 320px;
height: 30px;
overflow: hidden;
color: #FFF !important;
color: black;
}
Evet govde içerisindeki marquee elementi için Son kodlarımızı yazıyoruz kalın ve yatık oldukca büyük font boyutu kullanıyoruz /↔/ aralarını 17 piksel yakınlaştırıyoruz yükseklik ve genişlik değeri veriyoruz ve taşmaları gizliyoruz
iki renk kodu görüyorsunuz ie6 için siyah renk ve diğer gelişmiş modern tarayıcılar için beyaz renk görünmesi için ie6 da arka plan resmi gözükmüyor onunla uğraşmadım üşendim açıkcası onun için hemen renk verdim giçiştirdim
evet kodlarımız yazdık bitirdik şimdi nasıl bir şey olduğunu görelim
En son meta yönlendirmesi yapabiliriz content="1 (bir) yazan kısım saniye olarak bekleme süresini belirleyebiliriz bir dizine yada bir web sitesi adresine yönlendirme yapabiliriz
Örnekler
<meta http-equiv="Refresh" content="1;url=http://www.kingthemes.tr.gg/" />
<meta http-equiv="Refresh" content="1;url=/forum/" />
<meta http-equiv="Refresh" content="1;url=/forum/" />
