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

本当に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 に答える
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 に答える