如何將導航欄和位置置於橫幅圖片底部的位置

只是一個預警，我是HTML和CSS的新手。請耐心等待我的詢問。如何將導航欄和位置置於橫幅圖片底部的位置

我正在嘗試將導航欄居中，同時將其重疊在橫幅的底部。我在頂部有一個橫幅圖片，而在導航欄正下方有一個主要內容的背景圖片。我試圖添加以下內容：

ul.navbar li { 
float: left}

這使導航欄直接位於主體背景下方，而不是一切之上。爲了得到我使用的水平格式的清單

ul.navbar li { 
display: inline-table}

這是唯一能夠給我正確的水平格式，我正在尋找的變化。現在我只需要將其集中並覆蓋在橫幅圖像的底部。有什麼建議麼？我的HTML和CSS如下：

CSS：

body { 

padding-left: 9em; 

font-family: Georgia, "Times New Roman", Times, serif; 

color: #6699FF; 

background-color: white 

} 

div#contentareamain1 { 

background: url(contentareamain1.png) no-repeat; 

background-color: white; 

color: white; 

height: 634px; 

position: relative; 

} 

div#contentareamain1text { 

position: relative; 

height: auto; 

width: 700px; 

left: 5em; 

top: 4em; 

} 

#header { 

float:left; 

width:100%; 

height:87px; 

} 

.wrap { 

position:relative; 

margin:0 ; 

} 

ul.navbar { 

list-style-type: none; 

padding: 0.3em; 

margin: 0; 

top: 2em; 

left: 5em; 

width: 15em; 

} 

h1 { 

font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 

} 

ul.navbar li { 

background: rgb(157,193,255); 

margin: 0.5em ; 

padding: 0.3em; 

border-bottom: 1em solid black; 

text-align: center; 

display: inline-table; 

} 

ul.navbar a:hover { 

color: blue; 

background-color: #00FFFF; 

} 

ul.navbar a { 

text-decoration: none; 

}

HTML：

<body> 

<div id="header"> 

<div class="wrap"> 

<img src="banner.png"/> 

</div><ul class="navbar"> 

<p> <li><a href="index.html">Home</a> </p> 

<p> <li><a href="services.html">Services</a> </p> 

<p> <li><a href="inspireme.html">Training</a> </p> 

</ul> 

<div id="contentareamain1" no-repeat> 

<div id="contentareamain1text"><p> 

</p></div> 

</div>

非常感謝你提前！

來源

2013-03-07 user2142917

首先，你應該檢查你的HTML結構 - 它似乎有一個缺少關閉DIV標籤，你應該刪除列表元素周圍的環繞P元素。

試試這個：

<div id="header"> 
<div class="wrap"> 
    <img src="banner.png"/> 
</div> 
<ul class="navbar"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="inspireme.html">Training</a></li> 
</ul> 
</div>

後你只需要給你的頭形象這個CSS：

display:block; margin:0 auto; position:relative;

和ul.navbar需要是這樣的：

margin:0 auto; float:none; position:relative; top:-35px; width:500px;

你應該刪除你的div＃contentareamain1的相對位置來獲得這個代碼的工作。

div#contentareamain1 { (…) /*position: relative;*/ }

來源

2013-03-07 08:14:24

這將工作，如果ul.navbar確實有一個已知的寬度。如果不是保證金：0 auto;將不起作用，因爲它的寬度默認爲100％。 – Brainfeeder 2013-03-07 08:22:25

你真的應該參觀W3C和了解你的HTML :)

的HTML

<div id="header"> 
    <img src="" /> 
    <ul class="navbar"> 
     <li><a href="#">Link text</a></li> 
     <li><a href="#">Link text</a></li> 
     <li><a href="#">Link text</a></li> 
    </ul> 
</div> 
<div id="content-area> 

</div>

你的HTML包含一些<p>標籤都有效誰不屬於那裏。另外我想你會喜歡你的頭以外的內容？

的CSS （我只給你一個例子，如何把你的導航欄在你的頭爲中心，剩下的就是你）

#header { 
    position:relative; 
    z-index:1; 
    text-align:center; 
} 
#header img { 
    position:inherit; 
    z-index:inherit; 
} 
#header ul.navbar { 
    position:relative; 
    z-index:2; 
    margin:0 auto; 
    top:-35px; 
    list-style-type:none; 
} 
#header ul.navbar li { 
    display:inline-block; 
} 
#header ul.navbar li a { 
    display:block; 
    padding:4px 8px; 
    background-color:blue; 
    color:white; 
    text-decoration:none; 
}

您可以在jsFiddle在行動中看到的代碼和玩用它。希望它對你有所幫助。

來源

2013-03-07 08:17:05 Brainfeeder

如何將導航欄和位置置於橫幅圖片底部的位置

回答

相關問題