v2.5.2
Giriş yap

Sayfanın alt kısımında ufak bir boşluk var nasıl yok edebilirim?

canbozkurt0
415 defa görüntülendi ve 3 kişi tarafından değerlendirildi

Ve bunu engellemenin yolu yok mu sürekli bunu yaşıyorum.

Resim:

'''html
<!DOCTYPE html>
<html lang="tr">

<head>

<meta charset="UTF-8">
<title>Ben Kimim?</title>
<!-- CSS Files -->
<link rel="stylesheet" href="CSS/about-me.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<!-- Library -->
<script src="https://kit.fontawesome.com/5ebcc5475e.js" crossorigin="anonymous"></script>
<!-- Favicon -->
<link rel="icon" href="İmages/favicon.png" type="image/x-icon" />

</head>
<body>

<div class="container">
    <div class="navbar">
        <div class="icon">
            <div class="text">
                <a href="index.html" class="ahp"><i class="fas fa-home"></i>Anasayfa</a>
                <a href="" class="ahp2"><i class="fas fa-user"></i>Hakkımda</a>
                <a href="" class="ahp3"><i class="fas fa-tasks"></i>Projelerim</a>
                <a href="" class="ahp4"><i class="fas fa-envelope-open-text"></i>İletişim</a>
            </div>
        </div>
    </div>

    <b><span id="i-am"><span id="i">BEN</span> Kimim?</span></b>

    <span id="aciklama">
        <br> Merhaba ben, <span class="renk">Can</span>. <br>
        <span class="renk">Trakyalıyım</span>. <br>
        Web Tasarım öğrencisiyim.
    </span>

    <span id="soz">
        <span id="kekw"><br>'😉' <br> </span>
        <b><span id="canb">-Can</span></b>
    </span>

    <img src="İmages/calisma2.png" alt="calisma2" id="calisma2">

    <div class="kisim2"></div>

    <h3 id="de">Öğrenmeye devam ettiğim diller;</h3>

    <center><span id="de2">Projelelerime ulaşabileceğiniz yer;</span></center>

    <center><div class="kullandiklarim">
        <div class="box"><img src="İmages/html5.png" alt="html5" id="html5"></div>
        <div class="box"><img src="İmages/css3.png" alt="css3" id="css3"></div>
        <div class="box"><img src="İmages/js.png" alt="js" id="js"></div>
        <div class="box"><img src="İmages/php.png" alt="php" id="php"></div>
    </div></center>

    <center><div class="kullandiklarim2">
        <div class="box"><a href="https://github.com/CanB0ZKURT"><img src="İmages/git-hub.png" alt="github" id="git-hub"></a></div>
    </div></center>

   <footer id="footer">Can <b>BOZKURT</b> | Copyright  <span id="coprything">&copy;</span> 2021</footer> 
</div>

</body>
</html>
'''

'''css
/ Colors used on site /

orange{color: #FF8000;}

black{color: #1D1D1D}

white{color: #F6F6F6;}

purple{color: #7700E7;}

yellow{color: #FFCE6F;}

*{

box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;

}

body{

background-color: #1D1D1D;
background-image: url(https://i.hizliresim.com/yje2ti4.png);

}

/ "Anasayfa" button settings" /
.ahp{

font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: inline-block;
position: absolute;
padding-bottom: 1px;
left: 1040px;
text-decoration: none;

}

.ahp::before{

content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;

}

.ahp:hover::before{

width: 100%;

}

/ "Hakkımda" button settings /

.ahp2{

font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: block;
position: absolute;
left: 1205px;
text-decoration: none;

}

.ahp2::before{

content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;

}

.ahp2:hover::before{

width: 100%;

}

/ "Projelerim" button settings /

.ahp3{

font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: block;
position: absolute;
left: 1379px;
text-decoration: none;

}

.ahp3::before{

content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 4px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;

}

.ahp3:hover::before{

width: 100%;

}

.ahp4{

font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: inline-block;
position: absolute;
padding-bottom: 1px;
left: 1550px;
text-decoration: none;

}

.ahp4::before{

content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;

}

.ahp4:hover::before{

width: 100%;

}

/**/

/ İcon Settings /
.icon a i{

margin-right: 10px;

}

.text{

margin-top: 10px;

}

/ Scroll Bar Settings /

::-webkit-scrollbar{

width: 6px;

}

::-webkit-scrollbar-thumb{

background: #FF8000;
border-radius: 15px;

}

::-webkit-scrollbar-track{

background: #333333;

}

footer{

background-color: #000000;
color: #F6F6F6;
font-size: 19px;
text-align: center;
width: 100%;
height: 65px;
line-height: 65px;
position: absolute;
bottom: -580px;

}

coprything{

color: #FF8000;

}

i-am{

color: #F6F6F6;
font-size: 30px;
position: relative;
left: 280px;
top: 160px;

}

i{

color: #FF8000;

}

aciklama{

color: #F6F6F6;
font-size: 28px;
position: relative;
left: 280px;
top: 200px;

}

.renk{

color: #FF8000;

}

kekw{

color: #FF8000;
font-size: 20px;
position: relative;
left: 610px;
top: 240px;

}

canb{

color: #FF8000;
font-size: 20px;
position: relative;
left: 600px;
top: -70px;

}

calisma2{

position: relative;
top: 32px;
left: 1050px;
width: auto;
height: 350px;

}

.kisim2{

width: 100%;
height: 772px;
background: #FF8000;
position: relative;
top: 180px;
opacity: 0.1;

}

/ Kullandıklarım - About me /

.kullandiklarim{

width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 400px;

}

.box{

border: solid 2px #FF8000;
width: 200px;
height: 140px;
border-radius: 10px;
margin-right: 28px;
transition: 0.5s;

}

.box:hover{

transform: scale(1.1);
background: #FF8000;

}

html5{

width: auto;
height: 120px;
position: relative;
top: 8px;

}

css3{

width: auto;
height: 120px;
position: relative;
top: 8px;

}

js{

width: auto;
height: 120px;
position: relative;
top: 8px;

}

php{

width: auto;
height: 120px;
position: relative;
top: 8px;

}

/**/

de{

color: #F6F6F6;
text-align: center;
font-size: 38px;
position: relative;
bottom: 475px;

}

de2{

color: #F6F6F6;
text-align: center;
font-size: 38px;
position: relative;
bottom: 135px;

}

.kullandiklarim2{

width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 230px;

}

.box{

border: solid 2px #FF8000;
width: 200px;
height: 140px;
border-radius: 10px;
margin-right: 28px;
transition: 0.5s;

}

.box:hover{

transform: scale(1.1);
background: #FF8000;

}

git-hub{

width: auto;
height: 120px;
position: relative;
top: 8px;

}
'''

nurullahkilic
1006 gün önce

F12 tuşuna basarak Developer Toolunu açıp en sol en üstteki imleç ile sayfa üzerindeki elemanların özelliklerini görebilirsiniz. Fazla margin-bottom veya padding-bottom tarzı bir hata varsa o şekilde görüp düzeltebilirsiniz.