2015-09-06 175 views
0

我是初學者,爲什麼我有黑色空間底部的頁面我如何刪除它,margin-bottom不起作用,我的意思是當你向下滾動那裏是我想要的黑色空間即將被刪除 。 如果有人複製此它並不重要:dmargin-bottom或padding-bottom不工作

< !DOCTYPE html> 
< html lang="en"> 
    < head> 
     < meta charset="utf-8" /> 
     < title> HTML5 Only Test Case&#8212; Accessible Culture 
< /title> 
     < !--[if IE] > 
< script src="/js/html5.js"> 
< /script><![endif]--> 
     < style> 
.all{ 
     font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-size:12px; 
     color:#fff; 
     margin: auto ; 
     padding-top:30px; 
     position:relative; 
     height:2100px; 
     border: 1px solid red; 
     width:1050px; 
     background-color: #090909; 
     margin-top:25px; 
     margin-bottom:0px; 
     } 


.backgroound{ 
     padding:0px; 
     position:relative; 
     background-color: gray; 
     border: 1px solid gray; 
     width:985px; 
     margin-top:-23px; 
     height:1929px; 
     background-size:cover; 
     margin: auto auto auto auto 10px; 
     } 
.foooter{ 
    padding-top:30px; 
    padding-bottom:50px; 
    position:relative; 
    text-align:center; 
    width:1052px; 
    background-color:red; 
    margin: auto; 
    margin-top: -100px; 
    right:0px; 
}.paa{ 

    background-color:black; 
    font-size:40px; 
    position:relative; 
    border: 1px solid gray; 
    padding: 0px; 
    text-align:center; 
     height:80px; 
     margin-top:-30px; 
    } 
.paa img{ 
    position:absolute; 
    height:75px; 
    width:210px; 
    top:3px; 
    left:260px; 
    padding:0px; 
    margin:0px; 
}ul{ 
border: 1px solid gray; 
width:99.89%; 
position:relative; 
top:-10px; 
padding:0px; 
background-color:white; 
} 
ul li, a { 
display:inline-block; 
} 
#home { 
text-decoration:none; 
} 
#music { 
text-decoration:none; 
} 
a.vari:hover { 
    background-color: lightgray; 
}a.vari:active { 
    color: aliceblue; 
} 
#memberlist_links a{ 
float:right; 
position:relative; 
top:-1800px; 
padding:0px; 
color:white; 
margin:0px; 
right:40px; 
} 
#browsebyartist{ 
float:right; 
position:relative; 
top:-2100px; 
font-size: 10px;  
font-weight: bold;  
padding:0px; 
margin:0px; 
right:10px; 
} 
.paneelinpaa{ 
border:1px solid black; 
background-color:lightblue; 
width:500px; 
height:250px; 
} 
.paneelinvartalo{ 
border:1px solid black; 
background-color:lightblue; 
margin-top:0px; 
padding:15px; 
height:200px; 
width:200px; 
} 
body{ 
height: 2100px; 
background-color:black; 
} 
< /style> 
< /head> 
<body> 
< div class="all"> 
    < header class="paa"> 
     < a href="http://www.cc.puv.fi/~e1401168/boilerplate2.html"> 
< img src="loggo.jpg" alt="loggo"> 
< /a> 
    < /header> 
< nav> 
    < ul> 
    < li> 
< a class="vari" href="http://www.cc.puv.fi/~e1401168/boilerplate2.html" id="home" > 
<span>Home 
< /span> 
< /a> 
< /li> 
    < li> 
< a class="vari" href="#" id="music">Music videos < /a> 
< /li> 
    < /ul> 
< /nav> 
< div class="backgroound"> 
    < div id="panel2" class="paneelinpaa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pää 
    < /div> 
< div id="panel1" class="paneelinvartalo">vartalo 
< /div> 
< /div> 
< div id="memberlist_links"> 
    < a href="#"> # 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel1">A 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel2">B 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel3">C 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel4">D 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel5">E 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel6">F 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel7">G 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel8">H 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel9">I 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel10">J 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel11">K 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel12">L 
< /a> 
<br> 
< a href="'#" rel=""class="nappulat" data-panelid="panel13">M 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel14">N 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel15">O 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel16">P 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel17">R 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel18">S 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel19">T 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel20">U 
< /a> 
<br> 
< a href="#" rel="" class="nappulat" data-panelid="panel21">V 
< /a> 
< br> 
<a href="#" rel="" class="nappulat" data-panelid="panel22">W 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel23">X 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel24">Y 
< /a> 
< br> 
< a href="#" rel="" class="nappulat" data-panelid="panel25">Z 
< /a> 
< /div> 

      < div id="browsebyartist"> 
< br> 
      B< br> 
      r< br> 
      o< br> 
      w< br> 
      s< br> 
      e< br> 
      < br> 
      B< br> 
      y< br> 
      < br> 
      A< br> 
      r< br> 
      t< br> 
      i< br> 
      s< br> 
      t< br> 

      < /div> 
< /div> 
< footer class="foooter" > 
Made by 
< /footer> 
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
< /script> 
< script> 
$(function(){ 
$('.nappulat').on('click',function(p){ 
// koska href="#" painaessa skrolla sivua ylös .preventDefault pysäyttää sen 
     p.preventDefault(); 
    var panelid =$(this).attr('data-panelid'); 
    $('#'+panelid).toggle(1); 
      }); 
    }); 
< /script> 
    < /body> 
< /html> 
+0

請編輯你的問題(和小提琴將是偉大的!),所以我們可以真正閱讀這個。 –

+0

不能你只是複製我的代碼,並看到 – waleedd32

+1

這是不正確的方式來從其他人的答案..再次,請編輯您的問題,所以我們**希望**來幫助你.. –

回答

0
  1. 您需要設置.memberlist_linksposition:absolute,所以它不會「佔地方」在文檔中。無論如何,無論如何都需要絕對放在父母.all的右側和中間位置。
  2. #browsebyartist做同樣的事情。

當然,有了這些變化,您將需要從頭開始修復位置,但是您別無選擇。如果您將位置設置爲relative,則此元素將在文檔中進行並顯示這些空格。

+0

謝謝你的回答,但我不知道什麼時候使用絕對和當相對,現在我改變了絕對但有一個文本消失了,正如你所看到的那樣 – waleedd32

+0

你必須知道如何使用css'position',否則你會一直有問題。請閱讀http://www.w3schools.com/css/css_positioning.asp,如果您有任何疑問,我們將很樂意爲您提供幫助。 –

+0

好的謝謝,我會讀它:D – waleedd32