HTML dilinde butonlar arka arkaya duruyor

Kadir keskin · 19 Eylül 2024

Kullandığım kod bu 2 buton koyuyorum but1 arkaya gidiyor but2 önde kalıyor but3 eklesem but2 arkaya geçiyor bu hatayı çözemedim. Yardım eder misiniz?

Böyle gözüküyor.

Palm1ye · 19 Eylül 2024

Butonların yerleşim düzeniyle ilgili bir sorun yaşanıyor. Mevcut CSS stiline göre, .top-buttons sınıfı, içerdiği butonları ekranda sabit bir şekilde (yani position: fixed;) üst kısımda tutuyor. Bu durumda, iki farklı .top-buttons div'i olduğu için, her biri ekranın en üstüne yerleşiyor ve birbiri üzerine binerek butonların düzensiz gözükmesine neden oluyor. Çözmek için .top-buttons div'i içinde her iki butonu gruplayabilirsiniz, aşağıdaki kod her iki butonun da yan yana görünmesini sağlar.

HTML:

<body>
    <div class="top-buttons">
        <button id="gosterButon">but1</button>
        <button id="gosterButon1">but2</button>
    </div>
    <div id="yeniEkran" style="display:none;">
        <h2>Yeni Ekran</h2>
        <p>Bu, butona tıkladığınızda gözükecek bir içeriktir.</p>
    </div>
    <div id="yeniEkran1" style="display:none;">
        <h2>Yeni Ekran</h2>
        <p>Bu, butona tıkladığınızda gözükecek bir içeriktir.</p>
    </div>
</body>

Kadir keskin · 19 Eylül 2024

Palm1ye dedi:
Butonların yerleşim düzeniyle ilgili bir sorun yaşanıyor. Mevcut CSS stiline göre, .top-buttons sınıfı, içerdiği butonları ekranda sabit bir şekilde (yani position: fixed;) üst kısımda tutuyor. Bu durumda, iki farklı .top-buttons div'i olduğu için, her biri ekranın en üstüne yerleşiyor ve birbiri üzerine binerek butonların düzensiz gözükmesine neden oluyor. Çözmek için .top-buttons div'i içinde her iki butonu gruplayabilirsiniz, aşağıdaki kod her iki butonun da yan yana görünmesini sağlar.

HTML:

<body> <div class="top-buttons"> <button id="gosterButon">but1</button> <button id="gosterButon1">but2</button> </div> <div id="yeniEkran" style="display:none;"> <h2>Yeni Ekran</h2> <p>Bu, butona tıkladığınızda gözükecek bir içeriktir.</p> </div> <div id="yeniEkran1" style="display:none;"> <h2>Yeni Ekran</h2> <p>Bu, butona tıkladığınızda gözükecek bir içeriktir.</p> </div> </body>

Teşekürler hocam oldu ama her iki butona tıklayınca yan yana yazılıyor 1. butona tıkladıktan sonra 2. butona tıklanınca 1 butonda gelen ekran nasıl silinir aynı şey buton 2 içinde nasıl yaparım?

İki butona tıklayınca böyle oluyor.

HTML dilinde butonlar arka arkaya duruyor

Ayrıntılı düzenleme

Kadir keskin

Decapat

Palm1ye

Hectopat

Kadir keskin

Decapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz