I need to insert more scrolling so that the user can scroll more and see the content properly and not behind another text.. How could I do that or something like that as long as users can properly display the content. Here's my code (I know it's messy but I am new at this):
<html>
<head>
<title>The Dream - Cos'è</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<!-- Create navigation bar-->
<style>
#TopBar{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background-color:#181818;
}
</style>
<div id="TopBar"></div>
<!-- Create Page Links -->
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
padding-left: 163px;
}
</style>
<style>
li {
display: inline;
margin: 5px;
}
</style>
<style>
a{color: #ffffff;
text-decoration:none;
}
</style>
<ul>
<li><a href="cos'%C3%A8.html">Cos'è</a></li>
<li><a href="chisiamo.html">Chi Siamo</a></li>
</ul>
<style>
al {
list-style-type: none;
margin: 0;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
right: 140px;
}
</style>
<style>
li {
display: inline;
margin: 5px;
}
</style>
<style>
a{color: #ffffff;
text-decoration:none;
}
</style>
<al>
<li><a href="">News</a></li>
<li><a href="">Video</a></li>
<li><a href="">Gallery</a></li>
</al>
<!-- Create Text "#thedream"-->
<style> h2
{
position:fixed;
right:50px;
bottom:15px;
color:black;
z-index: 0;
}
</style>
<h2>#THEDREAM</h2>
<!-- Add Social Text and Links -->
<style>
h3 {
position:fixed;
left:50px;
bottom:35px;
color:black;
z-index: 0;
}
</style>
<h3>Seguici Su:</h3>
<a href="https://www.facebook.com/pages/TheDream-IL-FILM/668675889932418?ref=aymt_homepage_panel">
<img src="FB-logo.png" alt="FB Icon" style="position:fixed;bottom:22px;left:57px;width:29px;height:29px;border:0;z-index:1;">
</a>
<a href="https://www.youtube.com/channel/UC-0xXwA-gAqNPtcMwMnI-8Q">
<img src="YouTube-logo.png" alt="YT Icon" style="position:fixed;bottom:10px;left:82px;width:55px;height:55px;border:0;z-index:1;">
</a>
<style>
div {
background-color: white;
top: 40px;
margin: 0;
}
</style>
<!-- Bio 1 -->
<div>
<style>
h5 {
list-style-type: none;
margin: 0;
position: relative;
font-size: 20pt;
font-family: sans-serif;
left: 175px;
top: 50px;
color:#585858;
z-index: -1;
}
</style>
<h5>Gianfranco Marascia</h5>
<style>
p1{
list-style-type: none;
margin-right: 133px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 175px;
top:100px;
color:black;
z-index: -1;
}
</style>
<style>
a.class1{color: black;
text-decoration:underline;
}
</style>
<p1><img src="Gianfranco.jpg" width="150" height="150" float= "left" hspace= "5px" align= "left">
Gianfranco Marascia nasce a Palermo nel 1995. Egli cresce a Baucina, un paese nella provincia di Palermo nell'entro terra siciliano. E' un ragazzo molto estroverso con la passione per i computer e, soprattutto, per il video/foto editing. Già da giovane inzia a girare video musicali con altri talenti compaesani come il percussionista <a href="https://www.youtube.com/channel/UCgJ9tGy35OlkEJourDpsXDg/feed" class="class1" target="_blank">Santi Orlando</a> e la cantante <a href="https://www.youtube.com/channel/UCSdE32rbojrpd_Qz9xonV6Q" class="class1" target="_blank">Raffaella Poma</a>. Visto non solo il suo talento per i video musicali ma anche per gli eventi paesani egli decide di passare alla scrittura del primo suo cortometraggio: The Dream.
</p1>
</div>
<!-- Bio #2 -->
<style>
h6 {
list-style-type: none;
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
right: 133px;
top:275px;
color:#585858;
z-index: -1;
}
</style>
<h6>Dario Ferrara</h6>
<style>
p2{
list-style-type: none;
margin-left: 175px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
right: 133px;
top:325px;
color:black;
z-index: -1;
}
</style>
<p2><img src="Dario.jpg" width="150" height="150" float= "right" align= "right">
Dario Ferrara nasce il 28 agosto 1985. Laurea triennale in Sassofono Classico, carattere estroverso, passione per la musica, informatica, hi-tech, calcio e recitazione. Attualmente studia presso l'Universita' di Medicina e Chirurgia di Verona con l'obiettivo di conseguire la laurea in Scienze Infermieristiche.
</p2>
<!-- Bio 3 -->
<style>
h7 {
list-style-type: none;
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
left: 175px;
top: 500px;
color:#585858;
z-index: -1;
}
</style>
<h7><b>Alex Cali</b></h7>
<style>
p3{
list-style-type: none;
margin-right: 133px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 175px;
top:550px;
color:black;
z-index: -1;
}
</style>
<p3><img src="Me.jpg" width="150" height="150" float= "left" hspace= "5px" align= "left">
Alex Cali nasce a Palermo il 18 Gennaio 1997 e cresce in un piccolo paese della Sicilia, Ventimiglia di Sicila. Fin da piccolo sviluppa una passion per Il cinema e per la tecnologia, in particolare per i computer e dispositivi multimediali. Alla tenera eta di 17 si trasferisce in Canada dove procede i suoi studi superiori al St. Maximilian Kolbe CHS dove impara a programmare in Java, Turing e HTML/CSS. A settembre andrà al Seneca College dove studiera per conseguire una laurea in Sviluppo del Software.
</p3>
</body>
</html>``
One first suggestion:
See also: http://jsfiddle.net/bf50t4ty/2/
Personally, I would have re-written most of the code differently, but here I tried most to edit your MWE. Several other things should be fixed then and some more order should be done.
The CSS lines implementing what you asked for are
in