CSS İLE WEB SAYFASI OLUŞTURMA II
Elastik Web Sayfaları Oluşturma
Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.
Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.
Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.
Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.
Çoğu web tarayıcısınnda normal font boyutu 16px’dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:
body{
text-align:center;
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
}
#sayfa{
width:72em;
margin:0 auto;
text-align:left;
}
#ustAlan
{
width:72em;
}
#anaMenu
{
float: left;
width: 18em;
}
#KapsayiciAlan
{
float: right;
width: 52em;
}
#icerik
{
float: left;
width: 32em;
}
#BannerAlani{
float: right;
width: 20em;
}
#altAlan
{
width:72em;
clear: both;
}
Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.
Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) – Metin Boyutu(Text Size) Opera için View – Zoom seçeneklerini kullanarak farkı görebilriz.
Teşekkürler Fatih Bey.Eşsiz bilgileri bizimle paylaştığınız için…
merhabalar fatih hocam, ben sabit genişlikli divler yapabiliyorum ama broser pencresini kücülttüğümde otomatik daralanb tablodaki % gibi hareket eden içerik yapamıyorum.
burda main kısmının 750pxde kalmasını istiyorum browser pencresi kücültükçe kücülsün istiyorum. width verince ufalmıyor kaydırma çubuğu çıkıyor. yardımcı olursanız sevinirim. sorunumun genişlikle yükseklikle değil. şimdiden teşekkürler.
<div id="container">
<div id="main">
<h1> içeriğimiz buraya gelecek</h1>
</div>
<div id="rightmenus">rrr rr
rrr
rrr
rrr
</div>
#container {
position: relative;
margin: 0 auto;
width: 970px;
text-align: left;
margin: 10px auto;
}
div#main
{
width:750px;
background-color:#FFFFFF;
margin-right:10px;
float:left;
}
#rightmenus
{
width:200px;
float:left;
float:right;
}
genişlik değerlerini yüzde cinsinden verip min-width değerini de 750px verirseniz oalcaktır
[...] kullanırız. Em ve elastik sayfalar hakkında daha ayrılı bilgi için CSS Birimleri ve CSS İLE WEB SAYFASI OLUŞTURMA II makalelerine göz [...]
[...] önce likit bir sayfanın nasıl yapılacağını bahsetmiştik. İsterseniz yine de bir göz atın Yukarıdaki ekranda da görüldüğü gibi orta kısıma birden fazla zemin rengi uygulamamız [...]
Bu siteyi hazırlayanlara çok teşekkürler.Ben CSS de daha çok yeniyim.ASP ile web tasarlıyorum.3 kolonlu CSS sayfası ile ana sayfa yapmak istiyorum sol tarafa ASP ile yaptığım menuyu koyup menüden seçince linkin orta bölümde gösterilmesini nasıl sağlayabilirim. Şimdiden teşekkürler.
slm ben şuan bu dersleri görüyorum ve gerçekten bu bilgiler çok yararlı verdiğiniz bilgilerden dolayı teşekkür ederim
teşekkürler de birde yapılmıs halini gösteren örnek olsa daha bi iştah acıcı olurdu…tekrar teşekkürler.
voice-family: “\”}\”";
css kodu. Burdaki amacı ise ie5 nin burdan sonraki kısmı görmesini engellemek
html>body #icerik
kısmıda opera 5 de görünmesi için seçilmiş bir koddur.
ie 7 çocuk seçicileri destekliyor
http://www.fatihhayrioglu.com/?p=198
öncelikle belirtmeliyim ki, siz o kadar zahmet edeceksiniz, ahım şahım güzel güzel notlar hazırlayacaksınız, bi de notların altında yorum yazıp soru soranlara cevap vereceksiniz. ALLAH sizden razı olsun. şimdilik yok ama yeterli seviyeye geldiğimde kendime bir sizinki gibi blog tarzı site açmayı düşünüyorum o zaman sizin sayfanızın banner ini vs sayfama koyarak size destek olmak isterim.
neyse sorularıma geçeyim :)
soru1:
yukarıda geçen;
voice-family: “\”}\””; yapısını biraz açarmısınız.
bu bir regular expression mu, yoksa farklı bir şey mi.
soru2:
html>body #icerik çocuk seçicisi sadece html etiketinin body alt elementinin içerisindeki #icerik alanına etki ediyor değil mi?
bir de bu çocuk seçicileri ie7 destekliyormu? http://googlesystem.blogspot.com/2006/04/test-internet-explorer-7-without.html
burada anlatıldığı şekilde ie7 kurdum. ie7 nin destekliyor dediği bazı şeyleri desteklemiyor gibi geldi bana.
tekrar çok çok teşekkürler.
düzeltmelrin(hack) amacı zaten web tarayıcılarında sorun çıkan yerlede bu bölümü web tarayıcısından gizlemek bu nedenle dw firefox ve netscape deki bilgiyi vermiştir