%100 Genişlik ve %100 Yükseklite Sayfa İskeleti Hazırlama
Gelişen teknolojiyle birlikte ekran boyutları artıyor ve sayfalar daha fazla yer kaplaması için artık tasarımlarda eskiye nazaran daha geniş ekran genişlikleri kullanılıyor. Eskiden sayfalarımızı 800×600 genişlik için 760 piksel genişliğinde tasarlardık. Son zamanlarda 1024×768 (960 px)göre tasarımlar yapılmaktadır. Web tarayıcılarının tüm alanını kullanmak için elastik sayfalar kodlanıyor artık. Bana da genişliği %100 ve yüksekliği %100 lazım oldu. Aradım bulamadım bulduklarımın birleştirip böyle bir sayfa elde ettim. Belki sizede lazım olur diye buraya yazayım dedim.
İki Kolonlu Yapı
İlk olarak başlığı, iki kolonlu içeriği(solda menü, sağda içerik) ve alt kısmı olan bir sayfa iskeleti oluşturalım. Burada sol menü alanının genişliğini sabit tutup sağdaki içerik alanının genişliğini esnek yapacağız. Xhtml kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>%100 Genişlik %100 Yükseklik – İki Kolon</title>
<style type="text/css">
<!--
@import url("style/iki_kolonlu_yuzdeyuz.css");
-->
</style>
</head>
<body>
<div class="kapsul">
<div id="ustAlan"> üst alan
</div>
<div id="solAlan">Menü</div>
<div id="icerikAlani">
Lorem ipsum dolor sit amet, ..., tempor at, sem.
<p>Sed adipiscing, ... in ligula. </p>
</div>
<div class="tampon"></div>
</div>
<div id="altAlan">
<p>Alt Kısım</p>
</div>
</body>
</html>
CSS Kodu
* {
margin: 0;
}
html, body {
height: 100%;
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
}
body{
background:#F78200 url(../images/genel_zr.gif) top left repeat-y;
}
/* usalan tanimlari */
#ustAlan {
height: 6.4em;
background-color:#CCCCCC;
}
/* icerik alani */
.kapsul {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* altAlan yukseklik degeri ile ayn olmali */
}
#solAlan
{
float: left;
clear:both;
width: 15em;
height: 15em;
margin-bottom: 1em;
}
#icerikAlani
{
margin: 0 0 1em 16em;
font:1em Arial, Helvetica, sans-serif;
}
#altAlan, .tampon {
height: 4em; /* .tampon ile altAlan yuksekligi ayni olmali */
}
#altAlan{
text-align:center;
color:#036;
background-color:#cfc;
}
Örnek kodu görmek için tıklayınız.
Burada değinmemiz gereken önemli alanları belirtelim. .kapsul alanındaki tanımlarda 100% yüksekliği yakalamak için yükseklik değerine birden fazla tanımlama yapılmıştır. Buradaki amaç Firefox ve IE için aynı sonucu elde etmektir. Kapsul’ün Alt margin değeri #altAlan değerinin eksi değeri olarak atayarak kapsul alanının altAlan üzerine kaymasını engelliyoruz.
İçerik Alanı(#icerikAlani) genişliğinin esnek olması için bir genişlik tanımı yapmıyoruz ve soldaki alanın sınırlarına girmemek için margin değerini #solAlan içeriği kadar + 1em boşluk veriyoruz.
Alt alanın web tarayıcısının küçültülmesi durumunda veya düşük ekran çözünürlüklerinde içerik alanı üzerine çıkmaması için araya #altAlan yüksekliği kadar .tampon bir katman koyuyoruz. Burada anlamlı(semantik) kod yazma kuralının dışına çıkıyoruz ama bu kadar kusur kadı kızında da olur.:D
Üç Kolonlu Yapı
Şimdide 3 kolonlu olanını yapalım. İki kolonlu ile üç kolonlu arasında pek bir fark yoktur aslında. Sadece .icerikAlani tanımında bir iki değişiklik ve sağ alan eklemesi yapılmıştır. Ayrıca kapsul içine bir sağa dayalı bir zemin resmi daha koyarak sağ kolonun zemini yeşil yapılmıştır. Yapılan değişiklikler kalın olarak işaretlenmiştir.
Xhtml kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>%100 Genişlik %100 Yükseklik – İki Kolon</title>
<style type="text/css">
<!--
@import url("style/iki_kolonlu_yuzdeyuz.css");
-->
</style>
</head>
<body>
<div class="kapsul">
<div id="ustAlan"> üst alan
</div>
<div id="solAlan">Menü</div>
<div id="sagAlan">
<p>Sağ Alan </p></div>
<div id="icerikAlani">
Lorem ipsum dolor sit amet, ... sem.
<p>Sed adipiscing, ... ligula. </p>
</div>
<div class="tampon"></div>
</div>
<div id="altAlan">
<p>Alt Kısım</p>
</div>
</body>
</html>
CSS Kodu
* {
margin: 0;
}
html, body {
height: 100%;
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
}
body{
background:#F78200 url(../images/genel_zr.gif) top left repeat-y;
}
/* usalan tanimlari */
#ustAlan {
height: 6.4em;
background-color:#CCCCCC;
}
/* icerik alani */
.kapsul {
background:url(../images/sag_zr.gif) right top repeat-y;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* altAlan yukseklik degeri ile ayn olmali */
}
#solAlan{
float: left;
clear:both;
width: 15em;
height: 15em;
margin-bottom: 1em;
}
#icerikAlani
{
margin: 0 16em 1em 16em;
font:Arial, Helvetica, sans-serif;
}
#altAlan, .tampon {
height: 4em; /* .tampon ile altAlan yuksekligi ayni olmali */
}
#altAlan{
text-align:center;
color:#036;
background-color:#cfc;
}
/* 3 kolon lu yapi */
#sagAlan
{
float: right;
width: 15em;
}
Örnek kodu görmek için tıklayınız.
Kodlar IE6, IE7 ve FF da denenmiştir.
İyi günler fatih hocam ben tam ekran tasarım yani % olarak yapıyorum fakat sağ sol alt ve üstte boşluklar çıkıyor sebebi nedir çözemedim yardım edersiniz sevinirim. Yardımlarınız için şimdiden teşekkürler . HTML : ( <div class="dene">Content for class "dene" Goes Here</div> ) ve CSS: ( .dene { background-color:#F00; width:100%; height:40px; ) basit bi şekilde böle kenarlarda boşluklar oluya altında üstünde felan.
body veya kapsayıcı elemanın margin ve padding sıfırlamayı deneyiniz.
Çok teşekkür ederim Allah Razı Olsun hocam !
hocam bu örneğinizi bende inceledim. Sol alan ve .içerik çoğalınca footer bölümünün sabit durulduğu görülüyor. ne yapmak gerekiyor. ekteki örneği incelermisiniz. kolay gelsin
file:///C:/wamp/www/CSS/alo.css/index_100_2.htm
Sizin bilgisayarınızdaki dosyayı görme ihtimalim yok. İnternete atmalısınız.
hocam yukardaki numunelik, neyse bende benzeri bir çalışma geliştirdim. farklı tarayıcılarda sorunların üstesinde gelmesi konusunda ihtiyaç listeme konu kaydedili ve çözüldü olarak işaretlendi… konunun arkadaşlara yardımcı olacağı kanatindeyim ekteki linke header genişliği 100% olan bant alanın ve orta band alanıyla özelleşen menü listesi var
100% kapsayan menu
Hocam yapıyorum oluyor gözüküyor.Kaydediyorum, ertesi gün açtığımda başka bir şey olmuş sanki biri karıştırmış gibi farklı birşey çıkıyor. Deli olucam. Yaptığım şey niye sabit kalmıyor anlamadım gitti. Birde verdiğiniz kodları kopyala yapıştır yapınca çalışmıyorlar. tek bir html dosyası olsa css komutlarınıda bunun icine yazsak sadece rnekler icin daha iyi olacak sanki.
Örnekleri açıp sayfayı farklı kaydet deyip örnekleri bilgisayarınıza alıp inceleyebilirsiniz.
bazı kodları hatırlayamadığım zaman sürekli açıp bakıyorum :) linki kaydettim
benim şöyle bir kodum var ama side bar alanım ful olmuyor kodları aşağıya yazıyorum
<code>
<div id="contents"> <!– Contents 1100px –>
<div id="Sidebar">Burada Sidebar alanım var</div><!– Sidebar 280px genişliğinde –>
<div id="content">Burdada yazılar vs</div> <!– content 780px –>
</div>
</code>
yukarıda ki kodda sidebar floatla sola dayalı content te sağa dayalı ama content uzadıkça sidebarda uzasın istiyorum bunu nasıl yapabilirim ?
Resimlede belirteyim …" http://i42.tinypic.com/hvb9f8.jpg "
Bir kaç şekilde çözümü var http://www.fatihhayrioglu.com/css-ile-web-sayfasi… burada ben bir tanesini anlatmıştım
Anladım sanki :) teşekkürler …
Merhabalar,
2. örnekteki html kodlarında <!– olması gereken kodlar sanırım aceleyle <- olmuş, birkaç saat uğraştım :) sonunda gördüm neden olduğunu, diğer arkadaşlar da uğraşmaması açısından değiştirilmesinde fayda olduğunu düşünüyorum :)
Kolay gelsin..
Düzelttim. Uyarı için teşekkürler
merhabalar Fatih Bey
bu kodu bulduguma cok sevindim ben de böyle birsey ariyordum yalniz bir problemim var.ben sayfanin kenarindaki scrollbari kaldirip iki dive scrollbar koymak istiyorum.sol ve icerik div ine.onlara koydugumda overflow ile sayfadaki de oldugundan sagda iki tane oluyor body ninkini overflow hidden ile kaldirdigimda bu sefer sayfada icerigin alt kismi gorunmuyor divde scroll olsa bile alt kismi gostermiyor.Anlatabildinmi bilmiyorum bu konuda yardimci olursaniz cok sevinirim.
Tesekkurler
Tam olarka anladığımı söyliyemem
erhan orda mavi alanın aşağı inmeme nedeni background da bir gif var (genel_zr.gif) bunu da indirirsen görürsün ;) kodda hata 34 de x fazla evt..