2013-04-23 23 views
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; 
} 
+0

你應該把你的#nav DIV #main內,並使用負'left'值推#nav到外面。 – tobiv 2013-04-23 19:42:09

回答

0

它很難做任何事情沒有圖像或大小。我認爲如果你給予你一個寬度,如width: 300px;,並確保它們在不同的div或容器中,你應該得到你要找的效果。

如果你能想出一個關於jsFiddle的例子,我很樂意爲你玩弄它。