Sitenin altını komple kaplayan 3 sütunlu Div örneği

10-07-2009, 18:30:09

Merhabalar yaptığım bir tasarım için (table ile yapılmış) sitenin en altına yapışı olarak 3 sütunlu bir div bloğuna ihtiyacım var bu konuda yardımcı olabilecek arkadaş varmı acaba?

Not: İstediğim olay sitenin en altında tasarımın arkasında kalacak yani zemini çimenlerle dolduracağım sanki siten çimenlerin üstüne yapılmış gibi

10-07-2009, 23:47:29

#2

~~onlinerapmuzo~~

Üyeliği durduruldu

ekleyin mail adresımı halledelım bırader...

14-07-2009, 10:39:07

#3

akbalci

@onlinerapmuzo yapamadı yapabilecek arkadaş varmı?

14-07-2009, 15:45:05

#4

alchalade

bitane Örnek GÖsterebilirsin yardımcı olabilirim.
Edit:
Untitled Document
İstediğin böle bişey sanırım tarayıcıyı küçültüp incelersen alt div her pixelde sayfanın tamamını kapsamakta.

15-07-2009, 00:13:46

#5

akbalci

Aslında şurdaki örnek tam istediğim olay fakat

* {
margin: 0;
}

kodunu koyunca tüm site sapıtıyor :=)

15-07-2009, 08:56:27

#6

Kocaportal

Arkadaşım olayı biraz daha iyi anlatmak için paintte falan çizersen veya en azından table şeklinde yapıp gönderebilirsen, div'e çevirerek yardımcı olmaya çalışırım

15-07-2009, 10:26:52

#7

~~CheLeKeSh~~

Üyeliği durduruldu

Arkadaşın İstediği Olay ŞU

Buyur Bu Kodu kolon.css adında Kaydet

* {
    margin: 0;
}
html, body {
    height: 100%;
}

body{
    background:#F78200 url(../images/genel_zr.gif) top left repeat-y;
    font-size:62.5%;
    font-family:Arial, Helvetica, sans-serif;
}

/* usalan tanimlari */
#ustAlan {
    height: 6.4em;
    background-color:#CCCCCC;
}

/* icerik alani */
.kapsul {
    min-height: 100%;
    background:url(../images/sag_zr.gif) right top repeat-y;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em; /* altAlan yukseklik degeri ile ayni olmali */
}

#solAlan
{
    float: left;
    clear:both;
    width: 15em;
    height: 15em;
    margin-bottom: 1em;
}

#icerikAlani
{
    margin: 0 16em 1em 16em;
    font:1em Arial, Helvetica, sans-serif;
}

#icerikAlani:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#icerikAlani {
    display: inline-block;
}

* html #icerikAlani {
    height: 1%;
}

#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;
}

Buda HTML Sayfan

Artık Edit Sana Kalmış

<!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 - Üç Kolon</title>
<style type="text/css">
<!--
@import url("kolon.css");
-->
</style>
</head>

<body>
<div class="kapsul">
  <div id="ustAlan"> üst alan
</div>
  <!-- ustAlan son -->
<div id="solAlan">Sol Menü </div>
<div id="sagAlan">
  <p>Sağ Alan </p>
  </div>
<div id="icerikAlani">
Orta Yazılar CheLeKeSh
</div>
<div class="tampon"></div>
</div>
<div id="altAlan">
  <p>Alt Alan </p>
  </div>
</body>
</html>