空間

2013-08-28 14 views
0

確定,所以我一直想和seraching論壇,以瞭解我可以得到例如擺脫我的div之間的空間空間

http://i.imgur.com/7kqCvQa.png?1(我的網站現在)我想去掉頁腳之間的空間與免責聲明

我的HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Testimonials</title> 
     <link rel="stylesheet" type="text/css" href="css.css" 
     /> 
     <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' 
     type='text/css'> 
    </head> 

    <body> 
     <!-- HEADER --> 
     <center> 
      <div id="header"></div> 
      <table width="70%" bgcolor="#FFFFFF"> 
       <tr> 
        <td width="40%"> 
         <img src="images/woodslandscapinglogo2.jpg" width="400" height="124" alt="woods landscaping logo"> 
        </td> 
        <td width="60%"></td> 
       </tr> 
      </table> 
      </div> 
     </center> 
     <!-- END OF HEADER --> 
     <!-- NAV BAR --> 
     <div id="container"> 
      <ul id="nav"> 
       <li class="active"><a href="contactus.html"><span>Contact us</span></a> 
       </li> 
       <li><a href="testimonials.html"><span>Testimonials</span></a> 
       </li> 
       <li><a href="gallery.html"><span>Gallery</span></a> 
       </li> 
       <li><a href="aboutus.html"><span>About us</span></a> 
       </li> 
       <li class="last"><a href="woodslandscaping.com.au"><span>Home</span></a> 
       </li> 
      </ul> 
     </div> 
     <!-- END OF NAV BAR --> 
     <!-- CONTENT --> 
     <div id="secondcontainer"> 
      <div id="content" style="width:60%;height:500px;float:left;"> 
       <center> 
        <h2>About us</h2> 

        <hr> 
        <h4>Here at Woods Landscaping, We provide the highest quality landscapes with all the newest and most efficient techniques. There is no job that is too big or small for us, as we have done large areas of schools, to just front and backyards and we do this at great affordable prices. 
    We can provide a range of landscapes that can include: 
    <ul><li>Paving</li> 
    <li>Decking</li> 
    <li>Retaining walls</li> 
    <li>Water Features</li> 
    <li>Irrigation</li> 
    <li>Instant Turf</li> 
    <li>Synthetic Turf</li> 
    <li>Garden Lighting</li> 
    <li>Rock Walls</li> 
    <li>Earth Works</li> 
    <li>Concreting</li> 
    <li>General Soft Landscaping</li> 
    <li>Maintenance Service</li></ul> 
    So take your pick and call now for a free quote! 
    Remember, there is no job too big or small that we can’t handle. 
    </h4> 
      </div> 
      <div id="images" style="width:40%;height:500px;float:left;"> 
       <img src="images/brighton-1.JPG" alt="" width="298" height="172"> 
       <img src="images/croydon-2.JPG" alt="" width="298" height="172"> 
      </div> 
     </div> 
     <!-- END OF CONTENT --> 
     <!-- FOOTER --> 
     <div id="footer" style="height:30px;"> 
      <h3><br> 
    Ferntree gully 3156 VIC // abn. 47402024689 // p. 043 359 7007 // e. [email protected]</h3> 
     </div> 
     <!-- END OF FOOTER --> 
     <!-- DISCLAIMER --> 
     <div id="disclaimer" style="height:20px;"> 
      <h5><br>© 2013 Woods Landscaping, Inc. All rights reserved. &nbsp;&nbsp;&nbsp;</h5> 
     </div> 
     <!-- END OF DISCLAIMER --> 
    </body> 

</html> 

和我的CSS

@import url(http://fonts.googleapis.com/css?family=Capriola); 
body 
{ 
    margin-left:auto; 
    margin-right:auto; 
    margin: 0 0 10px; 
    background-image:url('images/background.jpg'); 
} 
h1 
{ 
    /* main grey heading*/ 
    font size: 15pt; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    color:#999999; 
    text-align: left; 
} 
h2 
{ 
    /* main gray heading*/ 
    font-size: 15pt; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    color:#999999; 
    text-align: left; 



} 
h3 
{ 
    /* smaller footer writing*/ 
    font-size: 6pt; 
    font-weight: 400; 
    font-family: 'Droid Sans', sans-serif; 
    color:#4D4D4D; 
    text-align: center; 
} 
h4 
{ 
    /* main writing*/ 
    font-size: 10pt; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-weight: 400; 
    color:#999999; 
    text-align: left 

} 
h5 
{ 
    /* smaller disclaimer writing*/ 
    font-size: 6pt; 
    font-weight: 400; 
    font-family: 'Droid Sans', sans-serif; 
    color:#999999; 
    text-align: right; 
} 
td 
{ 
vertical-align:bottom;text-align:left; 
} 
#header 
{ 
    width: 70% ; 
    background-color:#FFF; 

} 
#nav { 

    width: 100%; 
    float: right; 
    list-style: none; 
    background-image: url('images/linkbar.png'); 
    } 
#nav li { 
    float: right; 
    padding-right: 40px; } 

#nav li a { 
    display: block; 
    padding: 8px 15px; 
    color:#ffffff; 
    font-family:Trebuchet MS, "Helvetica", sans-serif; 
    font-size: 0.75em; 
    text-align: ; 
    text-decoration: none; 
     } 
#nav li a:hover { 
     color:#17AF49; 
     background-color: #ffffff; 
     } 
#container{ 
    width:70%;margin:0 auto;text-align:center; 
    } 

#secondcontainer{ 
    width:70%;margin:0 auto;text-align:center; 
    background-color: #ffffff; 
    } 

#content 
{ 
    width: 60%; 
    margin-left: auto ; 
    margin-right: auto ; 
    margin-top:0; 
    background-color:#FFF; 
} 
#images 
{ 
    width: 40%; 
    margin-left: auto ; 
    margin-right: auto ; 
    margin-top:0; 
    background-color:#FFF; 
} 

#footer { 
    background-color:#808080; 
    width: 70%; 
    margin-left: auto ; 
    margin-right: auto ; 
    clear:both; 
    text-align:center; 
} 
#disclaimer { 
    background-color:#4D4D4D; 
    width: 70%; 
    margin-left: auto ; 
    margin-right: auto ; 
    clear:both; 
    text-align:center; 
} 



</style> 
+3

您的網站截圖超小。將其重新上傳到imgur。 – hresult

+0

您是否嘗試在免責聲明中使用margin-top:-1em(或任何負值) –

+0

如果將css中的#disclaimer和#footer中的保證金聲明更改爲「margin:0 auto」,會發生什麼情況?另外:對常規內容使用標題標記是個好主意。這就是段落的用途。 – DiMono

回答

0

您必須將margin:0設置爲您的H3和H5標籤,並使用邊距屬性將您的標頭放在div中。

此外,使用<br>插入空格有點不好。瀏覽器不會將相同的大小添加到由此標記插入的新行中,並且結果可能很亂。

1

的空間來自於#disclaimer<h5>標籤添加一個預設保證金,添加到你的CSS哪個瀏覽器

#disclaimer h5{ 
    margin: 0; 
} 
+0

+1隊友標題標籤中的頁邊距,但是隻是製作'margin-top:0px;'不是更好嗎?以防萬一需要其他利潤。 – Harry

+1

@Harry將頂部和底部都設置爲0可能會更好,那些是瀏覽器添加的,在這種情況下,我沒有注意到OP在標題上有任何保證金聲明,所以我認爲這不會是一個問題 –

0

嘗試設置

h5 
{ 
-webkit-margin-before: 0px; 
} 
0

您可以取下頂部/ h3h5的底部邊距分別在footerdisclaimer之間:

#footer h3, #disclaimer h5 { 
    margin:0 auto; /* auto reflects the settings you've already defined */ 
} 

問:您是否考慮過重構HTML以使其更加標準友好且跨瀏覽器一致?