Sayfanın alt kısımında ufak bir boşluk var nasıl yok edebilirim?
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">©</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;
}
'''
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
önce markdown kullanmayı öğren. yardım etmeyeceğim
@nurullahkilic en altta center diye bir yer var ancak kodlarımda center diye bir class div yok.
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.