CSS sayfa tasarımında height=100% sorunu

**isildur** · 17.05.2007 18:59

Merhabalar,

Tablo yapısında olan bir sitem var ve bunu hem CSS öğreneyim hem de siteyi değiştireyim diyerekten değiştirmeye başladım ama bir türlü istediğim şeyi başaramadım.

İstediğim şey ne diye sorarsanız, hemen anlatayım :

Üstten aşağıya doğru sırası ile ustdiv, logodiv, menudiv, icerikdiv ve altdiv olacak şekilde kutularım var ve bunların hepsi alt alta dizilmeli. Bu kutulardan icerikdiv hariç hepsi sabit yükseklikte. icerikdiv ise tarayıcının boyutuna göre sayfayı doldurmalı. Nette aradım taradım, okuduklarımı uyguladım ama bir yerlerde hata yapıyorum sanırım. Kodlar yanımda olsa sizlerle paylaşacağım ama maalesef iş yerinde kaldı.

Eğer bu anlattıklarıma göre bir yardımı dokunacak olursa benim bu gece rahat uyumamı sağlayacak

Şimdiden teşekkürler.

isildur - tablolardan sıkılıp CSS'ye saran insan

**erkan1453** · 19.05.2007 01:54

Anladığım kadarı ile sana bir tavsiyede bulunacağım.
Height: 500px yaptığında sayfan 500px veya içeriğe göre uzayacakır. Yani o div içinde ne kadar uzun resim veya bilgi varsa senin içerik bölümün o kadar uzun olur. Ama sen Firefox kullanıyorsan bu böyle olmaz yani içerik kısmın 500px olur ve uzadığında da uzamaz aynı kalır. Ben bunu Explorer ve Firefox ile siteyi açtığımda görüyorum. Çözüm olarak da min-height:480px; bunu kullanıyorum. Bu kodu Explorer görmüyor ve sayfam Firefox ile de 500px den uzun olduğunda uzuyor ama 480 den aşağı inmiyor. Herneyse anlatmak zor sen bunu dene min-height:480px; çözeceksin örnek kodları ve hangi browserde bu sorun ile karşılaştığını yazarsan daha rahat yardımcı olabilirim.

**s5prin** · 19.05.2007 02:06

Anladığım kadarı ile sana bir tavsiyede bulunacağım.

@isildur: div'lerin maalesef öyle bir eksiği var. "position:relative" değerini verirsen sanırım problemin çözülüyor.

HTML Kodu:

<div style="position:relative; height:100px; background-color:#CC0000">header</div>
<div style="position:relative; height:500px; background-color:#00CCFF">içerik</div>

**hayvanAdam** · 22.05.2007 10:04

kaç gündür yazıcam yazamadım, aktif ettiler hesabı sonunda :]

Kod:

<HTML>
<head>
<style type="text/CSS">
HTML {
width: 100%;
height: 100%;
}
body {
margin: 0px;
}
#myDiv {
margin: 0px auto;
width: 760px;
height: 100%;
color: #222;
background: #ccc;
}
</style>
</head>
<body>
<div id="myDiv">
	boyum %100 olacak :]
</div>
</body>
</HTML>

bu işini görür sanırsam ama tablo kullanman tavsiyedir bu şekildeki tasarımlarda.
bi kaç güne js ile destekli 1, 2 navigasyon örneği eklerim buraya.

http://www.bibbox.org/boyVer.html

**isildur** · 23.05.2007 08:57

Arkadaşlar çok teşekkür ederim, araya başka işler girdiği için henüz bakamadım ama en kısa zamanda deneyip sonuçları sizlerle paylaşacağım.

Kolay gelsin.

Sevgi ve saygılarımla.

**hasan** · 23.05.2007 19:04

Bir de doc type ını kontrol et.

**BuGSuR** · 23.05.2007 19:36

isildur tarafından gönderilen mesaj:

...icerikdiv ise tarayıcının boyutuna göre sayfayı doldurmalı...

Yukarda anlatılanlar, değişken içeriğe göre "div" uzunluğunu kontrol edecektir. Ancak istenilen tarayıcının boyutuna göre değişecek "div" uzunluğu ise, bunu JavaScript ile çözebilirsiniz.

İçeriğe göre değişen div uzunluğu için, yukarda anlatılanlara ilave olarak;

CSS'de height yerine min-height girin Firefox tanısın,



arasına height girin IE de tanısın.

IE için ek bilgi > http://www.quirksmode.org/css/condcom.html

**zapotka** · 18.07.2007 01:36

Benzer bir sorunda ben yaşıyorum, Firefox'da divler istediğim gibi sabit yükselikte gözükürken (116px), internet Explorer'da içeriğe göre yükseklik veriyor ve görüntü bozuluyor. Max-Height komutu da işe yaramıyor. IE6 için bu divleri sabit yüksekliğe nasıl atayabilirim.

Çalıştığım sayfa:
http://www.sineoyun.com/sinesite/1/portal/

**cansurmeli** · 18.07.2007 09:15

Benim sana daha farklı bir tavsiyem olacak.CSS ile uğraşıyorum diyosan Adobe GoLive'ı tavsiye ederim.30 günlük deneme sürümünü kullanarak yazılımı inceleyebilirsin.

Yazılımı basitçe anlatmak gerekirse şöyle: Sen divleri görsel olarak kontrol ediyorsun.Sağa-sola, yukarı-aşağı kaydırabiliyorsun.Sen görsel olarak yönetirken CSS kodları da "Source" kısmında oluşuyor.İstersen "source" kısmından da divlere özellik ekleyebiliyorsun.

Görsel olarak kontrol edildiğinden böyle sorunları daha az yaşarsın.

Bu arada bu yazılım ile Wordpress temaları bile geliştirebilirsin.

**Vincent** · 18.07.2007 20:20

Icerik verilen yukseklikten fazla yer kapliyorsa Firefox ve IE farkli davraniyor. Tasma durumu overflow ozelligi ile belirlenebiliyor. overflow:hidden; yazarsaniz problem cozulur ve 116px in disinda kalan kisim gorunmez olur. diger overflow kosullarını (scroll, visible ..) da deneyebilirsiniz ama duruma en uygunu hidden gibi gorunuyor.

Konu Başlığı: CSS sayfa tasarımında height=100% sorunu

Konuyu Paylaş

Seçenekler

CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

Re: CSS sayfa tasarımında height=100% sorunu

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

Mesaj Seçenekleri