0

只是一个警告，我是 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>

非常感谢您！

4

2 回答 2

0

首先，您应该检查您的 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-07T08:14:24.427 回答
0

你真的应该访问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-07T08:17:05.767 回答