2015-12-21 116 views
0

我有一個很大的白色空格,它將我的最後一個div放到頁面底部。我不想將頁面延長很遠,這就是我正在構建的頁面(www.theoriginalbeng.com)。笨重和DIV:4個球我最後兩個div之間的空白區域

我的HTML是:

<!DOCTYPE html> 
<html> 

<head> 
    <link href="main.css" rel="stylesheet"> 
    <title> TJ Sports </title> 
</head>  

<body> 
    <div class="content"> 

     <div class = "title"> 
      <div class="container"> 
      <a href = "http://www.theoriginalbeng.com"> TOEJAM SPORTS </a> 
      <p>Be The Best: On and Off the Field</p> 
      </div> 
     </div> 


     <div class="nav"> 
       <div class="container"> 
        <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Search</a></li> 
       </ul> 
      </div> 
     </div> 


     <div class="bulky"> 
      <div class="Container"> 

        <p>Give it some sort of inspiring text to make a purchase here</p> 

         <a href="#" class="button">Buy</a> 
         <a href="#" class="button">Sell</a> 

      </div> 
     </div> 

     <div class="4 Balls"> 
      <div class="Container"> 
      <img src="/Balls/Baseball.jpeg"> 
      <img src="/Balls/basketball.jpeg"> 
      <img src="/Balls/americanFootball.jpeg"> 
      <img src="/Balls/Puck.jpeg"> 
      </div> 
     </div> 

     <div class="footer"> 
      Copyright © theoriginalbeng.com 
     </div> 

    </div> 
</body> 
</html> 

我的CSS是:

.content { 
    width: 80%; 
    margin: 0 auto; 
} 

.title { 
    text-align: center; 
    font-weight: bold; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    padding-left: 10px; 
    padding-right: 10px; 
    text-transform: uppercase; 
    background-image: url('http://www.fantasyspecialist.com/wp-content/uploads/2010/05/fantasy-football-email.jpg'); 
    background-size: 100% auto; 

} 

.title a { 
    color: #3399ff; 
    font-size: 100px; 
    text-decoration: none; 
} 


.nav ul { 
    list-style-type: none; /* Removes bullet Points */ 
    margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/ 
    padding: 0; /*this and margin above even up everything*/ 
    overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */ 
    background-color: #333; 
} 

.nav ul li { 
    float: left; /*This puts all ul li items in a line */ 
} 

.nav ul li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 


.bulky { 
    background-image: url('Sidelines.jpeg'); 
    background-size: 100% auto; 
    height: 6000px; /* stretches image downwards*/ 
    background-repeat: no-repeat; 
    /*padding-top: 14px; */ /* All paddings add to point that there will be no white spacing between this image and the nav bar */ 
    /*padding-bottom: 14px;*/ 
    /*padding-left: 10px;*/ 
    /*padding-right: 10px;*/ 
    /*margin:0; */ 
    /*padding:0;*/ 
    color: white; 

} 

.bulky ul li { 
    float: left; /*This puts all ul li items in a line */ 
    margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/ 
    padding: 14px 16px; /*this and margin above even up everything*/ 
    overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */ 

} 

.button { 
    background-color:#44c767; 
    -moz-border-radius:28px; 
    -webkit-border-radius:28px; 
    border-radius:28px; 
    border:1px solid #18ab29; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 

.button:hover { 
    background-color:#5cbf2a; 
} 
.button:active { 
    position:relative; 
    top:1px; 
} 

.4 Balls { 
    float: right; 
} 

.footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px; 
} 

任何幫助將是宏偉

+0

我不確定你在問什麼。 – Draco18s

+0

附上它是什麼和你想要的東西的截圖可能是一個好主意。 – miqdadamirali

+0

謝謝。原來,我把背景的圖像拉伸到了6000,如果我把它減少到500,它就給了我更接近我要找的東西。 –

回答

0

你可以用」格之間發生的間隔t在css類名中有一個空格。 4球無效。嘗試使用FourBalls代替

1

那麼造成'問題'的高度就在你的CSS中陳述的類龐大。您將高度設置爲6000px。

+0

那也是:) 6000像素是6000像素! –