divs отображается правильно в Dreamweaver, но не просматривается

Я надеюсь, что кто-то может указать мне правильный путь. Когда я просматриваю свой сайт в Dreamweaver, все мои divs выстраиваются правильно. То есть текст находится на фоне рядом с меню div. Однако, когда я тестирую в браузере, текст находится внизу, под фоновым изображением.divs отображается правильно в Dreamweaver, но не просматривается

http://jsfiddle.net/sodisarmingdarling/Pr5AQ/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
     html, body, .container { 
      width: 100%; 
      height: 100%; 
      margin: 0; 
      padding:0; 
      background-image:url(Background.gif); 
      background-repeat:no-repeat; 

     } 


     .menu { 
    padding: 70px 10px; 
    float: left; 

     } 

     li{ 
      padding: 10px 20px; 
      margin: 0px 0; 
      list-style-type: none; 
      border: 0px; 
     } 

     .content{ 
      padding: 130px 10px; 
      float: left; 
      font-family: "Letter Gothic Std Bold"; 
      font-size: 16 pt; 
      color: #99CCFF; 
     } 

</style>   

</head> 

<body> 

    <div class="container"> 



     <div class="menu"> 

      <ul> 
       <li><a href = "#" ><img src="images/DarkLayout_03.gif" width="166" height="66" /></a></li> 
       <li><a href = "#"><img src="images/DarkLayout_06.gif" width="166" height="66" /></a></li> 
<li><a href="mailto:[email protected]"><img src="images/DarkLayout_08.gif" width="164" height="66" /></a></li> 
       <li><a href = "notafilmnoirheroine.tumblr.com"><img src="images/DarkLayout_11.gif" width="164" height="66" /></a></li> 
       <li><a href = "swy5105.tumblr.com"> <img src="images/DarkLayout_13.gif" width="166" height="66" /></a></li> 
      </ul> 

     </div> 

     <div class="content"> 
      text text text 
     </div> 

    </div> 

</body> 
</html>

Что я вижу в Dreamweaver:

Что я получаю в браузере (протестировано в Safari, Chrome и Mozilla):

источник

2013-06-18 user2458123

В CSS для .content, измените float слева, до нет.

Текущий CSS:

.content{ 
     padding: 130px 10px; 
     float: left; 
     font-family: "Letter Gothic Std Bold"; 
     font-size: 16 pt; 
     color: #99CCFF; 
    }

Новый CSS:

.content{ 
     padding: 130px 10px; 
     float: none; 
     font-family: "Letter Gothic Std Bold"; 
     font-size: 16 pt; 
     color: #99CCFF; 
    }

Вот является jsFiddle из него (используя случайные изображения в HTML), http://jsfiddle.net/FvAW4/

Хотя текущий CSS работает маленький текст, с большим текстом он заставляет текст идти под все. Изменение этого никому не решит это.

Дизайн-просмотр предназначен для просмотра в режиме просмотра, а не в качестве браузера для тестирования (хотя большинство контента отображается одинаково в браузерах). Однако Dreamweaver имеет возможность включить представление Design, чтобы отображать его, как если бы он был браузером. Эта опция называется представлением «Live», и это вкладка рядом с вкладкой «Просмотр дизайна».

Я бы посоветовал вам привыкнуть к использованию Live view, так как это быстро и просто отобразить страницу. Но помните, иногда Dreamweaver отображает содержимое страницы по-разному по сравнению с браузерами.

источник

2013-08-10 05:31:20 Studocwho

divs отображается правильно в Dreamweaver, но не просматривается

ответ

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