Ekrandaki kare nasıl her ekran için geçerli yapılabilir?

deniz8943

Decapat
Katılım
26 Şubat 2023
Mesajlar
447
Makaleler
1
Daha fazla  
Cinsiyet
Erkek
Selamünaleyküm VS Code'da site yazıyordum. Ekranın ortasındaki kareyi bir türlü çözemedim. Görünüşteki gibi her ekran için kodu nasıl ayarlayabilirim?

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/style.css">
    <script src="https://kit.fontawesome.com/ce62c61ff7.js" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="sel">
        <button type="button" class="homeb">
            <i class="fa-duotone fa-solid fa-house"></i>
        </button>
        <button type="button" class="gameb">
            <i class="fa-duotone fa-solid fa-gamepad"></i>
        </button>
        <button type="button" class="userb">
            <i class="fa-duotone fa-solid fa-user"></i>
        </button>
        <button type="button" class="progb">
            <i class="fa-solid fa-window-maximize"></i>
        </button>
        <button type="button" class="movb">
            <i class="fa-solid fa-clapperboard"></i>
        </button>
    </div>
    <div class="page">
       
    </div>
</body>
</html>
CSS:
body{
    margin: 0px;
    padding: 0px;
    background-color: #5d6d7e;
}
.sel{
    position: absolute;
    width: 75px;
    height: 100%;
    background-color:#17202a ;
    border-radius: 0 16px 16px 0;
}
.homeb{
    margin-left: 15px;
    margin-top: 15px;
    position: absolute;
    aspect-ratio: 1;
    width: 60%;
    border: none;
    background-color: #34495e;
    transition: 500ms;
    border-radius: 10px;
}
.homeb:hover{
    background-color: aliceblue;
}
.gameb{
    margin-left: 15px;
    margin-top: 75px;
    position: absolute;
    aspect-ratio: 1;
    width: 60%;
    border: none;
    background-color: #34495e;
    transition: 500ms;
    border-radius: 10px;
}
.gameb:hover{
    background-color: aliceblue;
}
.userb{
    margin-left: 15px;
    bottom: 10px;
    position: absolute;
    aspect-ratio: 1;
    width: 60%;
    border: none;
    background-color: #34495e;
    transition: 500ms;
    border-radius: 10px;
}
.userb:hover{
    background-color: aliceblue;
}
.progb{
    margin-left: 15px;
    margin-top: 135px;
    position: absolute;
    aspect-ratio: 1;
    width: 60%;
    border: none;
    background-color: #34495e;
    transition: 500ms;
    border-radius: 10px;
}
.progb:hover{
    background-color: aliceblue;
}
.movb{
    margin-left: 15px;
    margin-top: 195px;
    position: absolute;
    aspect-ratio: 1;
    width: 60%;
    border: none;
    background-color: #34495e;
    transition: 500ms;
    border-radius: 10px;
}
.movb:hover{
    background-color: aliceblue;
}
.page{
    box-sizing: border-box;
    background-size: cover;
    position: fixed;
    margin-left: 120px;
    margin-top: 20px;
    width: 1150px;
    height: 600px;
    background-color: #17202a;
    border-radius: 16px;
}
 
Son düzenleyen: Moderatör:
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…