lostyazilim
tr.link

div tablo yapımında sag ve soldaki kutuları aynı yüksekliğe hizalama sorunu

10 Mesajlar 2.290 Okunma
acebozum
tr.link

erena3000 erena3000 WM Aracı Kullanıcı
  • Üyelik 05.01.2015
  • Yaş/Cinsiyet 48 / E
  • Meslek serbest
  • Konum Ankara
  • Ad Soyad Ö** A**
  • Mesajlar 7
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
Arkadaşlar konu daha önce açılmışsa şimdiden özür dilerim, tüm aramalarıma rağmen bir çözüm bulamadım.. 2 sütun ve 50 civarında satırdan oluşan bir tablo var.

CSS kodları aşağıdaki gibi

div.ana{width:90%;height:100%;color:navy;float:right}
div.alt{color:#FFF;font-size:14px;font-weight:bold;float:left;background-color:navy;width: 50%;text-align:center}
div.sol{border:1px solid #ccccff;float:left;width:59%}
div.sag{border:1px solid #ccccff;float:left;width:40%}

HTML kodlari ise; şeklinde uzayıp gidiyor.. sağ sütunun içeriğinden dolayı yüksekliği sürekli değişiyor


xxxxxx

xxxxxxxx

yyyyyy

xxxxxxxxxxx
xxxxxxxxx

yyyyyyy

xxxxxxxxxx

yyyyyyy

xxxxxx
xxxxxxx
xxxxxxxxxxxxx
xxxx
xxxxxx
xxxxxxxx

yyyyyyyyy

xxxxx
xxxx
xxxxx
xxxxxxx
xxxxxxxx



istiyorum ki soldaki kutular, sağdaki kutularla aynı yükseklikte olsun.. sağdaki kutu yüksekliği içeriğinden dolayı sürekli değiştiği için sol a sabit bir yükseklik değeri de veremiyorum.. Nasıl yapılır bilen varsa yardımcı olabilir mi lutfen..
 

 

wmaraci
reklam

ugurturkmen ugurturkmen bisoruu.com Kullanıcı
  • Üyelik 25.10.2014
  • Yaş/Cinsiyet 31 / E
  • Meslek PHP Programmer
  • Konum İstanbul Avrupa
  • Ad Soyad U** T**
  • Mesajlar 208
  • Beğeniler 78 / 62
  • Ticaret 0, (%0)
bu kodların çalıştığı bir demo sayfası varsa ekle istersen, o şekilde bir cevap yazalım sana
 

 

Merak ettiklerini sor, aklında kalmasın.
www.bisoruu.com

FurkanKandemir FurkanKandemir WM Aracı Kullanıcı
  • Üyelik 25.05.2015
  • Yaş/Cinsiyet 32 / E
  • Meslek Web Yazılım Uzmanı
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 833
  • Beğeniler 0 / 287
  • Ticaret 13, (%100)
Açıkcası şöyle söyleyeyim. Size bize ne yapmak istediğinizi normal olarak anlatın. Birde görsel koyun bizde size sıfırdan yazıp verelim çünkü şu anki yazdıgınız kodlardan çok bişi çıkmıyor. En kısa yöntem ile bi jQuery yazar eşitlerim ama amacım size temelini ve mantığını öğretebilmek.
 

 

erena3000 erena3000 WM Aracı Kullanıcı
  • Üyelik 05.01.2015
  • Yaş/Cinsiyet 48 / E
  • Meslek serbest
  • Konum Ankara
  • Ad Soyad Ö** A**
  • Mesajlar 7
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
Aşağıdaki kodları linke yapıştırdıgınızda görünen sonuç; http://onizle.koddostu.com/

Ben istiyorum ki yy ler ile hemen yaninda bulunan xx lerin kutu yüksekliği aynı olsun.. ve bunu sabit height değeri vermeden yapmak.. yani div de sağındaki kutunun yüksekliğini al gibi bir kod var mıdır? xxx lerin bulunduğu kutuların yüksekliği sürekli değişken..


DDDDDD

DDDDDDDD

yyyyyy

xxxxxxxxxxx
xxxxxxxxx

yyyyyyy

xxxxxxxxxx

yyyyyyy

xxxxxx
xxxxxxx
xxxxxxxxxxxxx
xxxx
xxxxxx
xxxxxxxx

yyyyyyyyy

xxxxx
xxxx
xxxxx
xxxxxxx
xxxxxxxx

 

 

wmaraci
wmaraci

ugurturkmen ugurturkmen bisoruu.com Kullanıcı
  • Üyelik 25.10.2014
  • Yaş/Cinsiyet 31 / E
  • Meslek PHP Programmer
  • Konum İstanbul Avrupa
  • Ad Soyad U** T**
  • Mesajlar 208
  • Beğeniler 78 / 62
  • Ticaret 0, (%0)
verdiğin kodlar çalışmıyor dostum
 

 

Merak ettiklerini sor, aklında kalmasın.
www.bisoruu.com

erena3000 erena3000 WM Aracı Kullanıcı
  • Üyelik 05.01.2015
  • Yaş/Cinsiyet 48 / E
  • Meslek serbest
  • Konum Ankara
  • Ad Soyad Ö** A**
  • Mesajlar 7
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
nasıl çalışmıyor, kodu yapıştırıp, yukarıdan ön izlemeye basınca sağda çıkıyor tablo olarak..

Ek Olarak: Sanırım aşağıdaki linkteki gibi bir şey istediniz benden

https://jsfiddle.net/e54eys94/

https://jsfiddle.net/e54eys94/embedded/result/

sol kutularda bulunan yyyyy ler, hemen yaninda bulunan xxxxx lerin kutu yüksekliği nasıl aynı olur?.. bunu sabit height değeri vermeden yapmalıyım. çünkü xxx lerin bulunduğu kutuların yüksekliği her satırda değişken..yani b,r kutuda alt alta 3 xxx varken altindakinde 1, bir sonrakinde 12 xxxx olabiliyor..
 

 

berrynetwork berrynetwork WM Aracı Kullanıcı
  • Üyelik 08.04.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek web design ve yazılım
  • Konum Antalya
  • Ad Soyad N** U**
  • Mesajlar 181
  • Beğeniler 16 / 24
  • Ticaret 2, (%100)
istediğiniz kutuya min-height değeri vererek içeriği az olsa bile belirli bir yükseklik verebilirsiniz. Yani örneğin, sağda eşitlemek istediğiniz kutunun yüksekliği 100 olsun. Soldaki eşitlemek istediğiniz kutuya min-height: 100 verirseniz kutu yükseliği içeriği az olsa bile 100px olacaktır. Bu şekilde eşitleme şansınız bulunmakta.
 

 

ozlemkilic ozlemkilic Back-End Developer Kullanıcı
  • Üyelik 24.07.2015
  • Yaş/Cinsiyet 31 / K
  • Meslek Yazılım Geliştirme Uzmanı
  • Konum İstanbul Anadolu
  • Ad Soyad Ö** K**
  • Mesajlar 3
  • Beğeniler 0 / 1
  • Ticaret 0, (%0)
Yüksekliği değişen divinize bir class ismi tanımlayın. Jquery ile o divin yüksekliğini alın.

var $yukseklik=$(".classadi").height();
$(".sabitlenecekdivinadi").css("height":$yukseklik)

Sanırım bu kod size yardımcı olur.
 

 

FurkanKandemir FurkanKandemir WM Aracı Kullanıcı
  • Üyelik 25.05.2015
  • Yaş/Cinsiyet 32 / E
  • Meslek Web Yazılım Uzmanı
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 833
  • Beğeniler 0 / 287
  • Ticaret 13, (%100)

ozlemkilic adlı üyeden alıntı

Yüksekliği değişen divinize bir class ismi tanımlayın. Jquery ile o divin yüksekliğini alın.

var $yukseklik=$(".classadi").height();
$(".sabitlenecekdivinadi").css("height":$yukseklik)

Sanırım bu kod size yardımcı olur.



var yukseklik=$(".classadi").height();
$(".sabitlenecekdivinadi").css("height",yukseklik)

ufak bir düzeltme dalgınlıgına gelmiş sanırım. jQueryde $ ile degısken tanımlama yktur.

Sıcak değilde nem çok nem :)
 

 

mgunduz mgunduz WM Aracı Kullanıcı
  • Üyelik 19.08.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** G**
  • Mesajlar 2
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
Bu şekilde güncellersen düzelecektir.

<script></script>
<script>
$( document ).ready(function() {
$( ".satir" ).each(function() {
var $yukseklik=$( ".sag",this ).height();
$(".sol",this).css("height",$yukseklik );
});

});
</script>



xxxxxx

xxxxxxxx



yyyyyy

xxxxxxxxxxx
xxxxxxxxx




yyyyyyy

xxxxxxxxxx




yyyyyyy

xxxxxx
xxxxxxx
xxxxxxxxxxxxx
xxxx
xxxxxx
xxxxxxxx



yyyyyyyyy

xxxxx
xxxx
xxxxx
xxxxxxx
x xxxxxxx


 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)