Search code examples
htmlcssformattingoverlapping

Add scrolling to avoid overlapping

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>``
Solution

  • One first suggestion:

    <!DOCTYPE html>
<html>
<head>
    <title>The Dream - Cos'&egrave;</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#TopBar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:40px;
   background-color:#181818;
}

ul {
    display: block;/*list-style-type: none;*/
    margin: 0 0 0 180px;
    padding: 0;
    color: white; 
    position: fixed; 
    font-family: sans-serif;        
    font-size: 20px;

}

li {
    display: inline;
    margin: 5px;        
}

a {color: #ffffff;
  text-decoration:none;   
}

li.one {
    display: inline;
    margin: 5px;        
}

li.one a {
    color: #ffffff;
    text-decoration:none;   
}

a.class1 {color: black;
   text-decoration:underline;
}

al {
  display: block;/*list-style-type: none;*/
  margin: 0;
  padding: 0;
  color: white;
  position: fixed;
  font-family: sans-serif;
  font-size: 20px;
  right: 180px;
}

div {
    background-color: white;
    top: 40px;
    margin: 0;
}

p1{
    display: block;/*list-style-type: none;*/
    margin-right: 180px;    
    position: absolute;
    font-size: 15pt;
    font-family: sans-serif;    
    left: 180px;
    top:100px;
    color:black;
    z-index: -1;
}

p2{
    display: block;/*list-style-type: none;*/
    margin-left: 180px;    
    position: absolute;
    font-size: 15pt;
    font-family: sans-serif;    
    margin-right: 180px;
    top:325px;
    color:black;
    z-index: -1;
}

p3{
    display: block;/*list-style-type: none;*/
    margin-right: 180px;
    position: absolute;
    font-size: 15pt;
    font-family: sans-serif;
    left: 180px;
    top:550px;
    color:black;
    z-index: -1;
}

p1, p2, p3 {
    text-align:justify;
    height:160px;
    overflow-y:scroll;
}

h2 {
    position:fixed;
    right:50px;
    bottom:15px;
    color:black;
    z-index: 0;
    font-size: 110%;
}

h3 {
   position:fixed;
   left:50px;
   bottom:35px;
   color:black;
   z-index: 0;        
}

h5 {
    display: block;/*list-style-type: none;*/
    margin: 0;    
    position: relative;
    font-size: 20pt;
    font-family: sans-serif;    
    left: 180px;
    top: 50px;
    color:#585858;
    z-index: -1;    
}

h6 {
    display: block;/*list-style-type: none;*/
    margin: 0;    
    position: absolute;
    font-size: 20pt;
    font-family: sans-serif;    
    right: 180px;
    top:275px;
    color:#585858;
    z-index: -1;    
}

h7 {
    display: block;/*list-style-type: none;*/
    margin: 0;    
    position: absolute;
    font-size: 20pt;
    font-family: sans-serif;    
    left: 180px;
    top: 500px;
    color:#585858;
    z-index: -1;  
}

div.clear {
    clear:all;
}
</style>
</head>

<body>
<div id="TopBar"></div>     

<ul>
  <li><a href="cos'%C3%A8.html">Cos'&egrave;</a></li>
  <li><a href="chisiamo.html">Chi Siamo</a></li>
</ul>  

<al>
    <li class="lione"><a href="">News</a></li>
    <li class="lione"><a href="">Video</a></li>
    <li class="lione"><a href="">Gallery</a></li>
</al>

<h2>#THEDREAM</h2>   

<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>

<div>

<h5>Gianfranco Marascia</h5>

<p1><img src="Gianfranco.jpg" width="150" height="150" float="left" style="margin: 0 10px 0 0" align= "left">
Gianfranco Marascia nasce a Palermo nel 1995. Egli cresce a Baucina, un paese nella provincia di Palermo nell'entro terra siciliano. 
&Egrave; un ragazzo molto estroverso con la passione per i computer e, soprattutto, per il video/foto editing. Gi&agrave; 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>

<h6>Dario Ferrara</h6>

<p2><img src="Dario.jpg" width="150" height="150" float= "right" style="margin: 0 0 0 10px" 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>        

<h7><b>Alex Cali</b></h7>

<p3><img src="Me.jpg" width="150" height="150" float= "left"  style="margin: 0 10px 0 0" 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&agrave; al Seneca College dove studiera 
per conseguire una laurea in Sviluppo del Software.</p3>
</body>
</html>

    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

    height:160px;
overflow-y:scroll;

    in

    p1, p2, p3 {
    text-align:justify;
    height:160px;
    overflow-y:scroll;
}