-2

初めての Web サイト (IT サポート会社のスタートアップ) をデザインしていますが、学習中にいくつかの問題に遭遇しました。問題は次のとおりです。

  1. nav 要素の周りに境界線を配置しようとすると、nav ボックスが左側に移動しますが、Web ページのメイン (記事?) セクションの下に移動します。また、メイン ヘッダー部分の周囲の境界線が太くなります (ナビゲーション ボックスがある側のみ)​​。

  2. フッターを記事セクションに合わせることができません (両方とも中央に配置する必要がありますが、ナビゲーション ボックスが記事の「中央」配置を変更しているため、フッターが配置されていないと思われます)。

PSなぜこの投稿が忘却に向けて反対票を投じられているのか理解できません... この質問に対する答えは他に見つかりませんでしたし、無意味なものだとも思いません.

ここに私のサイトの jsfiddle があります: http://jsfiddle.net/EchoedTruth/a4CLL/

 `$` <nav style="background-color: red">
        <table> 


   <ul>
   <tr> 
   <td><li><a href="BTSMain.html"><b>Home</b> </a></li></td> 
   </tr> 
   <tr>
   <td> <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
   </td>
   </tr> 
   <tr>
   <td>
   <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li> 
   </td>
   </tr>
   <tr>
   <td>
   <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li> 
   </td>
   </tr>
   <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr>

   </ul>
   </table>
    </nav>

    `$`
4

2 に答える 2

2

NAV 要素内のコードは無効な HTML です。

あなたはこれを持っていますが、これはあらゆる種類の間違っています:

<table>
<ul>
<tr> 
   <td><li><a href="BTSMain.html"><b>Home</b> </a></li></td> 
   </tr> 
   <tr>
   <td> <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
   </td>
   </tr> 
   <tr>
   <td>
   <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li> 
   </td>
   </tr>
   <tr>
   <td>
   <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li> 
   </td>
   </tr>
   <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr>

   </ul>
   </table>

これを次のように変更してみてください。

<nav>
  <ul>
    <li><a href="BTSMain.html">Home</a></li>
    <li><a href="BTSServices.html">Services We Offer</a></li>
    <li><a href="BTSAboutUs.html">About Our Company</a></li> 
    <li><a href="BTSTestPage.html">Testing Page</a></li> 
    <li><a href="BTSTestPage2.html">Testing Page 2</a></li>
  </ul>
</nav>

境界線を追加したときに NAV 要素が移動する理由は、おそらく、境界線を追加すると NAV 要素の幅が大きくなるためです。

たとえば、NAV 要素の幅が 300px で、境界線を 1px にすると、NAv 要素は 302px になります。

これをよりよく理解するには、HTML Box Model を読んでください。

于 2013-01-28T17:10:15.410 に答える
0

<li>HTML 構造が正しくありません<table>。要素は、または要素<li>内でのみ許可されます。したがって、スタイルを設定する前に、最初にナビを修正します。<ul><ol>

CSS:

ul {
    border:1px solid #000; // border around all li elements
}

ul li {
   border:1px solid #666; // border around each li element
}

HTML:

<nav style="background-color:red;">
    <ul>
        <li><a href="BTSMain.html"><b>Home</b></a></li>
        <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
        <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li>
        <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li>
        <li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li>
    </ul>
</nav>
于 2013-01-28T17:12:51.547 に答える