全宽固定水箱内定位导航

我试图做到的是：全宽固定水箱内定位导航

自适应网站
全宽，固定头部保持2个元素：
位于A标志最左边，
和主导航栏。

有一个h1实际上位于标题标签之外，在正文中，它显示在标题中，因为标题是半透明的。

这是网站。 Subject site

问题是：在我的屏幕上，导航定位在我想要的位置。也就是说：最后一个链接与居中内容区域的右边缘对齐。

然而，当浏览器窗口的尺寸重新调整的净资产价值（果然）向左移动，并最终脱落，当它遇到的标志。

我想要做的是有定位在主要内容的右侧的导航逗留，直到它达到一个破发点，在那里我将使用CSS媒体查询，以便从那里解决它。

非常感谢提前！

下面是HTML：（我已经尝试了AP的多种组合，花车，利润率（％，PX）等）

<h1 class="header_text">Welcome...</h1> 
<header> 
<a href="http://www.allaccessbranding.com"> 
<img id="logo" src="./images/aai_logo_black_108x211.gif" alt="All Access International logo" /> 
</a> 
<div id="main_nav"> 
<nav id="main_nav_tag"> 
    <ul> 
     <li><a href="index.php" 
     id="here">Home</a></li> 
     <li><a href="about.php" 
     >About</a></li> 
     <li><a href="services.php" 
     >Services</a></li> 
     <li><a href="calendar.php" 
     >Calendar</a></li> 
     <li><a href="gallery.php" 
     >Gallery</a></li> 
     <li><a href="contact.php" 
     >Contact</a></li> 
    </ul> 
</nav>

下面是相关的CSS：

body { 
    min-width: 960px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 16px; 
    background-color: rgb(51,51,51); 
} 
header { 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    height: 108px; 
    z-index: 100; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-bottom: 2px solid rgb(99,0,0); 
} 
header #logo { 
    float: left;  
} 
.header_text { 
    margin: 35px 0px 0px 23%; 
    font-family: 'Aguafina Script', cursive; 
    font-size: 4.6em; 
    color: #279D9D; 
} 
#main_nav { 
    width: auto; 
    height: 50px; 
    font-size: 1.2em; 
    float: right; 
    margin-right: 19%; 
    margin-top: 56px; 
} 
#main_nav_tag { 
    margin: 15px 0 0 5px; 
} 
#main_nav ul li { 
    list-style-type: none; 
    float: left;  
    width: auto; 
} 
#main_nav ul li a { 
    line-height: 1.5em; 
    color: rgb(255,255,255); 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    margin-right: 15px; 
    border-top: 2px solid transparent; 
} 
#main_nav ul li a:hover { 
    border-top: 2px solid rgb(99,0,0); 
} 
#main_nav ul li #here { 
    border-top: 2px solid rgb(99,0,0); 
}

来源

2013-06-01 devKnight

如果添加你想要怎样的网站看（之前和之后的媒体查询）样机图片您可以使用http://jsfiddle.net/为make simlpe小提琴 –

话，我会改正这一切。我要求图片，因为我发现很难准确理解你想要的东西。 – 2ne

好吧，我能弄明白。我只是简单地将徽标定位在绝对位置，使其脱离流动。我给了nav容器960px的宽度（匹配内容区域），并且应用了margin：0 auto，它将nav容器保持在页面中心。然后，我将浮点数应用到嵌套的导航标记的右侧，将其带到容器的右边缘和小提琴！该导航保持在重新调整大小的位置。谢谢你的帮助。

来源

2013-06-02 17:24:06 devKnight

您有float: left在您的#main_nav ul li，这是问题。

变化#main_nav ul li浮动到右，像这样：

#main_nav ul li { 
    list-style-type: none; 
    float: right;  
    width: auto; 
}

http://jsfiddle.net/M_Abooali/JKQkQ/

来源

2013-06-01 20:39:55

感谢您的答案，但不幸的是不是正确的。在浏览器重新调整大小时，导航仍然向左移动。 – devKnight

@devknight，检查小提琴，它保持在正确的位置！ –

我已将代码添加到远程服务器，以便您可以看到自己。 – devKnight

全宽固定水箱内定位导航

回答

相关问题