0

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

最初の画像 [1] は、ナビゲーションを常に (中央にある中央の div の左側に) 維持したい方法ですが、2 番目の画像 [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 に答える