导航栏呈现在主容器上而不是上面

所以我有这个导航在移动设备和桌面上看起来不错，因为它调整得很好，因此我无法得到任何内容，然后直接跳到下面。如果我没有设置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

谢谢。有帮助 –

导航栏呈现在主容器上而不是上面

回答

相关问题