css在頁腳上方增加空格

我使用html的CSS代碼我想在頁腳上方添加空格，因爲我的表格直接粘貼到頁腳。css在頁腳上方增加空格

請確保每次我添加表空間應該在那裏。表和頁腳之間。

你可以在http://jsfiddle.net/hadinetcat/E8jd3/6/

CSS代碼

<style type='text/css'> 



.container3 { 
float:left; 
width:100%; 
/*background:green;*/ 
overflow:hidden; 
position:relative; 
} 
.container2 { 
float:left; 
width:100%; 
background:#FFA500; 
position:relative; 
right:45%; 

} 
.container1 { 
float:left; 
width:100%; 
/*background:red;*/ 
position:relative; 
right:40%; 
} 

.col1 { 
float:left; 
width:26%; 
position:relative; 
left:87%; 
overflow:hidden; 
height:570px; 

} 

.col2 { 
float:left; 
width:50%; 
position:relative; 
left:90%; 
overflow:hidden; 

} 

.col3 { 
float:left; 
width:26%; 
position:relative; 
left:80%; 
overflow:hidden; 

} 

.footer { 
     border:1px solid orange; 
     position: relative; 
     padding:0px; 
     margin-top:-5px; 
    font-size:15px; 


    } 


.signout { 
position:  absolute; 
width:   200; 
bottom:   150px; 
left:   5px; 
clear: both; 
font-size:20px; 
text-align:center 
} 

</style>

HTML查看我的代碼

<div id="header" style="background-color:#FFA500;"> 

<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1> 

<div class="container3 "> 
<div class="container1 "> 
<div class="container2 "> 


<div class="col1"> 

lalalallalalalallala <br /> 
lllllllllllllllllllll <br /> 

</div> 


<div class="col2"> 

<div align="center"> 
     <H2 align="center"> Report Table</H></div> 

<table border="1" align="center"> 
     <tr> 
       <td><b>Name</b></td> 
       <td><b>Mime</b></td> 
       <td><b>Size (bytes)</b></td> 
       <td><b>Created</b></td> 
       <td><b>Download</b></td> 
      </tr> 




      <tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 

<tr> 
       <td>eu contres.txt</td> 
       <td>text/plain</td> 
       <td>546</td> 
       <td>2013-08-22 00:06:55</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td> 
      </tr> 

<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
<tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 
</table> 

</div> 

<div class="col3"> 

</div> 

</div> 

</div> 

<div class="signout"> 

<a style='text-decoration:none;' href= "index.html">Sign Out </br></a> 

</div> 

<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 
Copyright © balhalfe services 20103-2014</div> 

</div>

來源

2013-10-06 hadi

給您的頁腳積極'保證金top'。 –

基於你的JsFiddle，我只是在你的'.footer'中添加一些'padding-top'。 –

http://jsfiddle.net/E8jd3/11/ –

這裏被更新fiddle

在CSS中添加一些像素到表margin-bottom。

例如

table{ 
    margin-bottom:60px; 
}

來源

2013-10-06 19:39:00

不要碰任何東西，只是在.col2

添加

.col2是你的身體表容器

試試這個：

.col2 { 
    float: left; 
    width: 50%; 
    position: relative; 
    left: 90%; 
    overflow: hidden; 
    padding-bottom: 20px; 
}

New Demo

來源

2013-10-06 19:38:40

請用JSfiddle來演示，因爲這似乎不能基於OP的示例工作。 –

你的代碼工作正常 - 只需添加這個'margin-top：15px; font-size：15px; float：left; 寬度：100％;' –

@Paulie_D，當我添加你的代碼它接縫左側酒吧從頁腳拆分..col1 – hadi

給予更大的餘量，以您的頁腳這樣

.footer { 
    border:1px solid orange; 
    position: relative; 
    padding:0px; 
    margin-top:20px; 
    font-size:15px; 
}

來源

2013-10-06 19:38:55

css在頁腳上方增加空格

回答

相關問題