2014-05-12 9 views
-2

J'essaie d'utiliser l'arrière-plan html et le fond du corps comme différents. Lorsque j'utilise la couleur du corps, elle ne couvre pas la page entière de la page d'index. Cependant, cela fonctionne pour d'autres pages! voici mon code:Le fond du corps ne remplit pas la pleine page

 <!DOCTYPE html> 
    <html lang="en"> 
<head> 
    <meta charset = "UTF-8"> 
    <title>Welcome to NY All STAR's offical website</title> 
    <meta name ="Description" content="NYAS"> 
    <meta name="Description" content = "A_New_York_based_cricket_club"> 
    <meta name="tag" content ="NYPCL,nyas"> 
    <meta name ="tag" content="cricket"> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
    <link rel="stylesheet" type="text/css" href="home.css"> 


</head> 

    <body> 

    <header> 
    <img src="images/logo.png" width=1200 height=300 alt="All star"> 
    </header> 
    <br> 
    <nav class="navv"> 
     <ul class="nav-list"> 
     <li id="current" class="nav-item"><a href="index.html">HOME</a> 
     </li> 
     </ul> 

     <ul class="nav-list"> 
      <li class="nav-item"><a href="#">PLAYERS</a> 
       <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="abir.html">Abir Khan</a></li> 
       <li class="nav-submenu-item"><a href="afzal.html">Afzal Hossain</a> </li> 
       <li class="nav-submenu-item"><a href="polash.html">Ashfaqur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="ashraf.html">Ashrafur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="azad.html">Azad Ahmed</a></li> 
       <li class="nav-submenu-item"><a href="jibran.html">Jibran Khan</a></li> 
       <li class="nav-submenu-item"><a href="junayed.html">Junayed Ahmed</a></li> 
       <li class="nav-submenu-item"><a href="korban.html">Korban Ali</a></li> 
       <li class="nav-submenu-item"><a href="shaikot.html">MD. Shaikot Alom</a></li> 
       <li class="nav-submenu-item"><a href="tanmoy.html">MD Tanmoy Hossain</a></li> 
       <li class="nav-submenu-item"><a href="suleman.html">Mohammed Suleman</a></li> 
       <li class="nav-submenu-item"><a href="monju.html">Monirul Haque</a></li> 
       <li class="nav-submenu-item"><a href="monju.html">Monjur Hussain</a></li> 
       <li class="nav-submenu-item"><a href="maju.html">Muazam Hussain</a></li> 
       <li class="nav-submenu-item"><a href="mustafizur.html">Mustafizur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="pervej.html">Pervej Rahman</a></li> 
       <li class="nav-submenu-item"><a href="prashant.html">Prashant Nair</a></li> 
       <li class="nav-submenu-item"><a href="shuvo.html">Rakib Shuvo</a></li> 
       <li class="nav-submenu-item"><a href="sami.html">Sami Chowdhury</a></li> 
       <li class="nav-submenu-item"><a href="sanjil.html">Sanjil Chowdhury</a></li> 
       <li class="nav-submenu-item"><a href="saqif.html">Saqif Haider</a></li> 
       </ul> 
      </li>  
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="news.html">NEWS</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="schedule.html">SCHEDULE</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="result.html">RESULT</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="stats.html">STATS</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="#">MEDIA</a> 
      <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="?=submenu-1">PHOTO</a></li> 
       <li class="nav-submenu-item"><a href="?=submenu-2">VIDEO</a></li> 
      </ul>  
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="links.html">LINKS</a> 
     </li> 
     </ul> 

     <ul class="nav-list"> 
     <li class="nav-item"><a href="#">LIVE STREAM</a> 
      <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="livecricket.html">LIVE CRICKET</a></li> 
       <li class="nav-submenu-item"><a href="banglaradio.html">LIVE RADIO</a></li> 
      </ul>  
     </li> 
     </ul> 

     <ul class="nav-list"> 
     <li class="nav-item"><a href="about.html">ABOUT US</a> 
     </li> 
     </ul>  

<aside > 
    <div class="widget" > 
    <p><script type="text/javascript" src="http://voap.weather.com/weather/oap/USNY0996?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script></p> 
    </div> 
</aside> 

      <!--Beginning of photo Slideshow --> 
    <div class ="left"> <!--bordered slideshow here--> 

    <ul class="slides"> 
    <input type="radio" name="radio-btn" id="img-1" checked /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_1.jpg" /> 
     <div class="caption"> 
    <h2>T-20 Champion 2013</h2> 
    </div> 
    </div> 
    <div class="nav"> 
     <label for="img-6" class="prev">&#x2039;</label> 
     <label for="img-2" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-2" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_2.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-1" class="prev">&#x2039;</label> 
     <label for="img-3" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-3" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_3.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-2" class="prev">&#x2039;</label> 
     <label for="img-4" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-4" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_4.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-3" class="prev">&#x2039;</label> 
     <label for="img-5" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-5" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_5.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-4" class="prev">&#x2039;</label> 
     <label for="img-6" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-6" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_6.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-5" class="prev">&#x2039;</label> 
     <label for="img-1" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <li class="nav-dots"> 
    <label for="img-1" class="nav-dot" id="img-dot-1"> 
    </label> 
    <label for="img-2" class="nav-dot" id="img-dot-2"> 

    </label> 
    <label for="img-3" class="nav-dot" id="img-dot-3"> 
    </label> 
    <label for="img-4" class="nav-dot" id="img-dot-4"> 
    </label> 
    <label for="img-5" class="nav-dot" id="img-dot-5"> 
    </label> 
    <label for="img-6" class="nav-dot" id="img-dot-6"> 
    </label> 
    </li> 
    </ul> 
    </div> 

    <!--End of Photo Slideshow --> 

    <br> 
<section > 
    <div class="welcome"> 
    <h3>Welcome to NYAS</h3> 
    <p> 
     <em>NY All STAR</em> is a cricket club which is made up of young      cricketers 
     who are highly determined and focused in their game. This club 
     joined BCANA League in 2011. 
    </p> 
    <p> In 2013, NY All STAR Participated in NYPCL and won the t20 first division league. They also became the League <b>Runners-up</b> of Division A. 
    </p> 
    </div> 
</section> 

<br> 
<footer> 
<!-- footer --> 

<div id="f" class="clearfix"> 
    <div class="col"> 
    <ul class="btm-left"> 
     <li><img src="images/logo.png" height="150" width="160"/></li> 
    </ul> 
    </div> 
    <div class="col"> 

     <ul class="btm-center"> 
      <li><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnyascc&amp;width=450&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=true&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:395px;" allowTransparency="true"></iframe></li> 
     </ul> 
    </div> 
    <div class="col"> 

    <ul class="btm-right"> 
     <li><b>Links</b></li> 
     <li><a href="#">HOME</a></li> 
     <li><a href="news.html">NEWS</a></li> 
     <li><a href="schedule.html">SCHEDULE</a></li> 
     <li><a href="result.html">RESULT</a></li> 
     <li><a href="stats.html">STATS</a></li> 
     <li><a href="#">PLAYERS</a></li> 
     <li><a href="links.html">LINKS</a></li> 
     <li><a href="livecricket.html">LIVE CRICKET</a></li> 
     <li><a href="banglaradio.html">LIVE RADIO</a></li> 
     <li><a href="about.html">ABOUT US</a></li> 
    </ul> 
    </div> 
</div> 
</footer> 
<!-- @end footer --> 

    </body> 

    </html> 

code Css est ici:

body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
border: 2px solid black; 
background: #F0F0F0; 
background-size: cover; 
    font-size: 87.5%; 
width: 1200px; 
margin-left: 15px; 
margin: 15px auto; 
padding: 15px 25px; 
display: block; 
border: 1px solid black; 
} 

S'il vous plaît me donner une solution pourquoi il se passe.

est un lien ici vous pouvez regarder dans: http://cst2309.hostei.com/

Merci

+0

pourriez-vous envoyer un lien de violon ?? – Manjuboyz

+1

C'est un travail fastidieux pour reproduire votre problème. Au moins, essayer et réfléchir en tant que [** Fiddle **] (http://jsfiddle.net/) ou [** Bin **] (http://jsbin.com/). – Shubh

+0

voici le lien pour mon projet: http://cst2309.hostei.com/ – user3314714

Répondre

1

Cela se produit parce que vous avez donné la marge 15px au corps. Ne pas donner de marge ou de rembourrage au corps. Au lieu de cela, donnez du rembourrage et de la marge aux éléments à l'intérieur.

+0

si je n'utilise pas de marge, alors le corps ne reste pas au milieu de l'écran. J'ai essayé sans marge mais rien de bon – user3314714

+0

essayez ceci .. créer un div juste après le corps, y inclure tout, à ce div appliquer cette css marge: 0 auto; cela devrait fonctionner. et aussi enlever la largeur du corps et le donner à cette div. et donne aussi la couleur de fond à cette div pas au corps. –

0

Vous n'avez pas d'étiquette de fermeture. Cela peut être le cas lorsque les navigateurs essaient de trouver une balise omettant pour chaque balise principale. Essayez celui-ci:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset = "UTF-8"> 
<title>Welcome to NY All STAR's offical website</title> 
<meta name ="Description" content="NYAS"> 
<meta name="Description" content = "A_New_York_based_cricket_club"> 
<meta name="tag" content ="NYPCL,nyas"> 
<meta name ="tag" content="cricket"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="home.css"> 


</head> 

<body> 

<header> 
<img src="images/logo.png" width=1200 height=300 alt="All star"> 
</header> 
<br> 
<nav class="navv"> 
<ul class="nav-list"> 
    <li id="current" class="nav-item"><a href="index.html">HOME</a> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="#">PLAYERS</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="abir.html">Abir Khan</a></li> 
      <li class="nav-submenu-item"><a href="afzal.html">Afzal Hossain</a> </li> 
      <li class="nav-submenu-item"><a href="polash.html">Ashfaqur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="ashraf.html">Ashrafur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="azad.html">Azad Ahmed</a></li> 
      <li class="nav-submenu-item"><a href="jibran.html">Jibran Khan</a></li> 
      <li class="nav-submenu-item"><a href="junayed.html">Junayed Ahmed</a></li> 
      <li class="nav-submenu-item"><a href="korban.html">Korban Ali</a></li> 
      <li class="nav-submenu-item"><a href="shaikot.html">MD. Shaikot Alom</a></li> 
      <li class="nav-submenu-item"><a href="tanmoy.html">MD Tanmoy Hossain</a></li> 
      <li class="nav-submenu-item"><a href="suleman.html">Mohammed Suleman</a></li> 
      <li class="nav-submenu-item"><a href="monju.html">Monirul Haque</a></li> 
      <li class="nav-submenu-item"><a href="monju.html">Monjur Hussain</a></li> 
      <li class="nav-submenu-item"><a href="maju.html">Muazam Hussain</a></li> 
      <li class="nav-submenu-item"><a href="mustafizur.html">Mustafizur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="pervej.html">Pervej Rahman</a></li> 
      <li class="nav-submenu-item"><a href="prashant.html">Prashant Nair</a></li> 
      <li class="nav-submenu-item"><a href="shuvo.html">Rakib Shuvo</a></li> 
      <li class="nav-submenu-item"><a href="sami.html">Sami Chowdhury</a></li> 
      <li class="nav-submenu-item"><a href="sanjil.html">Sanjil Chowdhury</a></li> 
      <li class="nav-submenu-item"><a href="saqif.html">Saqif Haider</a></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="news.html">NEWS</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="schedule.html">SCHEDULE</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="result.html">RESULT</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="stats.html">STATS</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="#">MEDIA</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="?=submenu-1">PHOTO</a></li> 
      <li class="nav-submenu-item"><a href="?=submenu-2">VIDEO</a></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="links.html">LINKS</a> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="#">LIVE STREAM</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="livecricket.html">LIVE CRICKET</a></li> 
      <li class="nav-submenu-item"><a href="banglaradio.html">LIVE RADIO</a></li> 
     </ul> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="about.html">ABOUT US</a> 
    </li> 
</ul> 
</nav> 
<aside > 
    <div class="widget" > 
     <p><script type="text/javascript" src="http://voap.weather.com/weather/oap/USNY0996?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script></p> 
    </div> 
</aside> 

<!--Beginning of photo Slideshow --> 
<div class ="left"> <!--bordered slideshow here--> 

    <ul class="slides"> 
     <input type="radio" name="radio-btn" id="img-1" checked /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_1.jpg" /> 
       <div class="caption"> 
        <h2>T-20 Champion 2013</h2> 
       </div> 
      </div> 
      <div class="nav"> 
       <label for="img-6" class="prev">&#x2039;</label> 
       <label for="img-2" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-2" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_2.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-1" class="prev">&#x2039;</label> 
       <label for="img-3" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-3" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_3.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-2" class="prev">&#x2039;</label> 
       <label for="img-4" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-4" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_4.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-3" class="prev">&#x2039;</label> 
       <label for="img-5" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-5" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_5.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-4" class="prev">&#x2039;</label> 
       <label for="img-6" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-6" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_6.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-5" class="prev">&#x2039;</label> 
       <label for="img-1" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <li class="nav-dots"> 
      <label for="img-1" class="nav-dot" id="img-dot-1"> 
      </label> 
      <label for="img-2" class="nav-dot" id="img-dot-2"> 

      </label> 
      <label for="img-3" class="nav-dot" id="img-dot-3"> 
      </label> 
      <label for="img-4" class="nav-dot" id="img-dot-4"> 
      </label> 
      <label for="img-5" class="nav-dot" id="img-dot-5"> 
      </label> 
      <label for="img-6" class="nav-dot" id="img-dot-6"> 
      </label> 
     </li> 
    </ul> 
</div> 

<!--End of Photo Slideshow --> 

<br> 
<section > 
    <div class="welcome"> 
     <h3>Welcome to NYAS</h3> 
     <p> 
      <em>NY All STAR</em> is a cricket club which is made up of young      cricketers 
      who are highly determined and focused in their game. This club 
      joined BCANA League in 2011. 
     </p> 
     <p> In 2013, NY All STAR Participated in NYPCL and won the t20 first division league. They also became the League <b>Runners-up</b> of Division A. 
     </p> 
    </div> 
</section> 

<br> 


</body> 

</html> 
+0

J'ai édité mypost peu. problème commence quand j'ajoute un pied de page avec la page. S'il vous plaît regardez ce lien http://cst2309.hostei.com – user3314714

Questions connexes