Forum
Aktif konular
Üyeler
Kurallar
Arama
Div'in Absolute Sorunu Div'in Absolute Sorunu
-
Bir tane div'i ikiye bölmem gerekiyordu.Bende;
<div class="orta">
<div class="sag">
sağdaki yazılar
</div><div class="sol">
soldaki yazılar
</div>
</div>şeklinde yaptım.Orta ve sol relative yaptım, sağdakini absolute.FAkat inherit, static hepsini denedim yok.Benim bildiğim relative olduğu zaman absolute değerinin kaymaması gerekirdi.Fakat resimdeki gibi aşşağıda yazan hehe sayfa sonu.O çizginin dışına taşmaması gerek.
css kodları;
div.orta {position:relative;}
div.sol {position:inherit;top:0;left:0;margin-left:0;width:21%;padding:10px 5px 5px 5px;border-right:1px solid #b5bfd0;border-right:1px solid #c9cfd9;}
div.sag {position:absolute;top:0;right:0;margin-right:0;width:76%;padding:10px 5px 5px 5px;}
-
Min-Height değeri ver gerisi yazıya göre büyüsün. Soldakini büyüttüğün zaman dışarı taşan da düzeliyor değil mi? Yani en soldakini büyüt o da düzelir gibime geliyor.
-
Caliber bunu yazdı:
-----------------------------
Min-Height değeri ver gerisi yazıya göre büyüsün. Soldakini büyüttüğün zaman dışarı taşan da düzeliyor değil mi? Yani en soldakini büyüt o da düzelir gibime geliyor.
-----------------------------evet hocam.Soldaki relative (yada ihnerit fark etmiyor) olduğunda yazılar büyüdümü tamam, fkat orta kısma uzun uzun içerikler gelicek.O yüzden solu büyütmem zor.Belki solu absolute, sağı relative yapabilriim ama bi çözümü vardır ona bakıyrum
-
table kullanmayı dene. Ayrıca css kullanmak sorun çıkarır sana. Tableları css den yapmak yerine html olarak table ata oradan doldur. İçeriğinin renklendirmesini filan yine css den yaparsın. İki üç hücreye böl sayfayı kafana göre ebat ver.
-
<div class="orta">
<div class="sol">sol yazılar</div>
<div class="sag">sag yazılar</div>
</div>.orta
{
width:960px;
}
.sol
{
float:left;
width:260px;
background-color:yellow;
}
.sag
{
float:right;
width:700px;
background-color:red;
}
gibi
-
genk;
o zaman bir üst dive ait olmuyorlar misal burda kral biziz kısmının sayfanın sonunda çıkması lazım;
<div class="orta">
<div class="sol">sol yazılar</div>
<div class="sag">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi ipsum, sollicitudin quis euismod eget, feugiat et sapien. Duis sem libero, aliquet ac aliquet vel, dapibus at nisl. Vivamus a neque vel mauris bibendum venenatis. Maecenas odio elit, semper eu egestas eu, volutpat at leo. Fusce non ante sapien. Nunc eu metus velit, vitae sagittis odio. Duis tempor, dolor eu fringilla fringilla, turpis libero pharetra lacus, sed interdum nisi arcu quis orci. Cras eros enim, lobortis eget interdum nec, faucibus sit amet purus. Nam quis sapien odio. Duis bibendum lorem vel lorem commodo a sagittis purus accumsan. Morbi vitae mauris a nisi eleifend ultrices a at mi. Aenean non orci nec erat iaculis molestie. Vivamus rhoncus pulvinar neque, vel fermentum metus accumsan vitae. Aliquam et mauris ligula, eget sodales ante. Donec interdum vulputate magna, a vulputate enim venenatis quis. Nunc odio nunc, euismod sagittis tristique eget, scelerisque eu felis. Morbi tempor sodales vulputate. Proin quam tellus, elementum in laoreet nec, dignissim at odio. Nullam lacinia quam id lacus ornare ultrices. Integer eu faucibus eros. Donec non nunc et eros vehicula facilisis. Nulla congue ante arcu, non eleifend ante. Pellentesque varius, nisi eget aliquet fringilla, justo dolor auctor leo, et volutpat turpis dui at libero. Fusce semper gravida ligula, venenatis euismod risus aliquam eu. Phasellus eu odio vel diam pharetra molestie. Ut in volutpat mi. Suspendisse posuere libero quis mi vehicula a pretium magna eleifend. Suspendisse potenti. Vivamus viverra erat sed diam condimentum vitae varius diam ultrices. Sed ut ante in tortor porttitor ullamcorper non a lectus. Quisque interdum feugiat ante quis luctus. Morbi hendrerit, nisl ut fringilla vulputate, dui leo pellentesque ligula, eu dictum enim sapien viverra justo. Mauris iaculis neque eu est ornare sed iaculis nulla tincidunt. In sed tortor risus. Sed facilisis malesuada congue. Sed euismod ipsum fringilla libero tincidunt accumsan. Quisque nisl augue, ultricies quis luctus id, porta et mauris. Morbi malesuada nibh at ligula tincidunt dignissim. Curabitur fringilla, velit at scelerisque placerat, lacus enim tristique eros, sed rutrum felis metus et quam. Etiam vehicula nibh quis leo sodales luctus. Etiam turpis nisl, scelerisque vel gravida eget, tempus id sem. Duis a elementum eros. Duis mattis suscipit neque, ut lacinia lorem molestie at. Nunc a massa tortor. Quisque tristique sodales lacinia. Nam ultrices tincidunt elit a cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id erat non purus laoreet facilisis eget ut augue. Sed molestie est ut purus ullamcorper laoreet ullamcorper nibh sagittis. Curabitur accumsan laoreet convallis. Maecenas vulputate congue malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam gravida luctus auctor. Vivamus adipiscing lorem id justo vehicula condimentum. Nulla ultrices sollicitudin elit interdum accumsan. Aenean eu porta lectus. Maecenas malesuada tristique nisi a sollicitudin. Donec ullamcorper euismod lectus, vitae dapibus sapien ultricies nec. Nam bibendum tincidunt accumsan. Morbi quis quam tortor, sit amet commodo diam. Nunc a magna elit. Nulla diam risus, tincidunt sed volutpat sit amet, ornare eu est. Quisque rhoncus, ante sed ullamcorper placerat, nisi ipsum semper nunc, eget condimentum turpis erat vel augue. Nunc ligula sem, lacinia sed rhoncus quis, feugiat sit amet mi. Proin consectetur lectus nec risus consectetur eget egestas sem aliquam. Vivamus ac pellentesque nibh. Maecenas est mi, tempor ac euismod at, imperdiet bibendum risus. Donec placerat odio sodales augue condimentum eget eleifend elit mollis. Morbi sit amet sodales sem. Vestibulum faucibus adipiscing mollis.</div></div>kralbiziz
<style>.orta{width:960px;border:1px solid #c0c0c0;}.sol{float:left;width:260px;}.sag{float:right;width:700px;} </style>
-
Overflow:hidden; yap
-
hocam sorunun temeli o zaten;
<style>
div.hop {border:1px solid red;position:relative;overflow:hidden;position:relative;}
div.gum {position:absolute;left:0;width:50%;border:1px solid green;}
</style>
<div class="hop">
<div class="gum">hoppa</div>
</div>burda gum divini yok sayıyor.Benim istediğim onunla birlikte hareket etsin.Uzayınca uzasın.
-
height:auto; da koy
-
kral biziz yazısından önce
<div style="clear:both"></div> koyup dene bakalım
-
bu hocam mevzu..Yok üstteki div ile alttaki div hallolmuyor
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla