網站導航運動

所以這裏是我的問題。如何讓我的導航欄不會重疊到圖片上，以及它何時會出現在圖片下方，因此您仍然能夠讀取圖片並使用導航？網站導航運動

Here是我的代碼的鏈接。

CSS

.navigation{ 
list-style-type: none; 
position: absolute; 
vertical-align: middle; 
} 

.navigation ul{ 
list-style-type: none; 
padding: 0; 
text-align: right; 
float: right; 
vertical-align: middle; 
} 

.navigation li{ 
display: inline; 
padding-left: 10px; 
vertical-align: middle; 
font-size: 24px; 
} 

.header .navigation{ 
position: absolute; 
top: 0; 
right: 20px; 
}

HTML

<div class="navigation"> 
    <ul> 
    <li><a class="live" href="index.html">Home</a></li> 
    <li><a href="#">Unit 1</a></li> 
    <li><a href="#">Unit 2</a></li> 
    <li><a href="#">Unit 3</a></li> 
</ul> 
</div>

如果這個問題沒有意義，使結果窗口相當大，然後放大，你會明白我的意思。

Here是我的意思（搜索欄）的一個例子。

任何幫助將是偉大的。

在此先感謝。

來源

2014-01-05 user3161771

你可以看看這個，看看這是否工作？ http://jsfiddle.net/HvJc5/4/ – BuddhistBeast

@BuddhistBeast這正是我想要的，除了我似乎無法得到中間的圖片，導航在左邊，但也在同一'線'如果你知道我的意思。 – user3161771

嗯...試試這一個：http://jsfiddle.net/HvJc5/7/如果你放大和縮小，當你放大時圖片會在中間去，在你縮小的時候圖片會保持這樣內聯餘額。 – BuddhistBeast

這裏是你正在尋找：

DEMO

看來，你有你的圖片浮動到左邊，這個CSS表示：

float: left;

這將意味着所有的內容是將照片右側不管是什麼，所以我只是把該行的代碼出來，並使圖片text-align:center;這意味着照片將保持居中不管什麼（給你一個很好的響應運動）。

只要我幫個忙，遠離位置效應（相對，絕對，固定），除非你絕對需要它......浮動使用更好，因爲它們的響應比定位效果要好得多。另外，絕對定位一定會讓你頭疼！

希望這有助於:)

來源

2014-01-05 20:57:27 BuddhistBeast

使用z-index財產

CSS

.header h1 a{ 
    display: inline-block; 
    color: white; 
    width: 135px; 
    height: 50px; 
    background: url(http://www.gpccolorado.com/wp-content/uploads/2013/10/Square-head.jpg); 
    text-indent: -9999px; 
    background-size: cover; 
    z-index:500; 
    position:relative; 
}

Working Demo

來源

2014-01-05 03:58:08

儘管知道這一點很有用，但它並不是我想要的，因爲一旦它落在圖片後面，用戶就無法使用鏈接進行導航。 – user3161771

網站導航運動

回答

相關問題