CODEWITHSUNDEEP
htmlcss
Jean
Jean

Reputation: 55

My document overflows with content and goes over the footer

I need to do a redesign of a website that is mostly text, the existing one is very simple: only text pages which are linked to each other (most were generated by Publisher)

The new design will include a header, menu, content and footer. (The header, menu and footer) will remain fixed during navigation, only the content part will change, and this is where I will load my pages.

The pages rank well from the content (I changed absolute to relative) but I notice that all the pages which were generated by publisher overflow and therefore pass over the footer. I have been on this problem for several days and I can't do it.

note: the other pages not generated by (publisher) remain in the content and do not overflow.

And in addition: not easy to recover pages that were generated automatically by other software.

Thanks a lot for your help! and your experiences may be lived.

#page {
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    
}
#haut {
    height: 253px;
    /* background-color: hsla(246,87%,49%,0.96); */
    background-color: hsl(210,100%,56%); 
    margin-top: 10px;
    text-align: center;
}
#nav {
    height: 70px;
    background-color: hsla(235,69%,48%,1.00);
    
}

#contenu {
    
    height: auto; 
    background-color: hsla(72,17%,83%,0.95); 
    
    
}

#pied {
    height: 100px;
    background-color: hsla(45,70%,45%,1.00); 
      
    font-family: arial; 
    font-style: italic;
    font-weight: bold;
    font-size: XX-large;
    text-align: center;
    
    
}

#haut img {
    border: 10px solid hsla(52,66%,40%,1.00);
    border-radius: 50px;
      }

#nav ul{
    float: right;
  
}

#nav a{
    font-size: 35px;
    color: white;
    font-family: 'Dancing script';
  
}

#nav li a:hover {
      background-color: #87CEEB; 
      
      
}
/*
.dropdown-menu a:hover 
/* {background-color: #A9A9A9;} */
 
<!doctype html>
<html lang="en"> 
<head>
<meta charset="utf-8">

<title>XXXXX</title>

    
       
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
     

</head>

<body>
    
    <div id="page">
   
    <!--  ***************  INSERTION du HEADER   ***************** -->

         <?php include("haut.php"); ?>

    <!--  ******************************************************** -->
      
    <!--  ***************  INSERTION du MENU   ******************* -->

         <?php include("nav.php"); ?>

    <!--  ******************************************************** -->
      
      <div id="contenu"> 
      
    
        
    
        <div style="position:relative;width:8.-1874in;height:11.1206in">
     <span style="position:relative;z-index:2;
left:-31px;top:26px;width:1063px"><img width="1063" height="1364" src="Bulletin%2087_fichiers/image289.gif" v:shapes="_x0000_s1037 _x0000_s1025 _x0000_s1026 _x0000_s1027 _x0000_s1028 _x0000_s1029 _x0000_s1030 _x0000_s1031 _x0000_s1032 _x0000_s1033 _x0000_s1034 _x0000_s1035 _x0000_s1036"/></span>
<span style="position:relative;
z-index:9;left:939px;top:0px;width:72px;height:168px">

<map name="MicrosoftOfficeMap0">
            <area shape="Rect" coords="1, 126, 71, 168" href="Bulletin%2087_fichiers/Page367.htm"/>
            <area shape="Rect" coords="0, 126, 72, 168" nohref/>
            <area shape="Rect" coords="1, 84, 71, 126" href="Bulletin%2087_fichiers/Page355.htm"/>
            <area shape="Rect" coords="0, 84, 72, 126" nohref/>
            <area shape="Rect" coords="1, 42, 71, 84" href="Bulletin%2087_fichiers/Page266.htm"/>
            </map>
            
            <img border="0" width="72" height="168" src="Bulletin%2087_fichiers/image331.gif" usemap="#MicrosoftOfficeMap0" v:shapes="_x0000_s1099 _x0000_s1115 _x0000_s1116 _x0000_s1104 _x0000_s1105 _x0000_s1106 _x0000_s1107 _x0000_s1108 _x0000_s1109 _x0000_s1110 _x0000_s1111 _x0000_s1112"/></span>
            
        </div>
     
      
      
     </div>
      
      <!--  ***************  INSERTION du FOOTER ******************* -->

         <?php include("pied.php"); ?>

      <!--  ******************************************************** -->
      
  </div>
  
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-3.3.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/popper.min.js"></script> 
    <script src="js/bootstrap-4.3.1.js"></script>   
</body>
</html>

Upvotes: 2

Views: 84

Answers (1)

Roohullah Kazmi
Roohullah Kazmi

Reputation: 333

Use overflow: auto or you can use overflow: scroll too. Add it to the 'content page' styling class.

Upvotes: 2

Related Questions