Klasik problem: CSS, Height problemi...

**Komplo** · 17.08.2006 15:00

İyi günler.
4–5 gündür CSS öğrenmeye çalışıyorum ve tablolu yapılardan kurtulmak için... Ekte takıldığım noktaları göstermeye çalıştım.
1.si, sol menü ve içerik (sağ taraf) aynı yükseklikte olmadığı için havada kalıyor ve aşağı tarafta beraber sonlanmıyorlar… “height: 100%” , "display:block" "float:left" (sol ve sağ kolonlar için) buna benzer yollar denedim ancak muaffak olamadım.

2.si footer bölümü için sol ve sağ menünün bitimine #footer{clear:both} yaptığımda kolonların altındaki alan kadar bir genişliğe sahip oluyor. Ben bunun yerine en altta tamamını kapsamasını istiyorum. Ancak footer için yerleştirdiğim div’in altında 5-10 px’lik bir boşluk oluşuyor. Buralardaki hatam konusunda bir fikri olan?

Sitenin CSS kodları ekin içerisinde. Cevaplar için şimdiden teşekkürler…

(Aramalarımda Ceyhun Aksan'ın benim sorunuma yakın bir çözümü var. Yaptığı çözümü uyguladım. Ancak yine olmadı...)

Kod:

* {
  margin: 0;
  padding: 0;
}

body{
background:url(images/bg2.jpg) repeat-x;
background-color:#e4e4e4;
min-width:780px;
margin:0;
padding:0;
text-align:center;
}

#wrapper{
width: 760px; 
margin: 20px auto 0px auto;
padding: 0px;
text-align: left; 
background-color:transparent;
display:block;
}
#logo{
height: 238px;
padding: 0px;
margin: 0px;
background-color:#fffffd;
}
#solmenu{
background-color:#ffffff;
width:230px;
float:left;
margin: 3px 0px 0px 0px;
padding: 10px 10px;
display:block;
clear:left;
}
.is{
vertical-align:text-bottom;
text-align:center;
}
#content{
padding: 20px 20px;
width: 470px;
float:left;
margin:3px 0px 0px 0px;
background-color:#f5f5f5;
display: block;
clear: none;
}
#footer{
clear:both;
}

#alt{
padding:0px;
margin:0px;
background-color:#cccccc;
height: 40px;

}

**cgencer** · 17.08.2006 15:16

CSS'in belki de en sinir yaklaşımı, container'ları içeriğe eş boyutta tutması. bu height problemi için CSS camialarında çeşitli farklı yaklaşımlar var;
- JavaScript ile tüm height'leri en büyük olanına eşitlemek
- görsel hileyle eşitlenmiş gibi göstermek; yani zemine 3 kolonu belirginleştiren bir imajı yukardan aşağıya uzatarak en yüksek div'in yüksekliğinde göstermek
- daha 'kirli' ibr çözüm de eşitlenecek her div'in içine 1 piksel grafiği uzatarak koymak. böylece tam desteklenmeyen min-height vari bir sistem kullanmış olursun. ama bu dediğim gibi, kirli ve tercih de edilmeyen bir yöntem.

**Lautreamont** · 17.08.2006 18:18

kolonlarla ilgili sorunun çok genel. konuyla ilgili yazilmis en iyi makale alistapart'ta. http://alistapart.com/articles/fauxcolumns/

ama senin sorununu çok daha basit bir sekilde çözebilirsin.

Kod:

#wrapper{
width: 760px; 
margin: 20px auto 0px auto;
padding: 0px;
text-align: left; 
background-color:#fff;
display:block;
}

background-color'a beyaz renk verince sorun halloluyor.

ikinci problemine gelince. öncelikle footer alanında yazan yazı footer div'i içerisinde durmuyor. o zaman oradaki div'in tanımlayıcı bir özelliği kalmıyor. (float sorununu halletmek için <div class="clear"> gibi bir sey koyabilirsin.
altta kalan boşluk h1'in paddingi yüzünden. şöyle yaparsan sorun kalmaz.

Kod:

}
#alt h1{
width:100%;
font-family:"Trebuchet MS", sans-serif, Tahoma;
font-size:10px;
font-weight:bolder;
padding:15px 0 0 0;
margin:0;
}

iyi çalışmalar.

**Komplo** · 17.08.2006 19:50

Cevaplar için teşekkürler. Dediğiniz yollardan problemi hallettim. İyi çalışmalar...

**cgencer** · 18.08.2006 04:15

ilgilenenlere
http://www.paulbellows.com/getsmart/balance_columns/
adresinde ilgili js kolon boyu eşleyici script'i bulunmaktadır.

**sahip** · 18.08.2006 09:52

gelmiş geçmiş en iyi çözümü Alessandro Fulciniti bulmuştur

diyeyim ...

http://www.html.it/articoli/niftycube/nifty7.html

http://www.html.it/articoli/niftycube/nifty8.html

gibi örnekleri var.

Konu Başlığı: Klasik problem: CSS, Height problemi...

Konuyu Paylaş

Seçenekler

Klasik problem: CSS, Height problemi...

Re: Klasik problem: CSS, Height problemi...

Re: Klasik problem: CSS, Height problemi...

Re: Klasik problem: CSS, Height problemi...

Re: Klasik problem: CSS, Height problemi...

Re: Klasik problem: CSS, Height problemi...

Bu konu başlığı için etiketler

Mesaj Seçenekleri