導航欄呈現在主容器上而不是上面

所以我有這個導航在移動設備和桌面上看起來不錯，因爲它調整得很好，因此我無法得到任何內容，然後直接跳到下面。如果我沒有設置padding-top之類的東西，導航欄上的main_container設置會在導航欄下呈現，因此不會被看到。導航欄呈現在主容器上而不是上面

我會設置padding-top屬性，但問題是，這將是一個移動以及桌面站點。設置padding-top屬性使移動中的頁面渲染與桌面非常不同。它在桌面上留下了更多的填充空間。

<div id="nav_cont"> 
    <ul id="nav"> 
    <?php 
     $count=0; 
     $count++; 
     ?> 
     <li><a href="index.php">Home</a></li> 
    <?php 
     $count++;?> 
     <li><a href="register.php">Register a New Store</a></li> 
    <?php 
     $count++;?> 
     <li><a href="new_mvi.php">Add Movie/Series/Game Titles</a></li> 
     <?php 
     $count++;?> 
     <li><a href="myorders.php">Orders</a></li> 
     <?php 
     $count++; 
     ?> 
     <li><a href="editmovies.php?id=<?php echo $storeid;?>">Edit Movie/Series/Game Titles</a></li> 
    <?php 
     $count++;?> 
     <li><a href="login.php">Login to your Store</a></li> 
    <?php 
     $count++;?> 
     <li><a href="cart.php">View Cart</a></li> 
    <?php 
     $count++;?> 
     <li><a href="logout.php">Logout</a></li> 
    <?php 
     $width=100/($count); 
    ?> 
    </ul> 
</div> 
<style> 

#nav li { 
    display: table-cell; 
    <?php echo "min-width: $width%; width: $width%; max-width: $width%";?>; 
    border-right: 1px solid #ccc; 
    text-align: center; 
} 
body { 
    font-family: 'Ubuntu', serif; 
    padding: 0px; 
    margin: 0px; 
} 
#nav_cont{ 
} 
#nav, #nav ul { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    float: left; 
    margin: 0 0 2em 0; 
    padding: 0; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    display:table; 
} 
#nav li:first-child { 
    border-left: 1px solid #ccc; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    max-height: 100%; 
    min-height: 100%; 
} 
body, div, table, tr, td, a { 
    padding: 0px; 
    margin: 0px; 
    background-color: #ffffff; 
    border-collapse: collapse; 
} 
#page_container{ 
    margin: 0px; 
    padding: 0px; 
} 
#main_container{ 
    margin: 0px; 
} 

<div id="main_container"> 
      <div id="page_container"> 
       My Content here <!--This is being rendered under the navigation bar and hence not being seen--> 

      </div> 
</div>

你能指點我用CSS來設置這個權利嗎？

謝謝。

來源

2014-03-06 Bill Wambua

您可以使用mediaqueries並仍然使用填充。 – 2014-03-06 11:02:23

我想要一個更符合設置浮點或位置的東西......這樣的解決方案永遠不會中斷。 –

即使在使用Java瀏覽器和Opera Mini的舊手機中，該站點也應該可用，這就是爲什麼我需要XHTML/CSS2解決方案 –

因爲您設置了「position：absolute;」在id爲「nav」的div上，您將其從常規文檔流中取出，實際上使得ID爲「main_container」的div成爲文檔流中的第一個元素，因此位於頂部。刪除「位置：絕對;」 main_container將位於nav下方。

您也可以刪除「top：0」，「left：0」和「float：left」，因爲它們不會爲您的佈局做任何事情。

來源

2014-03-06 11:24:02 Johan

謝謝。有幫助 –

導航欄呈現在主容器上而不是上面

回答

相關問題