Границы Div не показаны

Я изо всех сил пытаюсь найти прямой ответ на свою проблему из-за множества вариаций кода людей.Границы Div не показаны

Я предполагаю, что мой код, вероятно, очень грязный, поскольку я пытаюсь создать сайт для своего партнера и быстро (у меня всего несколько часов опыта Dreamweaver и все)!

Во всяком случае, у меня есть сайт с фиксированной шириной, где в столбце есть около 6 отдельных divs, все из которых содержатся в div размера веб-страницы для моего цвета фона.

В любом случае, когда я пытаюсь добавить границу к нижнему колонтитулу, она не отображается в браузерах. Я просто wan 1px, чтобы отделить «главный» div от нижнего колонтитула, и он не появится. Это тоже то же самое для моего навигационного 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>

Если кто-то может помочь, было бы здорово, так как я получаю чувство, что я, вероятно, используя конфликтующие коды из-за моей неопытности, но не имеют времени, чтобы изучить все, что прямо сейчас, и вместо этого будет возвращаться в момент, когда у меня есть больше времени, чтобы приспособиться.

Спасибо,

Martyn

источник

2013-06-01 user2443444

1) Напиши <!DOCTYPE><html><head> тег в начале кода.

2) Напиши </html> тег в конце кода.

И ПРИМЕНЕНИЕ:

границы: 1px 0px твердый # 000000;

И он решит вашу проблему. Посмотрите на http://jsfiddle.net/p2269/1/ Я написал код, как я объяснил, и он показывает границы.

источник

2013-06-01 15:29:59

Извините, но это полно, я просто не включил его, так как есть javascript, который я не смог бы форматировать прямо на этом кодовом поле. Поэтому я просто взял отрывок из кода минус теги, которые вы включили, и пару бит из тела html, в котором был Javascript. Есть ли у вас какие-либо другие предложения? – user2443444

прочитайте мое редактирование моего ответа –

Спасибо! Почему это работает, когда все параметры границы находятся в одной строке, но не тогда, когда я определяю их отдельно? – user2443444

Ваш код является неполным, я думаю ...

Здесь у вас есть рабочий пример.

<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-01 15:18:33

Извините, но это полно, я просто не включил его, поскольку есть javascript, который я не мог получить, чтобы форматировать прямо на этом кодовом поле. Поэтому я просто взял отрывок из кода минус теги, которые вы включили, и пару бит из тела html, в котором был Javascript. Есть ли у вас какие-либо другие предложения? – user2443444

Границы Div не показаны

ответ

Смежные вопросы