I am trying to build a basic website with CSS and HTML. I have right now adjusted the code in the following file to shrink the images down to displayable size. But let's suppose i tried decreasing the width of my browser(i am using my laptop) the contents get reorganized and the text moves below the picture as expected. But the problem i am unable to scroll down. I have tried various solutions like setting overflow of html to scroll, setting overflow-x property to hidden in html.
<!DOCTYPE html>
<html>
<head>
<script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>
W3Coders
</title>
<link rel="stylesheet" href="better-style.css">
</head>
<body>
<div class = "topping">
<h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
<h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
<img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
</div>
<div class="navbar">
<a href="index.html" class="active">Home</a>
<a href="resources.html">Resources</a>
<a href="skills.html">Skills</a>
<a href="rate.html">Rate</a>
<a href="contact.html">Contact</a>
</div>
<div class="contents">
<img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
<h1>Purpose Of Existence</h1>
<h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
<h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
<h1>Random stuff cuz i have idea what do with space:</h1>
<h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
</div>
</body>
Here is my CSS file:
.topping
background-color: white;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 9%;
color: rgb(92, 84, 84);
padding: 0%;
}
.navbar{
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position:fixed;
top:68px;
left:0px;
}
.people{
background-color: rgb(58,118,209);
overflow: hidden;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.navbar a{
float:left;
color: white;
padding:14px 26px;
text-decoration: none;
text-align: center;
font-size: 17px;
}
.people a{
float:left;
color: white;
padding: 14px 26px;
text-decoration: none;
text-align: center;
font-size: 15px;
}
.navbar a.active{
color: white;
background-color: rgb(58,118,209);
}
.people a.active{
background-color:black;
color: white;
}
.navbar a:hover{
color: white;
background-color: cyan;
}
.people a:hover{
color:white;
background-color: rgb(92, 84, 84);
}
.contents{
background:url("images/background.jpg");
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
}
.card{
background-color: white;
width: fit-content;
color: black;
padding: 20px;
margin: 10px;
border-radius: 5px;
border-width: 10px;
float: left;
border-color: black;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
border-radius: 10px;
border-width: 3px;
border-color: grey;
border-style: solid;
animation-name: links;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes links{
0%{
border-color: grey;
}
25%{
border-color: red;
}
50%{
border-color: green;
}
100%{
border-color:blue;
}
}
I am using github pages to host my site: https://godofgames0070.github.io
Also, i am using Google Chrome to view my site.
question from:
https://stackoverflow.com/questions/65923972/my-html-webpage-does-not-display-a-scroll-bar-even-though-the-content-cannot-be 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
