Webmaster

Eğer sayfa tasarımının sabit bir değerde değil de kullanıcının ekran çözünürlüğü ve tarayıcı penceresinin genişliğine göre otomatik olarak boyutlandırılmasını sağlamak istiyorsanız; elastik tasarımlar (Liquid layout) kullanmalısınız.

Hizalama teknikleri açısından herhangi bir fark içermeyen bu sayfalarda yapmanız gereken tek şey birimleri piksel yerine yüzde (%) olarak belirtmeniz gerektiğidir. Bu bakımdan "#sayfa" için "width" değerini 760 piksel yerine "95" olarak birimi de "%" girerseniz sayfa genişliği elastik olarak genişleyecektir. Tabi "#ustAlan", "#anaMenu", "#icerik" ve "#altAlan" için de "width" değerlerini "%" cinsinden girmeniz gerekmektedir.



Burada genişlikleri birbirine göre oranlamanız da mümkün tabiî ki. Örneğin "#anaMenu" için "%25", "#icerik" için ise "%75" olarak girmelisiniz



Elastik sayfanın tarayıcıdaki görünümü


Birimleri "%" olarak kullanırken CSS kutu modelinin halen devrede olduğunu ve verdiğiniz bu "width" değerlerinin sadece içerik alanının genişliğini belirttiğini unutmamalısınız. Örnek sayfanın resmine bakarsanız "altAlan" IV'inin diğer DIV'lerden daha geniş olduğunu göreceksiniz. Bu durum "altAlan" için önceden tanımladığımız 10 piksellik "padding" değerinden kaynaklanmaktadır. Bu tür uygulamalarda "padding", "margin" ve/veya "border" değerlerini göz önünde bulundurarak "%" değerleri girmekte fayda vardır.

Kaynak : dw.gen.tr