Css ile tıkladığında açılan div nasıl yapılır?

20.04.2020 18:54

numenor000 WM Aracı Kullanıcı

Üyelik 14.04.2020
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum Aydın

Ad Soyad O** E**
Mesajlar 7
Beğeniler 0 / 0
Ticaret 0, (%0)

"WordPress" veritabanından Resim1'deki kodlarla gönderileri çekiyorum. Bu gönderilerin "Div" 'ine tıklandığında Resim2'de göründüğü gibi gönderi detayını içeren "Div" 'in görünmesini istiyorum. Şu andaki yazılan kod parçası ile bunu eksik bir şekilde yapabiliyorum. Eksik olan kısım ise gönderi "Div" 'ine tıklandığında detay "div"'inin açılması ile "CSS" yerleşim düzeni bozuluyor ve istenilen görüntü oluşmuyor. Bunun CSS düzenini nasıl yapabilirim?

Resim 1:

Resim 1'deki kodlar:



	

		

	 

		



 








 <script>

 	function tikladetay(i) {

 		

 		 



$('#'+i).toggle('medium');

};





 </script>







 

ID), 'widget-image'); ?>









style="background-image: url(); width: 30%; height:200px; background-repeat: no-repeat; background-color:#fff; background-position: center; background-size: 100% 100%;  color:#ffffff; margin-right:3%; margin-top:20px; margin-bottom:20px; position: relative;   display:inline-block; vertical-align: top;" 

>

Resim 2:

Video:
https://youtu.be/SuBCMwU0tFI

20.04.2020 19:54

#2

umat Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 13.02.2015
Yaş/Cinsiyet 32 / E
Meslek Meslek
Konum İstanbul Avrupa

Ad Soyad U** A**
Mesajlar 123
Beğeniler 16 / 31
Ticaret 5, (%100)

Görsellerden pek bir şey anlaşılmıyor. Link atabilirseniz bakalım.

20.04.2020 20:22

#3

numenor000 WM Aracı Kullanıcı

Üyelik 14.04.2020
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum Aydın

Ad Soyad O** E**
Mesajlar 7
Beğeniler 0 / 0
Ticaret 0, (%0)

Dijimob adlı üyeden alıntı

Görsellerden pek bir şey anlaşılmıyor. Link atabilirseniz bakalım.

Localhost'ta çalıştığım için link atamıyorum ama daha iyi anlamanız için video ile sorunu göstermeye çalıştım. Videoda Adobe Xd üzerinde gösterdiğim tasarımın CSS ve HTML'e dökmekte sorun yaşıyorum. Videoda da gösterdiğim gibi localhost'taki halinde gördüğünüz gibi tıklandığında diğer div'lerin konumu kaymaktadır.

https://youtu.be/SuBCMwU0tFI

20.04.2020 20:40

#4

mimarcan Mimar Kullanıcı

Üyelik 11.01.2013
Yaş/Cinsiyet 40 / E
Meslek Mimar
Konum İstanbul Anadolu

Ad Soyad İ** Y**
Mesajlar 663
Beğeniler 1244 / 182
Ticaret 2, (%50)

Sorunuzla alakalı degil ama, Neden sorguları WordPress ile çekmuyorsunuz?

20.04.2020 20:51

#5

numenor000 WM Aracı Kullanıcı

Üyelik 14.04.2020
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum Aydın

Ad Soyad O** E**
Mesajlar 7
Beğeniler 0 / 0
Ticaret 0, (%0)

mimarcan adlı üyeden alıntı

Sorunuzla alakalı degil ama, Neden sorguları WordPress ile çekmuyorsunuz?

Hangi sorgulardan bahsettiğinizi anlamadım. Gönderileri veritabanından çekmek için WordPress sorgusu kullanıyorum zaten sadece kategori kısıtlaması getirdim. Resim 1'de sorunun kodları var aslında. Söylemek istediğinizi ben mi yanlış anladım?

20.04.2020 20:53

#6

mimarcan Mimar Kullanıcı

Üyelik 11.01.2013
Yaş/Cinsiyet 40 / E
Meslek Mimar
Konum İstanbul Anadolu

Ad Soyad İ** Y**
Mesajlar 663
Beğeniler 1244 / 182
Ticaret 2, (%50)

Yoo doğru anlamışsınız. SQL yerine WordPress kodlarıni kastetmistim.

Kodlar okunmadığı için sordum.

20.04.2020 21:13

#7

numenor000 WM Aracı Kullanıcı

Üyelik 14.04.2020
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum Aydın

Ad Soyad O** E**
Mesajlar 7
Beğeniler 0 / 0
Ticaret 0, (%0)

mimarcan adlı üyeden alıntı

Yoo doğru anlamışsınız. SQL yerine WordPress kodlarıni kastetmistim.

Kodlar okunmadığı için sordum.

Haklısınız, resimdeki kodların okunmadığını yeni fark ettim. Kodları direkt kodu içeriğine ekledim. Ek olarak buraya bırakayım inceleyip nasıl yapmam gerektiği veyahut eksik kısımlarını iletebilirseniz sevinirim.



	

		

	 

		



 








 <script>

 	function tikladetay(i) {

 		

 		 



$('#'+i).toggle('medium');

};





 </script>







 

ID), 'widget-image'); ?>









style="background-image: url(); width: 30%; height:200px; background-repeat: no-repeat; background-color:#fff; background-position: center; background-size: 100% 100%;  color:#ffffff; margin-right:3%; margin-top:20px; margin-bottom:20px; position: relative;   display:inline-block; vertical-align: top;" 

>

21.04.2020 17:14

#8

numenor000 WM Aracı Kullanıcı

Üyelik 14.04.2020
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum Aydın

Ad Soyad O** E**
Mesajlar 7
Beğeniler 0 / 0
Ticaret 0, (%0)

Çözüm yolu sunabilecek birisi yok mu?

Css ile tıkladığında açılan div nasıl yapılır?

Üye Girişi Yap