1

私の CSS では、メニューバー<div>とヘッダーを作成しました<div>。私の意図は、メニュー行をヘッダーの背景画像の BOTTOM と同じにすることなので、メニューをヘッダー内にネストしました。悲しいかな、それは機能していません。その理由がわかりません。

フィドルを作成しましたが、関連付けられた画像ファイルをアップロードする方法がわからないため、ヘッダーのプレースホルダーの画像を添付しましたヘッダーの背景のプレースホルダー。ワイヤーフレームまた、実現しようとしていることを示すワイヤーフレームもアップロードしました。

フィドルを表示できない場合は、ここに私の HTML と CSS を示します。

HTML:

<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
    <title>Test</title>
    <LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>

<body>
    <div id="header" >
        <div id="menubar">
            <a href="#">home</a>  |  <a href="#">about</a>  |  <a href="#">contact</a>
        </div>
    </div>
</body>
</html>

CSS:

body     {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 12px;
    }

h1    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 2em;
    }

h2    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1.5em;
    margin-left: 5%;
    }

h3    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1em;
    margin-left: 20%;
    }

p    {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif
    font-size: 12px;
    padding: 0px 0px 0px 600px;
    margin: 0px:
    float: bottom;
    }

a    {
    color: #000064;
    text-decoration: none;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    }

a.visited {
    color: #640064;
    weight: bold;
    text-decoration: none;
    }

#header {
    height: 120px;
    background-color: #ffffff;
    background-image: url(headerblock.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    float: bottom;
    }

#menubar {
    border-width: 1px 0px 1px 0px;
    border-color: #000064;
    border-style: solid;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    line-height: 16px;
    float: bottom;
    padding: 0px 0px 0px 600px;
    margin: 0px 0px 0px 0px;
    }

#menubar a {
        text-decoration: none;
        color: #000064;
        float: bottom;
        }

#menubar a.visited {
    text-decoration: bold;
    color: #000000;
    float: bottom;
        }

誰にもアイデアはありますか？

4

3 に答える 3

2

次のように、画像をすべてヘッダー内の別の div に配置します。

<div id="header">
    <div id="banner"></div><!--
 --><div id="menubar"></div>
</div>

次に、display: inline-block;on#bannerと を使用し#menubarます。前後
の HTML コメントに注意してください。これらの要素の間の空白を削除するためです。空白を気にしない場合は削除できます。詳細については、これを参照してください: Fighting the Space Between Inline Block Elements。 このフィドルを確認してください。 ちなみに、ナビゲーションにはとを使用する必要があります。 の代わりに、セパレーターにボーダーを使用します。これはプレゼンテーション用であり、プレゼンテーションは html ではなく css で処理する必要があります。#banner#menubar



<ul><li>
|

于 2013-01-03T19:59:19.610 に答える
0

#menubardivを押し出す600pxのパディングが残っています。またFloatはできません。 またはBottomのいずれLeftかRightです。

それを完璧にするposition:relativeには、ヘッダー div とposition:absolute; bottom:0px; left:0px;子 div に a を正確に配置します

于 2013-01-03T18:23:21.167 に答える
0

パラメータはまたはfloatを受け入れます。なんてことはありません。leftrightfloat: bottom

position: relativeただし、ヘッダー div に追加すると、. でメニューを配置できますposition: absolute; left: 0; bottom: 0;

アップデート

メニュー バーの幅を指定して、テキストが下方向に折り返されないようにする必要がある場合があります。

于 2013-01-03T18:23:22.653 に答える