[divemaster]

Merhaba,

Siteyi tablosuz kodlamak niyetindeyim, az çok bilgim var ancak bir iki sorunla karşılaştım ki bunlar sitenin tasarımını zorluyor.

Birinci sorunum 2 sütunlu bir web tasarımnda 2 tununun birbirinden bağımsız hareket etmesi. ilk sütuna girilen bilgiler çok olduğunda diğer sütunun da onun uzunluğunca uzatıp kısalmasını nasıl sağlayabilirim?

Diğer bir sorunum ise; div id="orta" kapsayıcılığında 2 adet alt div ( div class="sol" ve div class="sag" ) var. Bu divlere float:left vererek yan yana gösteriyorum. İçerisindeki divlere bilgi girdiğimde IE de sorun yokken Firefox da kapsayıcı div hareket etmiyor ve yazılar havada görünüyor. Kodlar ve ekran görünmü aşağıda:

Bu sorunu nasıl aşabilirim?

KOD:

<div id="orta">

<div class="sol"><img src="http://forum.zoque.net/images/baskentcam.gif" alt="" /><br /><br /><b>10.05.2007</b> Spot tanıtım ile ilgili detayların yer aldığı bu bölümde kurum hakkında kısa bir bilgi yer alacak Spot tanıtım ile ilgili detayların yer aldığı bu bölümde kurum hakkında kısa bir bilgi yer alacak Spot tanıtım ile ilgili detayların <br /><br /> yer aldığı bu bölümde kurum hakkında kısa bir bilgi yer alacak Spot tanıtım ile ilgili detayların yer aldığı bu <br /><br /> bölümde kurum hakkında kısa bir bilgi yer alacak Spot tanıtım ile ilgili detayların yer aldığı bu bölümde kurum hakkında kısa bir bilgi yer alacak </div>

<div class="sag">İçerik alanı </div>

</div>

CSS

#orta {
background: url('../tr/images/arka_orta.gif');
width:762px;
text-align:left;
margin:0 auto;
}

.sol {
float:left;
width:186px;
padding-left:13px;
padding-right:15px;
}

.sag {
float:right;
width:529px;
padding-left:4px;
padding-right:15px;
}

[divemaster]

İkinci sorunu kapsayıcı alana display: table; vererek çözdüm ancak ilk sorun ile ilgili bir çıkış bulamadım. Var mı bir fikri olan?

[arsende]

Merhaba

#orta {
position:relative;
}

ortaya position verelim ve clear kullanımı var. Clear için bir div veya p kullanabilirsiniz örneğin;

<div id="orta">

içerik


<div style="clear:both"></div> veya p
</div>

[divemaster]

Clear kullanımı sütunlu yapıyı satırlı yapıya çeviriyor. Benim öğrenmek istediğim yapı sütunlu yapılarda 2+ sütunun birbiri ile aynı anda hareket etmesi. Bir sütuna bilgi girildiğinde diğer sütun boş olsa bile ilk sütunun değerine göre hareket etmesi. Bunu bazı yerlerde arkaplan resmi koyarak hallediyorum ancak sütunların çevresini border ile düzenlediğimde sorun yaşıyorum.

Görsel olarak belirtmem gerekirse aşağıdaki resim daha iyi özetleyecektir:

[erkan1453]

Ben min-height ile biraz çözmüştüm. Bu kodu Explorer görmüyor sadece fire-fox görüyor.

Ama senin istediğini yapabilen bir kod veya yöntem bende bulamadım. Acaba orda tablo kullanıp mı çözsek. Tabloda Height="100%" yapsak olay tamam. Zaten ben bakıyorum tablosuz tasarım diyoruz ama Google bile tablo kullanıyor.

[divemaster]

Kodu en az 2 tarayıcıda (FF & IE) doğru çalıştırmadan "tasarım yaptım" diyemediğim için her iki tarayıcıya uygun kodlarla çalışmaya özen gösteriyorum. Bu biraz zorluyor ama en güzeli böylesi...

Hele ki div'e geçiş yapıp içine tablo gömmek çok ters geliyor. Bu nedenden işim uzuyor, zorlaşıyor ama sonuçta içime sinen bir yapı ortaya çıkıyor.

ilk sorun için bir çözüm hiçbir yerde yok maalesef. Çok araştırdım ama bulamadım.

[Vincent]

Ikinci sorunu display:table; kullanarak cozmussun zaten, ancak browser uyumsuzluklari bulunan bir ozellik oldugu icin kullanmamani oneririm(block, inline, none icin problem yok gordugun gibi). sorun su sekilde asilabiliyor:

http://www.quirksmode.org/css/clearing.html

Ilk sorunu ise arkaplan resmi kullanarak cozmek mumkun. Kullanilan en yaygin yontem:

http://alistapart.com/articles/fauxcolumns/

Senin gosterdigin resimdeki gibi de yapmak mumkun tabi. Bir ornek ekledim.

Kolay gelsin..

[divemaster]

Evet, alt border'ı resim olarak ekleyip diğer alana right,left ve top border vererek sorun çözüme kavuşuyor.

Verdiğin sayfadaki verilerin aksine display:table özelliğini firefox1,5 - 2, IE 6 7 ve opera 9 da denedim sorunla karşılaşmadım.

ilgilendiğin için teşekkür ederim

[hayvanAdam]

iki div inde boyunu %100 edelim sorunu çözeriz sanırsam. [ ie ve ff tested!]

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

<HTML>
<head>
<style type="text/CSS">
HTML {
width: 100%;
height: 100%;
}
body {
margin: 0px;
font-family: trebuchet ms;
font-size: 11px;
}
#myDivLeft {
float: left;
width: 160px;
height: 100%;
color: #111;
background: #aaa;
}
#myDivRight {
float: left;
margin-left: 10px;
width: 490px;
height: 100%;
color: #222;
background: #ccc;
}
</style>
</head>
<body>
<div id="myDivLeft">
	boyum %100 olacak :]
</div>
<div id="myDivRight">
	boyum %100 olacak :]
</div>
</body>
</HTML>

[divemaster]

Evet haklısın bu şekilde oluyor ama bu kolonları taşıyıcı başka bir div içine aldığımızda IE sorun yaratıyor