5

人々のコードにはさまざまなバリエーションがあるため、問題に対する直接的な答えを見つけるのに苦労しています。

私はパートナーのためにウェブサイトを構築しようとしているので、私のコードはおそらく非常に厄介だと思います.

とにかく、私は固定幅のウェブサイトを持っており、列に約 6 つの個別の div があり、すべてが背景色のウェブページサイズの div に含まれています。

とにかく、フッターに境界線を追加しようとすると、ブラウザーに表示されません。「メイン」の div をフッターから分離するために 1px が欲しいだけで、表示されません。これは私のナビゲーション div でも同じです。

      body{
               color:#00000;
               margin-left:0px;
               margin-right:0px;
               margin-top:0px;
               margin-bottom:0px;
               }


       #body{
       background-color:#000000;
       }


       #header{
               width:800px; /* The width is fixed by pixels */
               height:150px; /* The height is fixed by pixels*/
               color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
        }

        #navigation {
               width:798px;
               height:51px;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:1px;
               border-color:#000000;    
               text-align:center;    
               background-color:ffffff;

        }

        #main {
               width:798px; /* The width is fixed by pixels */
               height:800px; /* The height is fixed by pixels*/
               color:#fff;
               background-color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:0px;
               border-color:#000000;
               text-align:center;

        }

        #footer {
                                      /*Styling for any element with the id="container" */
                      width:798px; /* The width is fixed by pixels */
                       height:100px; /* The height is fixed by pixels*/
                       color:#fff;
                        background-color:#fff;
                        margin-left: auto;
                        margin-right:auto;
                        border-style:solid;
                        border-left:1px;
                        border-right:1px;
                        border-bottom:1px;
                        border-top:1px;
                        border-color:#000000;
                        }

                        #Facebook {
                        float:right;
                        }

                        #Twitter {
                        float:right;
                        }

                        #LinkedIn {
                        float:right;
                        }




      </style>
 </head> 
 <body>
 <div id="body">
 <div id="header">
 <a href="Home.html"><img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery"> </a>
 </div>

   <div id="main">
   <div id="navigation">
   <br />
 </div>
   <br />
   <br />
   <img src="Images/Home Image.jpg" />
 </div>
 <div id="footer">

     <a href="https://www.facebook.com/ruth.fifer.5?fref=ts" target="_blank"> <img src="Images/facebook.png" alt="Facebook" id="Facebook"/></a>
   <a href="https://twitter.com/martynjakins" target="_blank"> <img src="Images/twitter.png" alt="Twitter" id="Twitter"/></a>
   <a href="http://www.linkedin.com/profile/view?id=225071408&trk=tab_pro" target="_blank"><img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></a></div>
 </div>
 </body>

経験の浅いために競合するコードを使用している可能性がありますが、今はすべてを学ぶ時間がなく、代わりにもっとある時点で戻ってきます。物事を調整する時間。

ありがとう、

マーティン

4

3 に答える 3

6

1)<!DOCTYPE><html><head>コードの先頭にタグを記述します。

2)</html>コードの最後にタグを記述します。

そして使用：

ボーダー: 1px 0px ソリッド #000000;

そして、それはあなたの問題を解決します。http://jsfiddle.net/p2269/1/を見てください。説明したようにコードを書いたところ、境界線が表示されます。

于 2013-06-01T15:29:59.303 に答える
1

あなたのコードは不完全だと思います...

ここに実用的な例があります。

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 body{
               color:#00000;
               margin-left:0px;
               margin-right:0px;
               margin-top:0px;
               margin-bottom:0px;
               }


       #body{
       background-color:green;
       }


       #header{
               width:800px; /* The width is fixed by pixels */
               height:150px; /* The height is fixed by pixels*/
               color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
        }

        #navigation {
               width:798px;
               height:51px;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:1px;
               border-color:#000000;    
               text-align:center;    
               background-color: yellow;

        }

        #main {
               width:798px; /* The width is fixed by pixels */
               height:800px; /* The height is fixed by pixels*/
               color:#fff;
               background-color:blue;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:0px;
               border-color:#000000;
               text-align:center;

        }

        #footer {
                                      /*Styling for any element with the id="container" */
                      width:798px; /* The width is fixed by pixels */
                       height:100px; /* The height is fixed by pixels*/
                       color:#fff;
                        background-color:red;
                        margin: 0 auto;
                       border-top: 3px solid white;
                        }

                        #Facebook {
                        float:right;
                        }

                        #Twitter {
                        float:right;
                        }

                        #LinkedIn {
                        float:right;
                        }




      </style>
 </head> 
 <body>
 <div id="body">

    <div id="header">&nbsp;</div>

   <div id="main">
       <div id="navigation">
        <br />
       </div>
   </div>

   <div id="footer">&nbsp;</div>

 </div>
 </body>
</html>
于 2013-06-01T15:18:33.543 に答える