0

[1] http://i.stack.imgur.com/tXB4G.png [2] http://i.stack.imgur.com/ub3PN.png

第一个图像 [1] 是我希望导航始终保持的方式（在中间 div 的左侧居中），但如第二个图像 [2] 所示，它重叠或没有真正锁定我的信息将在主 div 的左侧...请帮助，我第一次从头开始构建网站！

HTML：

<div id="header" class="wrapper,class">
        <img src="images/header.png">
    </div>

    <div id="nav" class="containerleft">
            <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
    <ul>
        <li><a href="#1">Home</a></li><br/>
        <li><a href="#2">News</a></li><br/>
        <li><a href="#3">Music</a></li><br/>
        <li><a href="#4">Videos</a></li><br/>
        <li><a href="#5">Photos</a></li><br/>
        <li><a href="#6">Store</a></li><br/>
        <li><a href="#7">Contact</a></li><br/>
    </ul>

    </div>

    <div id="main" class="center">
    testing text here in my main div!



    </div>

CSS：

#header
{
    margin-top: 40px;
}

#nav
{
    position: absolute;
    top: 170px;
    margin-left: 20%;
    margin-right: auto;
        font-family: 'Quicksand', sans-serif;
        text-align: right;
}

#main
{
    position: relative;
    top:10px;
        background-image:url(images/main_box.png);
        background-repeat:no-repeat;
        background-position: center;
        width: 668px;
        height: 578px;
}
4

2 回答 2

0

没有图像或尺寸就很难做任何事情。我认为如果你给你 #nav 一个宽度，例如width: 300px; 并确保它们在单独的 div 或容器中，你应该得到你正在寻找的效果。

如果你能想出一个关于 jsFiddle 的例子，我很乐意为你玩弄它。

于 2013-04-23T19:44:15.737 回答
0

我倾向于通过浮动 div 标签然后使用它们的宽度定位它们来做到这一点，如下所示：

http://jsfiddle.net/QgcL9/

给这些课程上课可以让您浮动它们。

float:left;
width: 500px;

如果您确保清除浮动，则可以在页面上的任何位置正常定位元素。

这里还有一些关于这种定位的有用示例： http ://www.barelyfitz.com/screencast/html-training/css/positioning/

于 2013-04-23T19:56:01.633 回答