Container

Album Catatan
Simak catatan ini... dan dengarkan iramanya music 💌

Selalu Horizontal di dextop dan di seluler
<div style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px;">

Horizontal di dextop vertikal di seluler
<div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: Left;">

Container luar
<div style="background-color: transparent; border-radius: 0px; border: 2px dashed gray; box-sizing: border-box; height: auto; margin: 0px auto; max-width: 100%; overflow: hidden; padding: 0px; width: 100%;">

container dalam
<div align="left">
<div style="background: transparent; border-radius: 10px; border: 2px solid gray; padding: 10px; width: 100%; box-sizing: border-box; overflow-wrap: break-word;">

container luar Scroll
<div style="background-color: transparent; border-radius: 0px; border: 2px dashed gray; box-sizing: border-box; height: auto; margin: 0px auto; max-width: 100%; max-height: 1000px; overflow: auto; padding: 10px; width: 100%;">

 

Data ukuran display 
Seluler 370Px
Dekstop 740Px



🔴

Kotak Scroll
<div align="center">

<div style="background: none; border-radius: 5px; border: 1px solid grey; height: 1000px; overflow: scroll; padding: 0px; scrollbar-width: none; text-align: left; width: 95%;"> 💙</div>

Kotak Overflow
Container dasar <div style="border: 1px solid rgb(204, 204, 204); margin-bottom: 10px; padding: 10px; width: 200px;">💙 Note: scrollbar-width: none; Gunanya untuk menghilangkan scroll bar

Container menyusun Horizontal anti Scroll
<div style="background: none; border-radius: 5px; border: 0px solid gray; bottom: 20px; line-height: 0; display: flex; gap: 7px; height: auto; left: 20px; padding: 2px; position: fixed; width: 290px; z-index: 1000;">💙💙</div>

Note:
Container anti Scroll adalah kontainer yang memuat ikon selalu terapung pada satu Posisi dan tidak ikut
Scroll


Position: fixed: Membuat Kontainer terapung diam anti Scroll
line-height: 0:  membuat isi container menjadi presisi
display: flex;  /* Menyusun isi div secara fleksibel (horizontal by default) */ 
Penjelasan Detail CSS Horizontal
background: none;  Tidak ada latar belakang 
border-radius: 5px;  Sudut-sudutnya melengkung 5px
border: 0px solid gray;  Tidak ada garis tepi, meskipun warna dan jenis disebutkan 
bottom: 20px;  Jarak dari bawah layar 20px 
line-height: 0;  Tinggi baris nol, biasanya untuk menghilangkan jarak vertikal 
display: flex;  Menyusun isi div secara fleksibel (horizontal by default) 
gap: 7px;  Jarak antar elemen anak di dalam div sebesar 7px 
height: auto;  Tingginya mengikuti isi kontainer 
left: 20px; Jarak dari kiri layar 20px */
padding: 2px;  Ruang kosong di dalam tepi kontainer
position: fixed;  Posisi tetap meski halaman discroll 
width: 290px;  Lebar tetap 290px 
z-index: 1000; Di atas elemen lain (prioritas tampilan tinggi) 

Penjelasan Detail CSS Vertikal
<div style=" background: none; border-radius: 5px; border: 2px solid gray; line-height: normal; display: flex; flex-direction: column; height: 1000px; position: relative; left: 20px; padding: 2px; width: 100%; z-index: 1000; ">

Keterangan

• line-height: normal:  Nilai standar yang benar untuk tinggi baris.
• border: 2px solid gray: Border abu-abu dengan ketebalan 2px.
• height: 1000px;: Panel cukup tinggi, cocok untuk konten panjang.
• width: 100%:  Melebar penuh sepanjang viewport/lebar induknya.
• position: relative; left: 20px:  Baru bisa menggeser ke kanan 20px.
• display: flex; flex-direction: column:  Susunan isi div secara vertikal. 

Container aspect ratio

<div style="aspect-ratio: 16 / 9;

background-color: #f0f0f0; 

border-radius: 15px; 

border: 4px solid gray; 

overflow: auto; 

padding: 10px; 

scrollbar-width: none; 

text-align: left; 

width: 80%;">

Note:

Posisi Container

margin-left: 0; dikiri

margin: 0 auto ditengah

margin right: 0; dikanan

CONTAINER DENGAN

Aspect ratio yang presisi

<div align="left">
<div style="
aspect-ratio: 16 / 9;
background: none;
border-radius: 5px;
border: 4px dashed grey;
box-sizing: border-box;
overflow: auto;
padding: 10px;

scrollbar-width: none; 

text-align: left;
width:  80%;">
</div>
</div>

Container Click Zoom aspect ratio
<style>
.kontainer-aspek {
position: relative;
width: 100px;
max-width: 1000px;
aspect-ratio: 16 / 9;
margin-left: 0px; /* sudah diperbaiki */
background-color: #f8f8f8;
border: 2px solid #ccc;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
cursor: pointer;
overflow-y: auto;
padding: 10px;
{
.kontainer-aspek.besar
width: 100%;
max-width: 1000px;
margin: 10px auto;
background-color: #ffffff;
}
.isi-konten {
height: 100%;
overflow-y: auto;
font-size: 1rem;
line-height: 1.5;
}
</style>

<div class="kontainer-aspek" onclick="this.classList.toggle('besar')">
<div class="isi-konten">
🌸 Muauatan Container💫<br /></div></div><br />

🌸 Catatan Cinta

Ini adalah tempat yang lembut dan tenang untuk menyimpan pesan-pesan penting atau penjelasan pelajaran. Suasana nyaman, dan siap menemani para pelajar dalam memahami dunia. 🔴 .kontainer-Nona {background: linear-gradient(145deg, #f9f9f9, #ffffff);
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
max-width: 800px;
margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif;
color: #333;
transition: all 0.3s ease-in-out;}

.kontainer-Nona:hover 

{box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
transform: scale(1.01);}
</style>

<div class="kontainer-Nona">
<h2>🌸 Catatan Cinta</h2>
<p>
Ini adalah tempat yang lembut dan tenang untuk menyimpan pesan-pesan penting atau penjelasan pelajaran.
Suasana nyaman, dan siap menemani para pelajar dalam memahami dunia.
</p>
</div>

💋

Cotainer bergoyang

<style>

.kontainer-lembut

{background: linear-gradient(145deg, #f9f9f9, #ffffff);
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
max-width: 800px;
margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif;
color: #333;
transition: all 0.3s ease-in-out;}

.kontainer-lembut:hover 

{box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
transform: scale(1.01);}
</style>

<div class="kontainer-lembut">Disini muatan Container</div>
🔲

Container Induk, bernama induk </style>
.kontainer-Induk
{background: transparent;
border-radius: 10px;
border: 2px dashed red;
height: auto;
padding: 10px;
scrollbar-width: none;
width: 80%;}
</style>

<div class="kontainer-Induk">

🎶 Catatan & Lagu dari Nona

Simak catatan ini... dan dengarkan iramanya 💌