Why was my scroll bar enabled on my HTML site? - html

Question

I am new in this field and now I am trying to improve myself by testing. I kept trying to figure out why I scroll bar vertically and horizontally, from what I noticed I think it's because of the tables. How can I solve this?
I know I didn't organize it very well, but I really want to solve that scroll bar, I also tried to hide it from the body, but if someone has a lower resolution, the total site will not be displayed. What do you think I could do to them?
body
{
margin: 0;
padding: 0;
min-height: 100vh;
background: #b3ccff;
font-family: arcon;
display: inline-block;
}
/* ------ [profesoreconomist.ro] ------ */
.link{
left: 100px;
top: 50px;
position: absolute;
}
/* ------ [Imagine Banner] ------ */
.banner{
position: relative;
top: 0;
margin-top: 4.3%;
right: -80px;
max-width: 1750px;
}
/* ------ [Continut butoane] ------ */
.spoiler {
display: none;
bottom: 50%;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .spoiler {
display: inline;
}
/* ------ [Buton Pagina Principala] ------ */
.btn {
padding: 10px 30px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post1 {
position: relative;
padding: 20px;
right: -58px;
}
/* ------ [Buton Curriculum] ------ */
.btn2 {
position: relative;
right: 0;
top: 29%;
padding: 10px 50px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post2 {
position: relative;
top: -42px;
left: 270px;
}
/* ------ [Buton Standarde de pregatire...] ------ */
.btn3 {
padding: 10px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post3 {
position: relative;
padding: 20px;
right: -435px;
top: -84px;
}
/* ------ [Buton Prolectare didactica] ------ */
.btn4 {
padding: 10px 30px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post4 {
position: relative;
padding: 20px;
right: -723px;
top: -146px;
}
/* ------ [Buton Evaluare] ------ */
.btn5 {
padding: 10px 27px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post5 {
position: relative;
right: -963px;
top: -188px;
}
/* ------ [Buton Resurse internationale] ------ */
.btn6 {
padding: 10px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post6 {
position: relative;
right: -1085px;
top: -210px;
}
/* ------ [Buton Proiecte scolare] ------ */
.btn7 {
padding: 10px 8px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post7 {
position: relative;
right: -1273px;
top: -232px;
}
/* ------ [Buton Concursuri si olimpiade scolare] ------ */
.btn8 {
padding: 10px 14px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
text-decoration: none;
}
.forum-post8 {
position: relative;
right: -1410px;
top: -254px;
}
.spoiler-content {
position: fixed;
bottom: 40%;
right: 45%;
}
/* ------ [Meniu Pagina autentificare] ------ */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
/* ------ [Pozitie buton cancel din meniul de autentificare] ------ */
.cancelbtn {
position: fixed;
width: 100%;
bottom: 100%;
}
}
/* ------ [Buton Autentificare] ------ */
.login {
padding: 13px 43px;
margin-bottom: 0;
*margin-left: .3em;
cursor: pointer;
background-color: #4d94ff;
border: none;
width: 200px;
}
/* ------ [Pozitie buton autentificare] ------ */
.plogin {
position: relative;
top: -284px;
right: -1669px;
}
/* ------ [Buton Login din meniul de autentificare] ------ */
.login2 {
padding: 12.5px 43px;
margin-bottom: 0;
*margin-left: .3em;
cursor: pointer;
background-color: #4d94ff;
border: none;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* ------ [Buton cancel din meniul de autentificare] ------ */
.cancelbtn {
left: 0%;
width: auto;
padding: 10px 18px;
background-color: #f44336;
border: none;
}
/* ------ [Pozitie imagine din meniul de autentificare] ------ */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* ------ [Background meniu de autentificare] ------ */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
/* ------ [Continut meniu login] ------ */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
}
/* ------ [Buton X pentru inchidere meniu login] ------ */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
/* ------ [Tabel Noutati] ------ */
.tabel-noutati {
position: relative;
left: 80px;
top: -270px;
border-collapse: collapse;
width: 350px;
background-color: #ffffff;
}
/* ------ [Background alb tabele] ------ */
td, th {
border: 1px solid #dddddd;
text-align: left;
height: 550px;
right: 10px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
/* ------ [Text noutati] ------ */
.news {
position: absolute;
top: -2.5%;
left: 15px;
}
/* ------ [Text link-uri utile] ------ */
.links {
position: absolute;
top: -2.5%;
left: 15px;
}
/* ------ [Tabel link-uri urile] ------ */
.tabel-links{
position: relative;
left: 1399px;
bottom: 0;
border-collapse: collapse;
width: 350px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<title>xxxxxxx</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="container">
<div id="header">
</div>
<body>
<!------ Buton Pagina Principala ------>
<div class="forum-post1">
Pagina principala
Pagina principala
<div class="spoiler">
<p class="spoiler-content">Bine ai venit pe site-ul nostru!</p>
</div>
</div>
<!------ Buton Curriculum ------>
<div class="forum-post2">
Curriculum
Curriculum
<div class="spoiler">
<p class="spoiler-content">Continutul din Curriculum</p>
</div>
</div>
<!------ Buton Standarde de pregatire profesionala ------>
<div class="forum-post3">
Standarde de pregatire profesionala
Standarde de pregatire profesionala
<div class="spoiler">
<p class="spoiler-content">Standarde de pregatire profesionala</p>
</div>
</div>
<!------ Buton Prolectarea didactică ------>
<div class="forum-post4">
Prolectarea didactică
Prolectarea didactică
<div class="spoiler">
<p class="spoiler-content">Prolectarea didactică</p>
</div>
</div>
<!------ Buton Evaluare ------>
<div class="forum-post5">
Evaluare
Evaluare
<div class="spoiler">
<p class="spoiler-content">Continutul din Evaluare</p>
</div>
</div>
<!------ Buton Resurse internaționale ------>
<div class="forum-post6">
Resurse internaționale
Resurse internaționale
<div class="spoiler">
<p class="spoiler-content">Resurse internaționale</p>
</div>
</div>
<!------ Buton Proiecte școlare ------>
<div class="forum-post7">
Proiecte școlare
Proiecte școlare
<div class="spoiler">
<p class="spoiler-content">Continutul din Proiecte școlare</p>
</div>
</div>
<!------ Buton Concursuri si olimpiade scolare------>
<div class="forum-post8">
Concursuri și olimpiade școlare
Concursuri și olimpiade școlare
<div class="spoiler">
<p class="spoiler-content">Concursuri și olimpiade școlare</p>
</div>
</div>
<!------ Buton catre link-ul profesoreconomit.ro------>
<a class="link" href="www.profesoreconomist.ro">profesoreconomist.ro</a>
<!------ Buton de Autentificare / Meniul de autentificare ------>
<div class="plogin">
<button class="login" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Autentificare</button>
</div>
<div id="id01" class="modal">
<form class="modal-content animate" action="#" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img\avatar.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Numele utilizatorului</b></label>
<input type="text" placeholder="Introdu numele de utilizator" name="uname" required>
<label for="psw"><b>Parola</b></label>
<input type="password" placeholder="Introdu parola" name="psw" required>
<button class="login2" type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Ține-mă minte
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Ai uitat parola?</span>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!------ Tabelurile de noutati si link-uri utile ------>
<table class="tabel-noutati">
<tr>
<th>
<h2 class="news">Noutăți</h2>
<table class="tabel-links">
<tr>
<th class="thh">
<h2 class="links">Link-uri utile</h2>
</body>
</html>

Answer 1

You can implement a vertically stacked overflow menu like this. However, you would need to use JavaScript to "listen" for the menu overflow button on-click event.
Perhaps look into grouping your menu items too, this can also save space. example

Answer 2

If you want to create a horizontal scroll bar, then wrap the contents in a div
Home
News
Contact
About
...
You can also customize it by using
div.scrollmenu {
background-color: #ffff;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: white;
}