ページの先頭でdivをフラッシュできない

ラッパーdivがページの一番上にくるようにするのに問題があります。私はボディマージン/パディングを0に設定しました。また、ラッパーdivの上マージンをゼロに設定しました。ページの先頭でdivをフラッシュできない

CSS：

body { 
    font-family: Helvetica, sans-serif; 
    background-image:url('../images/bg1.jpg'); 
    padding:0px; 
    margin:0px; 
} 

#ratio{ 
    text-align: center; 
} 

div#nav { 
    text-align: center; 
    margin: 0; 
} 

#nav img{ 
    padding: 5px 40px 20px 40px; 
} 

#task_table{ 
    width: 775px; 
    table-layout: fixed; 
    text-align: left; 
    font-size: 12px; 
    border-collapse:collapse; 
} 

#task_table td{ 
    border-bottom: 1px solid black; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#task_table td:first-child{ 
    width: 220px; 
    padding-left: 15px; 
} 

#task_table td:nth-child(2){ 
    width:70px; 
    padding-left: 20px; 
} 

#task_table td:nth-child(3){ 
    padding-left: 25px; 
} 

#task_table td:nth-child(4){ 
    text-align:right; 
    padding-right: 15px; 
} 

#wrapper { 
    width: 775px; 
    margin: 0 auto; 
    background-color: #fff; 
    margin-top:0px; 
} 

#datecaption { 
    font-size: 10px; 
    padding-left: 15px; 
    padding-bottom: 5px; 
} 

#hourscaption { 
    font-size: 10px; 
    padding-left: 195px; 
} 

#taskcaption { 
    font-size: 10px; 
    padding-left: 30px; 
} 

#taskbar { 
    background: #CCCCCC; 
    padding: 15px; 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
} 

#task_text { 
    margin-left: 20px; 
    width: 330px; 
} 

#hours_text { 
    margin-left: 20px; 
    width: 50px; 
} 

.delete, .successful, .unsuccessful { 
    padding: 0px 4px 0px 4px; 
}

HTML：

<body> 

    <div id="wrapper"> 

     <div id="nav"> 

      <a href="index.php"><img src="images/tab1.jpg" class="navimg" id="tab1"/></a> 

      <a href="completed.php"><img src="images/tab2.jpg" class="navimg" id="tab2"/></a> 

      <a href="failed.php"><img src="images/tab3.jpg" class="navimg" id="tab3"/></a> 

     </div> 

     <span id="datecaption">DATE</span> 

     <span id="hourscaption">HOURS</span> 

     <span id="taskcaption">TASK</span> 

      <form action="index.php" method="POST" style="margin:0;padding:0;" id="submit"> 

     <div id="taskbar"> 

       <select name="month" id="monthDD"><option>January</option><option selected="selected">February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select><select name="day" id="dayDD"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option selected="selected">14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select>    <select name="year" id="yearDD"> 

        <option>2012</option> 

        <option>2013</option> 

        <option>2014</option> 

       </select> 



       <input type="text" name="hours" id="hours_text" /> 

       <input type="text" name="task" id="task_text" /> 

       <input type="Submit" value="Add Task" style="margin-left: 20px;" /> 

     </div></form> 



     <table id="task_table"><tr id="row157"><td>February 14, 2012</td><td>0</td><td>Read</td><td><a href=""><img src="images/trash.png" class="delete" name="157"></a> 

      <a href=""><img src="images/delete.png" class="failed" name="157"></a> 

      <a href=""><img src="images/check.png" class="successful" name="157"></a></td></tr><tr id="row158"><td>February 14, 2012</td><td>1</td><td>Work on tasks project</td><td><a href=""><img src="images/trash.png" class="delete" name="158"></a> 

      <a href=""><img src="images/delete.png" class="failed" name="158"></a> 

      <a href=""><img src="images/check.png" class="successful" name="158"></a></td></tr></table>  



    </div> 

</body>

誰もがアップ何を知っていますか？ありがとう。

これはjsFiddleで機能しているようです。 http://jsfiddle.net/jsNS8/

出典

2012-02-14 Tim Aych

PHPソースではなく、生成されたHTMLを投稿してください。 – Blender

[jsfiddle]（http://jsfiddle.net）を作って、一種のライブの例を見ることができますか？ – Hersha

これは現在ライブですか？もしそうならリンクを得ることができますか？ – James

私はposition:absolute属性を使用します。 '#nav IMG'

、この要素の愛情親要素の高さのパディング：

#wrapper 
{ 
position:absolute; 
top:0px 
}

出典

2012-02-14 15:11:24 CoffeeRain

終了しました： 'position：absolute; \t top：0px; \t権利：0; \t左：0; \t余白：0自動; 'それを解決する。ありがとう。 –

それは私はあなたが効果的にすべてのボディ要素が含まれているリセットしてきたようにCSSのリセットファイルが答えだとは思わない

出典

2012-02-14 14:51:41 kolin

これはおそらくコメントでなければなりません。彼らが投票することができるので、不要な答えを入れることに注意してください。 – CoffeeRain

を助けている場合あなたがあなたのCSSを入れて見る前に、CSSのリセットファイルを使用し

#nav要素の上に余白がありますか？これは＃ラッパーと重なり、ページの上部に隙間ができます。私は代わりにそのようなインスタンスのためにパディングを使用する傾向があります。

これがあなたのために解決することを願っています！

出典

2012-02-14 14:53:20 Chris

いいえ、nav divに余裕はありません。私は完全なCSSを投稿しようとしています。 –

は、要素を調整/削除してみてください。

あなたが何をしようとしているのか、間違っているのかを正確に説明できますか？

出典

2012-02-14 15:17:42 rjmateus

ページの先頭でdivをフラッシュできない

答えて

関連する問題