Pourquoi ma page affiche-t-elle une partie blanche en bas de l'écran en mode portrait?

-2

J'ai un problème avec ma page Web.Pourquoi ma page affiche-t-elle une partie blanche en bas de l'écran en mode portrait?

Je convertis un modèle pour un ami en une nouvelle page Web. Le modèle original forme assez bien pour les téléphones à la fois en mode portrait et paysage, mais après les modifications, je l'ai fait ne fonctionne qu'en mode paysage et sur PC.

En mode portrait, cela me donne une grande partie blanche sous la page Web. Ce qui est assez étrange car sur pc et en mode paysage il s'arrête au bas de la page où il devrait avec le pied de page.

J'ai fait seulement quelques ajustements sur le CSS et seul ajustement que j'ai fait qui pourrait avoir quelque chose à voir avec elle est la hauteur html que j'ai réglé de 100% à 1500px mais cela a été fait à cause de ce problème, donc je doute cela aura quelque chose à voir avec ça.

Je n'arrive pas à comprendre pourquoi elle ne se forme plus à l'écran.

html { 
 
    height: 100%;} 
 

 
* 
 
{ margin: 0; 
 
    padding: 0;} 
 

 
body 
 
{ font: normal 85% Arial, Helvetica, sans-serif; 
 
    background: #FFF url(../images/background.jpg) repeat; 
 
    color: #000; 
 
} 
 

 
p 
 
{ padding: 0 0 10px 0; 
 
    color: #FFF; 
 
    line-height: 1.7em; 
 
    font-size: 100% } 
 

 
img 
 
{ border: 0;} 
 

 
h1, h2, h3, h4, h5, h6 
 
{ font: normal 175% Arial, Helvetica, sans-serif; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D; 
 
    letter-spacing: -1px; 
 
    margin: 0 0 10px 0;} 
 

 
h2 
 
{ font: normal 165% Arial, Helvetica, sans-serif;} 
 

 
h3 
 
{ font: normal 130% Arial, Helvetica, sans-serif; 
 
} 
 

 
h4, h5, h6 
 
{ margin: 0; 
 
    padding: 0 0 0px 0; 
 
    font: normal 150% Arial, Helvetica, sans-serif; 
 
    line-height: 1.5em;} 
 

 
h5, h6 
 
{ font: normal 95% Arial, Helvetica, sans-serif; 
 
    color: #888; 
 
    padding-bottom: 15px;} 
 

 
a 
 
{ color: #FFF; 
 
    font-weight: bold; 
 
    background: transparent; 
 
    outline: none; 
 
    text-decoration: underline;} 
 

 
a:hover 
 
{ text-decoration: none;} 
 

 
ul 
 
{ margin: 2px 0 22px 30px; 
 
    line-height: 1.7em; 
 
    font-style: normal; 
 
    font-size: 100%;} 
 

 
ol 
 
{ margin: 8px 0 22px 20px;} 
 

 
ol li 
 
{ margin: 0 0 11px 0;} 
 

 
#main, #header, #banner, #menubar, #site_content, #footer, #content_bottom, #footercopyright 
 
{ margin-left: auto; 
 
    margin-right: auto;} 
 
    
 
#footercopyright{ 
 
\t height: 20px; 
 
\t width: 960px; 
 
\t font-size: 14px; 
 
\t text-align:center; 
 
\t top:auto; 
 
\t padding-top: 20px; 
 
    \t text-align: center; 
 
    \t background: transparent; 
 
    \t color: #1D1D1D; 
 
    \t text-shadow: 1px 1px #FFF;} \t 
 

 
#footercopyright a, #footercopyright a:hover 
 
{ color: #1D1D1D; 
 
    text-decoration: none; 
 
    padding-bottom: 20px;} 
 

 
#footercopyright a:hover 
 
{ text-decoration: underline;} 
 

 
#main 
 
{ background: transparent;} 
 
    
 
#header 
 
{ width: 960px; 
 
    height: 120px; 
 
    background: transparent;} 
 

 
#banner 
 
{ width: 960px; 
 
    position: relative; 
 
    height: 50px; 
 
    padding: 15px 0 0 0; 
 
    background: transparent;} 
 

 
#menubar 
 
{ width: 960px; 
 
    height: 50px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 0px 0px; 
 
    -moz-border-radius: 15px 15px 0px 0px; 
 
    -webkit-border: 15px 15px 0px 0px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
#welcome 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome_slogan 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome H1 
 
{ font: normal 300% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -3px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 

 
#welcome_slogan H1 
 
{ font: normal 200% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -2px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 
    
 
ul#menu 
 
{ margin:0; 
 
    margin: 0 0 0 20px;} 
 

 
ul#menu li 
 
{ padding: 0 0 0 0px; 
 
    list-style: none; 
 
    margin: 2px 0 0 0; 
 
    display: inline; 
 
    background: transparent;} 
 

 
ul#menu li a 
 
{ float: left; 
 
    font: bold 120% Arial, Helvetica, sans-serif; 
 
    text-align: center; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    height: 24px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    padding: 16px 20px 10px 20px; 
 
    background: transparent; } 
 
    
 
ul#menu li.current a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 
    
 
ul#menu li:hover a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 

 
#site_content 
 
{ width: 940px; 
 
    padding-left: 20px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    background: #323232; 
 
    border-radius: 0px 0px 15px 15px; 
 
    -moz-border-radius: 0px 0px 15px 15px; 
 
    -webkit-border: 0px 0px 15px 15px;} 
 

 
.sidebar_container 
 
{ float: left; 
 
    margin: 10px 20px 0 0; 
 
    width: 215px; 
 
    padding: 0;} 
 

 
.sidebar 
 
{ float: left; 
 
    width: 250px; 
 
    padding: 0; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px;} 
 

 
.sidebar_item 
 
{ font: normal 100% Arial, Helvetica, sans-serif; 
 
    width: 215px;} 
 

 
.sidebar h2 
 
{ padding: 5px 0 0 10px; 
 
    font: normal 140% Arial, Helvetica, sans-serif; 
 
    height: 30px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    color: #fff; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 

 
#content 
 
{ width: 680px; 
 
    margin-bottom: 20px; 
 
    float: left;} 
 

 
.content_item 
 
{ width: 680px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px;} 
 
    
 
.content_image 
 
{ float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 0 20px 10px 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
.content_container 
 
{ width: 320px; 
 
    padding: 5px; 
 
    margin-right: 10px; 
 
    float: left;} 
 
    
 
#content_bottom 
 
{ width: 960px; 
 
    height: 160px; 
 
    text-align: center;} 
 
    
 
#content_bottom p 
 
{ color: #000; 
 
    text-shadow: 1px 1px #FFF; } 
 

 
#content_bottom h4 
 
{ color: #000; 
 
    text-shadow: none;} 
 
    
 
.content_bottom_container_box 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 

 
.content_bottom_container_boxl 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 
    
 
#footer 
 
{ width: 960px; 
 
    height: 20px; 
 
    padding-top: 20px; 
 
    text-align: center; 
 
    background: transparent; 
 
    color: #1D1D1D; 
 
    text-shadow: 1px 1px #FFF;} 
 

 
#footer a, #footer a:hover 
 
{ color: #1D1D1D; 
 
    text-decoration: none; 
 
    padding-bottom: 20px;} 
 

 
#footer a:hover 
 
{ text-decoration: underline;} 
 
    
 
.readmore 
 
{ font: bold 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    margin-left: 95px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #ccc); 
 
    background: -o-linear-gradient(#fff, #ccc); 
 
    background: -webkit-linear-gradient(#fff, #ccc); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.readmore a 
 
{ color: #1D1D1D;} 
 
    
 
.button_small 
 
{ font: normal 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.button_small a 
 
{ color: #FFF; 
 
    padding-left: 5px;} 
 

 
.form_settings 
 
{ margin: 15px 0 0 0;} 
 

 
.form_settings p 
 
{ padding: 0 0 4px 0;} 
 

 
.form_settings span 
 
{ float: left; 
 
    width: 280px; 
 
    text-align: left;} 
 
    
 
.form_settings input, .form_settings textarea 
 
{ padding: 2px; 
 
    width: 299px; 
 
    font: 100% arial; 
 
    border: 1px solid #E5E5DB; 
 
    background: #FFF; 
 
    color: #47433F;} 
 
    
 
.form_settings input[type="checkbox"] 
 
{ padding: 2px 0; 
 
    width: 15px; 
 
    font: 100% arial; 
 
    border: 0; 
 
    background: #FFF; 
 
    color: #47433F; 
 
    margin: 28px 0;} 
 

 
.form_settings .submit 
 
{ font: 100% arial; 
 
    width: 99px; 
 
    margin: 0 0 0 206px; 
 
    height: 26px; 
 
    padding: 2px 0 3px 0; 
 
    cursor: pointer; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 7px 7px 7px 7px; 
 
    -moz-border-radius: 7px 7px 7px 7px; 
 
    -webkit-border: 7px 7px 7px 7px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    color: #FFF;} 
 

 
.slideshow { 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
/* styling for the slideshow on the homepage */ 
 
ul.slideshow { 
 
    list-style: none; 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
ul.slideshow li { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 0; 
 
    right: 0;} 
 
    
 
ul.slideshow li.show { 
 
    z-index: 500;} 
 
    
 
ul img { 
 
    border: none;} 
 
    
 
ul.white{ 
 
    color:#FFF; 
 
} 
 
    
 
#slideshow-caption { 
 
    width: 680px; 
 
    height: 38px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 500;} 
 
    
 
#slideshow-caption .slideshow-caption-container { 
 
    padding: 10px 25px 10px 25px; 
 
    background: transparent url(../images/transparent.png) repeat; 
 
    z-index: 1000;} 
 
    
 
#slideshow-caption p { 
 
    padding: 0; 
 
    font: normal 130% arial, sans-serif; 
 
    color: #FFF;} 
 

 
.linkwithoutline A:link {text-decoration: none} 
 
.linkwithoutline A:visited {text-decoration: none} 
 
.linkwithoutline A:active {text-decoration: none} 
 
.linkwithoutline A:hover {text-decoration: underline;} 
 

 
.linkwithoutline-black A:link {text-decoration: none} 
 
.linkwithoutline-black A:visited {text-decoration: none} 
 
.linkwithoutline-black A:active {text-decoration: none} 
 
.linkwithoutline-black A:hover {text-decoration: underline;} 
 
.linkwithoutline-black {color:#FFF; left:50%;} 
 

 
#news{width:208px; margin:23px 0 22px 19px} 
 
#news h2{ height:23px; background:url(../images/h_news.gif) 0 0 no-repeat; position:relative; border-bottom: #545400 3px dotted; margin-bottom:5px} 
 
.newsstory{width:201px; margin-left:7px; border-bottom: #545400 3px dotted; margin-bottom:5px} 
 
.newsstory p span.date{display:block; width:74px; height:16px; padding:2px 0 0 11px; font:12px/14px Trebuchet MS, sans-serif; font-weight:bold; background:#d3d7db; color:#22454d; margin-bottom:7px;} 
 
.newsstory p {margin-bottom:5px;} 
 
.newsstory p a{color:#22454d; font:10px/14px Tahoma, sans-serif; text-decoration:none} 
 
.newsstory p a:hover{color:#a65b99; } 
 
#news ul.bullet{margin:0 0 0 108px}

<?php 
 
// Get our database connector 
 
require("includes/(connection-file)"); 
 
?> 
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 

 
<head> 
 
    <title>Massagetherapeut Henk Dias</title> 
 
    <meta name="description" content="Massagetherapeut Henk Dias" /> 
 
    <meta name="keywords" content="Massage Therapeut Henk Dias Massagetherapeut" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
 
    <script type="text/javascript" src="js/image_slide.js"></script> 
 
</head> 
 

 
<body> 
 

 
<!-- facebook likes en shares script --> 
 

 
<div id="fb-root"></div> 
 
<script>(function(d, s, id) { 
 
    var js, fjs = d.getElementsByTagName(s)[0]; 
 
    if (d.getElementById(id)) return; 
 
    js = d.createElement(s); js.id = id; 
 
    js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1"; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
}(document, 'script', 'facebook-jssdk'));</script> 
 

 
    <div id="main"> 
 
    <div id="header"> 
 
\t <div id="banner"> 
 
\t  <div id="welcome"> 
 
\t  <h1>Massagetherapeut Henk Dias</h1> 
 
\t  </div><!--close welcome--> 
 
\t  <div id="welcome_slogan"> 
 
\t  <h1>Your Company Slogan Here</h1> 
 
\t  </div><!--close welcome_slogan--> 
 
\t </div><!--close banner--> 
 
    </div><!--close header--> 
 

 
\t <div id="menubar"> 
 
     <ul id="menu"> 
 
     <li><a href="/" title="Home">Home</a></li> 
 
     <li><a href="about/" title="Over Mij">Over Mij</a></li> 
 
     <li><a href="intake/" title="Intake">Intake</a></li> 
 
     <li><a href="massage/" title="Massages">Massages</a></li> 
 
     <li><a href="tarieven/" title="Tarieven">Tarieven</a></li> 
 
     <li><a href="contact/" title="Contact">Contact</a></li> 
 
     </ul> 
 
    </div><!--close menubar--> \t 
 
    
 
\t <div id="site_content"> \t \t 
 

 
\t <div class="sidebar_container">  
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h2>Nieuws</h2> 
 
      <?php 
 

 

 
       $sql = "SELECT * FROM news ORDER BY ID DESC"; 
 
       $result = mysqli_query($conn, $sql) or die ("Could not access DB: " . mysql_error()); 
 

 
while ($row = mysqli_fetch_assoc($result)) { 
 

 
    echo "<div class=\"newsstory\" style=\"border-bottom: #1867c7 3px dotted;\">"; 
 
    echo "<p>"; 
 
    echo !empty($row['date']) ? ("<h3> <u>". $row['date'] . "</u></h3>") : ''; 
 
\t echo "<p>"; 
 
    echo $row['news']; 
 
\t echo "</p>"; 
 
    echo "</p>"; 
 
    echo "</div>"; 
 
} 
 

 
?> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> 
 
\t <div class="sidebar"> 
 
    \t <div class="sidebar_item"> 
 
     <div class="fb-like" data-href="https://www.facebook.com/massagetherapeutHenkDias/" data-width="232" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> 
 
<br /> <br /> 
 
<div class="fb-share-button" data-href="http://www.massagepraktijkanne.nl/" data-width="232" data-type="button_count"></div> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar-->  \t \t 
 
     </div><!--close sidebar_container--> \t 
 
\t 
 
\t <div class="slideshow"> 
 
\t  <ul class="slideshow"> 
 
      <li class="show"><img width="680" height="250" src="images/home_1.jpg" alt="&quot;Time to relax&quot;" /></li> 
 
      <li><img width="680" height="250" src="images/home_2.jpg" alt="&quot;Give yourself a moment&quot;" /></li> 
 
     </ul> 
 
     </div> \t \t 
 
\t 
 
\t <div id="content"> 
 
     <div class="content_item"> 
 
\t \t \t <p>bla</p> 
 
\t \t </div><!--close content_item--> 
 
     </div><!--close content--> 
 
\t </div><!--close site_content--> 
 
    
 
\t </br> 
 
    </br> 
 
    
 
    </div><!--close main--> 
 
    
 
    <div id="footer"> 
 
    <a href="/" title="Home">HOME</a> | <a href="about/" title="Over Mij">OVER MIJ</a> | <a href="intake/" title="Intake">INTAKE</a> | <a href="massage/" title="Massages">MASSAGES</a> | <a href="tarieven/" title="Tarieven">TARIEVEN</a> | <a href="contact/" title="Contact">CONTACT</a> 
 

 
\t </div> \t <!--close footer--> 
 

 
\t <div id="footercopyright"> 
 
    \t <strong>Copyright &copy; Massagetherapeut Henk Dias | Designed by <span class="linkwithoutline-black"><a class="linkwithoutline-black" href="mailto:[email protected]">W. Vermeylen</a></span></strong> </div> \t <!--close footercopyright--> 
 
    
 
    </br> 
 
    </br> 
 
    
 
</body> 
 
</html>

Edit: juste remarqué mon pied droit d'auteur est baisait avec elle, mais ne sais pas pourquoi ...

Source

2017-01-28 FGOD

Votre corps n'est pas réglé à 100%

body { 
height: 100%; 
}

Source

2017-01-28 12:38:21 Omnitored

Comme je l'ai dit, il a été réglé à 100% mais cela n'a pas aidé alors je l'ai mis à la hauteur maximale de l'image de fond qui n'a pas changé une chose ... – FGOD

N Evermind, a trouvé le problème moi-même :) J'ai mis un fond de rembourrage pour le pied de page qui faisait cela. Sans cela, je fonctionne comme un charme :)

Source

2017-01-28 12:42:17 FGOD

Pourquoi ma page affiche-t-elle une partie blanche en bas de l'écran en mode portrait?

Répondre

Questions connexes