div, yükseklik, position

[exsors]

Position kullandığım divlerde dıştaki divin içteki divin yüksekliği değişse de onu kapsamasını sağlayamıyorum. Position kullanmadığım zaman herşey düzgün.

Bunun sebebi nedir sizce? Bir çözümü varmı?


1.

.dis{
width:100px;
background-color:#ffffff;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
.ic{
width:50px;
height:1 00px;
background-color:#333333;
}

2.

.dis{
position:relative;
width:100px;
background-color:#ffffff;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
.ic{
position:absolute;
left:0;
top:0;
width:50px;
height:100px;
background-color:#333333;
}

[mberker]

position absolute kullandığınız zaman divin içte veya dışta olmasının önemi yok. sayfanın normal akışından ayrılıp sizin koyduğunuz yerde durur. diğer sayfa elemenları o yokmuş gibi sayfa içindeki akışlarına devam ederler

[mberker]

çok dikkatli okumadan cevap vermişim. özür dilerim .

içteki divin yüksekliğini 100px olarak vermişsiniz. dıştaki divin'de yüksekliğini 100px olarak verirseniz kpasayacaktır.

[exsors]

Tamam da ben bunu başka bir yerde kullanacağım, ve içteki divin yüksekliği belli olmayacak. Örnek olsun diye herhangi bir değer verdim.

Yani bana gereken, position kullananıp aynı zamanda dıştaki divin içtekiyle birlikte uzayıp kısalması.

[anova]

width ve height değerlerini % olarak belirtmeyi denemiş miydin?
eğer absolute konumlanmasını bile içinde bulunduğu div e göre yapıyorsa (ki yapıyor) mantıken bunu da o şekilde yapabilmesi gerek.

[exsors]

Evet denedim. Yazı eklediğimde dıştaki div uzamıyor sadece içteki uzuyor.

Dıştakini uzattığımda içteki onunla birlikte uzuyor ama ihtiyacım olan içteki uzadıkça dıştakinin de uzaması..

[mberker]

ikinci divi position:relative yapmak zorunu çözüyor gibi

deneme yanılma

[Vincent]

bir elementi dıştaki başka bir elemente göre konumlandırmanın birkac yolu var. örneğın "ic" classına sahip divin "dis"a göre soldan 20 px boşluk bırakmasını istiyoruz. bunu yapmak icin margin-left:20px de yazabilirsiniz, absolute konumlandırma ile left:20px de yapabilirsiniz, hatta relative kullanarak da yapılabilir.

"peki neden aynı şeyı yapmak için 3 farklı kod var?" derseniz, bunlar aslında aynı şeyi yapmıyor diyebiliriz. denerseniz hepsinin farklı sonuclar doğuracağını göreceksiniz. eğer bir döküman akışı saglamak istiyorsanız, mesela bu divin altına bir div (footer) gelecekse, o zaman margin kullanarak dizmek daha mantıklı, çünkü yükseklik degiştikçe alttaki div de ona göre yer değiştirecek.

Absolute posisyonlamanın da kullanım yerleri var tabi, nerede hangi yöntemi kullanacağınız gereksinime bağlı. Bana kalırsa distaki divin uzamaması normal, çünkü mberker'in dediği gibi absolute posizyonlamada o elementi normal sayfa akışının dışına çıkarıyoruz.

[ismailakyldz]

position top vs hakkında bilgileri burda bulabilirsin
Burdan

[UuuR]

auto veremiyormusun height ı?