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

Kadir keskin

Decapat

Palm1ye

Hectopat

Kadir keskin

Decapat