Yatak katman şablonu

raktor54

Centipat
Katılım
23 Ocak 2021
Mesajlar
29
Herkese selamlar. Ben siteme aşağıdaki linklerde de mevcut olan dinamik yatak katman şemalarından yapmak istiyorum. Bunu CSS'te yapabilir miyim? Konuyla alakalı bilgili arkadaşlar bana destek olursa çok sevinirim.


Şimdiden teşekkürler.
 

Dosya Ekleri

  • yatak katman şeması.jpg
    yatak katman şeması.jpg
    48,2 KB · Görüntüleme: 41
Son düzenleyen: Moderatör:

Rosalind

Centipat
Katılım
22 Şubat 2022
Mesajlar
855
Çözümler
49
Elbette.

HTML:
<!DOCTYPE html>
<html>
<head>
    <style>
        .toggle-Button:checked + .item-Description {
            display: block;
        }

        .item-Description {
            display: none;
        }
    </style>
</head>
<body>
    <div class='a-Container'>
        <input type='radio' name='toggle-Button' class='toggle-Button' checked>
        <div class='item-Description'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam felis. Ut nec sem ac ante euismod luctus quis vitae nisi. Sed dapibus lacus purus, sit amet hendrerit sem interdum et. Praesent tincidunt metus eget nunc semper ullamcorper.
        </div>

        <input type='radio' name='toggle-Button' class='toggle-Button'>
        <div class='item-Description'>
            Proin gravida ex erat. Suspendisse nunc urna, interdum ut cursus vitae, rhoncus non mauris. Nam faucibus erat vitae lectus bibendum viverra. Nulla consectetur interdum tempor. Aenean quis efficitur nulla.
        </div>

        <input type='radio' name='toggle-Button' class='toggle-Button'>
        <div class='item-Description'>
            Integer vel nibh eu nisi eleifend hendrerit at vitae ante. Nulla blandit accumsan tempus. Nullam sollicitudin neque non mi lacinia, id pharetra nisi ultricies. Donec sodales erat at tortor eleifend convallis. Curabitur hendrerit nisi quis elit rutrum, eu elementum nibh convallis.
        </div>
    </div>
</body>
</html>
 

Rosalind

Centipat
Katılım
22 Şubat 2022
Mesajlar
855
Çözümler
49
Umarım daha açıklayıcı olmuştur.

HTML:
<!DOCTYPE html>
<html>
<head>
    <style>
        .an-Item {
            display: flex;
        }

        .toggle-Button {
            display: none;
        }

        .toggle-Button:checked + .item-Description {
            display: block;
        }

        .item-Description {
            display: none;
        }
    </style>
</head>
<body>
    <div class='a-Container'>
        <label class='an-Item'>
            <img src='1-ustkumas_boss.webp'>
            <input type='radio' name='toggle-Button' class='toggle-Button' checked>
            <div class='item-Description'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam felis. Ut nec sem ac ante
                euismod luctus quis vitae nisi. Sed dapibus lacus purus, sit amet hendrerit sem interdum et. Praesent
                tincidunt metus eget nunc semper ullamcorper.
            </div>
        </label>
        <label class='an-Item'>
            <img src='aeromax-active-zone-3cm_.webp'>
            <input type='radio' name='toggle-Button' class='toggle-Button'>
            <div class='item-Description'>
                Proin gravida ex erat. Suspendisse nunc urna, interdum ut cursus vitae, rhoncus non mauris. Nam faucibus
                erat vitae lectus bibendum viverra. Nulla consectetur interdum tempor. Aenean quis efficitur nulla.
            </div>
        </label>
    </div>
</body>
</html>
 

Rosalind

Centipat
Katılım
22 Şubat 2022
Mesajlar
855
Çözümler
49
@Rosalind Maalesef kod bilgimin yetersizliğinden pek müdahale edemedim. Ürün açıklamasında sizin oluşturduğunuz kodlarla oynamaya çalıştım fakat pek sonuç alamadım.


Yine de çok teşekkür ederim.
Sizinle paylaştığım en temel haliydi. Bundan sonrası ücretli danışmanlığa girer :)

YouTube'daki öğretici videolara göz atabilirsiniz.
 
Yukarı