div边框未显示 [英] Div borders not showing

查看:104
本文介绍了div边框未显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

由于人员代码的多种变化,我正在努力找到直接解决我问题的方法.

I'm struggling to find a direct answer to my problem due to the many variations in peoples code.

我想我的代码可能非常混乱,因为我正试图为我的合作伙伴建立一个网站,而且很快(我只有几个小时的Dreamweaver经验,仅此而已)!

I imagine my code is probably very messy as i'm trying to build a website for my partner, and quickly (i have just a few hours Dreamweaver experience and that's it)!

无论如何,我有一个固定宽度的网站,其中一列中有大约6个单独的div,所有这些div都包含在一个网页大小的div中,作为我的背景色.

Anyway, i have a fixed width website where there are around 6 separate divs in a column, all contained within a webpage-sized div for my background colour.

无论如何,当我尝试向页脚添加边框时,它不会显示在浏览器中.我只想要1px来将'main'div与页脚分开,它就不会出现.这对于我的导航div也一样.

Anyway, when i am trying to add a border to my footer, it does not display in browsers. I just wan 1px to separate the 'main' div from the footer and it won't appear. This is also the same for my navigation 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>

如果有人能够提供帮助,那就太好了,因为我觉得由于我的经验不足,我可能正在使用有冲突的代码,但现在没有时间学习所有内容,而会回到某个地方我有更多时间去调整东西.

If anyone is able to help it would be great, as i get the feeling I'm probably using conflicting codes due to my inexperience but don't have time to learn everything right now and will instead go back at a point where i have more time to adjust things.

谢谢

Martyn

推荐答案

1)在代码的开头写入<!DOCTYPE><html><head>标记.

1) Write <!DOCTYPE><html><head> tag in the beginning of the code.

2)在代码末尾写入</html>标记.

2) Write </html> tag in the end of the code.

和使用:

边框:1px 0px实心#000000;

border: 1px 0px solid #000000;

它将解决您的问题.看看 http://jsfiddle.net/p2269/1/我按照我的解释编写了代码,显示边框.

And it will solve your problem. Look at http://jsfiddle.net/p2269/1/ I wrote code as I explained and it shows borders.

这篇关于div边框未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆