Question

只是预警，我是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>

提前非常感谢你！

Answer 1

首先，您应该检查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;*/ }

Answer 2

您应该访问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查看代码，然后使用它。希望它对你有所帮助。

如何居中导航栏和位置横幅图像的顶部底部

2 个答案: