1. 首頁
  2. 問答
  3. HTML div忽略邊緣底部的div

HTML div忽略邊緣底部的div

2013-12-15 254 views
0

這有點令人困惑的解釋，但我會給它一個鏡頭。基本上，我在一頁上有3個'主'div。第一個是導航欄，第二個是搜索框，第三個是內容框。HTML div忽略邊緣底部的div

我希望他們是另一個下，所以navbar>搜索框>內容框。我遇到的問題是，當我將margin-top: 10px;設置爲內容框時，它直接位於導航欄下方，而不是搜索框。它似乎忽略了搜索框，我不能爲了工作而生活。我對這一切都很陌生，所以如果這是一個新手的錯誤，請耐心等待。

謝謝！

<body> 

<div id="navbar"> 
     <img class="navbar" src="images/homebutton.png" /> 
     <img class="navbar" src="images/e-3button.png" /> 
     <img class="navbar" src="images/resignedbutton.png" /> 
     <img class="navbar" src="images/firedbutton.png" /> 
     <img class="navbar" src="images/desertersbutton.png" /> 
     <img class="navbar" src="images/mosrosterbutton.png" /> 
     <img src="images/divider.png" /> 
     <p><script language="JavaScript">dT();</script></p> 
</div> 

<div id="search"> 
    <img src="images/logo.png" /> 
     <b><p>Search</p></b> 
     <form action="" id="search_habbo">    
      <input type="text" name="habbo_name" id="habbo_name" size="30" required> 
      <br> 
      <input type="submit" value="Search" name="send" id="send"> 
     </form> 
    <div id="search_results"> 
     <div id="loadingimage"> 
      <img src="images/ajax-loader.gif" /> 
     </div> 
    </div> 
</div> 
<div id="content"> 

</div> 
</body> 

#navbar { 
    background: url(images/navbarbg.png); 
    width: 100%; 
    height: 55px; 
    line-height: 20px; 
    margin: 0; 
    white-space: nowrap; 
    display: inline-block; 
} 

#search { 
    display: block; 
    width: 920px; 
    height: auto; 
    background: #fff; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
    padding: 5px; 
    position: absolute; 
    top: 65px; 
    left: 50%; 
    margin-left: -462px; 
    border-top-left-radius: 5px 5px; 
    border-top-right-radius: 5px 5px; 
    border-bottom-left-radius: 5px 5px; 
    border-bottom-right-radius: 5px 5px; 
    -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
    -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
    box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
} 



#content { 
     width: 920px; 
     height: auto; 
     margin-top: 10px; 
     background: #fff; 
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
     padding: 5px; 
     position: absolute; 
     left: 50%; 
     margin-left: -462px; 
     border-top-left-radius: 5px 5px; 
     border-top-right-radius: 5px 5px; 
     border-bottom-left-radius: 5px 5px; 
     border-bottom-right-radius: 5px 5px; 
     -moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
     -webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
     box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000; 
    }

來源

2013-12-15 user2547576

+2

你能粘貼你的HTML嗎？ – Andrew

回答

3

它忽略了搜索框，因爲你有這樣的＃內容

postion: absolute;

改變它

position: relative;

或添加類似

top: 40px;

來源

2013-12-15 21:57:14 CRABOLO

1

如果你只是希望他們一個在另一個之上，然後刪除這些代碼：

＃搜尋

position: absolute; 
top: 65px; 
left: 50%;

＃內容

position: absolute; 
left: 50%;

而且，爲什麼這些：

margin-left: -462px;

刪除那些過於

來源

2013-12-15 22:04:43 Andrew

相關問題

 相關問題