2

水平ナビゲーションバーについて質問があります。ヘッダー（高さ：100px）、水平ナビゲーションバー、最後にコンテンツ領域（高さ：768px）として画像を含むページを作成したいと思います。なぜナビゲーションバーのタックがコンテンツ領域に配置されるのだろうか（つまり、コンテンツ領域が768pxより小さくなる）。どうすればこの動作を回避できますか？代わりに、ナビゲーションバーのサイズほどコンテンツ領域を下にシフトしたいと思います。

これは私のcssコードです：

* {
         margin:0;
         padding:0;
}

body {
         background:#FFFFFF;
}

#frame {
         margin: auto;
         width: 1024px;
         height: 768px;
}

#header {
         width:100%;
         height:100px;
         background-image:url(image.jpg);
}

#navigation {
         width: 100%;
         float: left;
         list-style: none;
         background: #f2f2f2;
}

#navigation li {
         list-style: none;
         display: inline;
         float: left;
}

#navigation a {
         display: block;
         padding: 8px 15px;
         text-decoration: none;
         font-weight: bold;
         color: #069;
         border-right: 1px solid #ccc;
}

#navigation a:hover {
         color: #c00;
         background-color: #fff;
}

#content {
    background: #EBF7FF;
    width: 1024px;
    height:768px;       
    text-align: justify;
}

これはhtmlコードです：

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="frame">

<div id="header">

</div>

 <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
 </ul>


<div id="content">

<font size="+3">Title</font>

<br>
<br>

Content...

<br>
<br>

</div>

</div>

</body>
</html>
4

5 に答える 5

1

#navigation を float として表示する場合は、#content に clear:both を追加できます。

#content {
   background: #EBF7FF;
   width: 1024px;
   height:768px;       
   text-align: justify;
   clear:both;
}

しかし、私の考えでは、より良い解決策は、それをブロックとして表示し、liをインラインブロックとして表示するか、テーブルとして表示し、liをテーブルセルとして表示することです

于 2012-12-09T12:35:00.427 に答える
0

コンテンツを保持するコンテナ#frameに含まれる#navigationに100％の幅を指定します。したがって、＃navigationはそのコンテナーの幅を取ります。つまり、コンテナーはそのコンテナー内のコンテンツに必要な幅を正確に取るため、そのコンテナー内の残りのコンテンツと同じ幅になります。

そのナビゲーションをコンテンツコンテナ内に配置するので、明らかにそこにスペースをとる必要があります。これを回避したい場合は、ナビゲーションをコンテンツコンテナの上に配置するだけです。

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="header">
    <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
    </ul>
</div>

<div id="frame">
  <div id="content">
  <font size="+3">Title</font>
    <br>
    Content...
  </div>
</div>

</body>
</html>​

そのフィドラーを比較してください。

于 2012-12-09T12:13:35.420 に答える
0

ナビゲーションは、利用可能なもの全体を占める必要があり、ナビゲーションの高さがvalue.setに設定されているdisplay:tableため、ナビゲーションの高さは次のようなコンテンツになります。

#navigation{
   display:table;
}

デモをチェック

于 2012-12-09T12:23:29.347 に答える
0

これを行うと、ナビゲーションの後に何が来るかを気にする必要がなくなります。 

#navigation:after {
   clear:both;
}
于 2012-12-09T14:52:53.893 に答える
0

それ#navigationは上に浮いているから#contentです。

これを追加して#content、ナビゲーションの下に強制的にレンダリングしてみてください。

#content {
    clear:both;
}
于 2012-12-09T12:44:32.733 に答える