Yapamadığım CSS / HTML tablo

08-08-2022, 09:42:25

Değerli arkadaşlar merhaba. Yaptığım ama bir türlü çözüme ulaştıramadığım bir tablo konusunda yardıma ihtiyacım var. Netten bulduklarımı da düzenleyip eklediğimde olmadı. 3 gündür uğraşıyorum. Yardım edebilecek olan var mı? İstediğim yapı, responsive ve sayfa daraltıldığında aşağıdaki gibi olacak.

08-08-2022, 09:43:42

#2

DenqeSiz

bootstrap yapabilirsiniz

08-08-2022, 09:46:53

#3

KupeliHoca

DenqeSiz adlı üyeden alıntı: mesajı görüntüle

bootstrap yapabilirsiniz

Boostrap olmuyor maalesef. Çünkü bu kodu hazırda olan bir kodun içine eklemem gerekiyor. CSS / HTML lazım.

08-08-2022, 09:54:37

#4

AspavA

KupeliHoca adlı üyeden alıntı: mesajı görüntüle

Değerli arkadaşlar merhaba. Yaptığım ama bir türlü çözüme ulaştıramadığım bir tablo konusunda yardıma ihtiyacım var. Netten bulduklarımı da düzenleyip eklediğimde olmadı. 3 gündür uğraşıyorum. Yardım edebilecek olan var mı? İstediğim yapı, responsive ve sayfa daraltıldığında aşağıdaki gibi olacak.

biraz açıklama yaparsanız yardımcı olabiliriz sitenizde herhangi bir kütüphane mi kullanıyorsunuz ( bootstrapp ) vs gibi bilgiler

Örnek

08-08-2022, 10:41:36

#5

metinyavuz

Sanırım bu işini görecektir

kaynak

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>
<h1>Change clear with JavaScript</h1>

<button onclick="myFunction()">Try it</button>

<p>Click the "Try it" button to set the clear property of the DIV element to "both".</p>

<img src="smiley.gif" width="32" height="32">
<div id="myDIV">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.clear = "both";
}
</script>


</body>
</html>

08-08-2022, 11:35:36

#6

KupeliHoca

AspavA adlı üyeden alıntı: mesajı görüntüle

biraz açıklama yaparsanız yardımcı olabiliriz sitenizde herhangi bir kütüphane mi kullanıyorsunuz ( bootstrapp ) vs gibi bilgiler

Örnek

Çok teşekkür ederim. Gönderdiğiniz örneği uyarladım ve kullandım. Tam istediğim gibi oldu. Elinize sağlık.

08-08-2022, 11:36:19

#7

KupeliHoca

metinyavuz adlı üyeden alıntı: mesajı görüntüle

Sanırım bu işini görecektir

kaynak

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>
<h1>Change clear with JavaScript</h1>

<button onclick="myFunction()">Try it</button>

<p>Click the "Try it" button to set the clear property of the DIV element to "both".</p>

<img src="smiley.gif" width="32" height="32">
<div id="myDIV">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.clear = "both";
}
</script>


</body>
</html>

Teşekkürler. Bunu da denedim ama olmadı.

Görsel boyutu sebebiyle sanırım yazılar birbirine girdi.

İlginiz için teşekkürler.

14-08-2022, 00:00:23

#8

MontyPython

media query kullan.
flex-direction: column; yapacaksın sonrada.

Yapamazsan html kodunu burada paylaş. Ayarlayalım.