2014-05-12 2 views
-2

HTML 배경과 본문 배경을 다르게 사용하려고합니다. 바디 컬러를 사용하면 인덱스 페이지의 전체 페이지를 커버하지 못합니다. 그러나 그것은 다른 페이지를 위해 일하고 있습니다!본문 배경에 전체 페이지 채우기가 없습니다.

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

CSS 코드가 여기에 있습니다 : :

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

나에게이 일어나는 이유 해결책을주십시오 여기 내 코드입니다. http://cst2309.hostei.com/

당신이 몸에 마진 15 픽셀을 준 때문에 이런 일이

+0

당신은 바이올린 링크를 보낼 수 있습니까 ?? – Manjuboyz

+1

문제를 반복하는 지루한 작업입니다. 적어도 그것을 ** [Fiddle **] (http://jsfiddle.net/) 또는 [** Bin **] (http://jsbin.com/)로 반영하고 반영하십시오. – Shubh

+0

여기 내 프로젝트를위한 링크입니다 : http://cst2309.hostei.com/ – user3314714

답변

1

감사합니다 : 여기

은에 당신이 볼 수있는 링크입니다. 몸에 여백이나 패딩을주지 마십시오. 대신 안쪽 여백에 여백과 여백을 둡니다.

+0

여백을 사용하지 않으면 body.nt는 화면의 한가운데 머물러 있습니다. 여백은 있지만 아무 것도 시도하지 않았습니다. – user3314714

+0

시도해보십시오. . div를 body의 바로 뒤에 생성하고,이 div에 모든 것을 포함 시키십시오.이 CSS 마진을 적용하십시오. 0 auto; 이게 효과가있다. 몸 너비를 제거하고이 div에 지정합니다. 또한이 div에 배경색을 부여하지 않습니다. –

0

닫는 태그가 없습니다. 브라우저가 모든 기본 태그에 대해 태그를 생략하려고 시도 할 때 이러한 경우가있을 수 있습니다. 이 중 하나를 시도하십시오 :

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

내가 편집 한 mypost 조금. 문제는 페이지가있는 바닥 글을 추가 할 때 시작됩니다. 이 링크 http://cst2309.hostei.com을보십시오. – user3314714

관련 문제