2013-09-27 47 views
0

即時播放與某些東西,並建立了網站的頂部(標誌和菜單),之後,我試圖插入一些文本表,這雖然我在Dreamweaver的CODE和DESIGN選項卡上看到它,但它不會在瀏覽器預覽中顯示。Dreamweaver CODE在設計頁面上顯示,但不在瀏覽器上的實時視圖

我確定這是我的CSS有些麻煩,但我無法弄清楚是什麼原因導致該表不會出現問題。

不用說,即時通訊不是專業的CSS,只是與網站打架。

繼承人的HTML部分:

<body> 

<!-- header --> 
<table id="tabela"> 
    <tr> 
    <td> 
    <!-- Logo --> 
    <div class="logo"> 
     <img src="imagens/logo.png"> 
    </div> 

    <!-- Menu --> 
    <div id="menu"> 
      <ul> <li><a href="#">home</a></li> 
       <li><a href="#">categorias</a> 
        <ul class="categorias"> 
         <li><a href="#">papel de carta</a></li> 
         <li><a href="#">envelopes</a></li> 
         <li><a href="#">cartoes de visita</a></li> 
         <li><a href="#">flyers</a></li> 
         <li><a href="#">tshirts</a></li> 
         <li><a href="#">brindes</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Portefólio</a></li> 
       <li><a href="#">faqs</a></li> 
       <li><a href="#">contatos</a></li> 
      </ul> 
    </div></td> 
    </tr> 
</table> 

<!-- Clear --> 
<div class="clear"></div> 

<!-- texto de cima --> 

<table width="100%" border="0"> 
    <tr> 
    <td>imprimimos <span class="salmon-color"><b>QUALIDADE</b></span></td> 
    </tr> 
    <tr> 
    <td>junte-se a nós...</td> 
    </tr> 
</table> 



<!-- imagem topo --> 

<div class="imagem1"> 
    <p><img src="imagens/imagem1.jpg" width="1680" height="656" /></p> 
</div> 



</body> 

和繼承人的CSS部分:

/* ######## 1 - Reset ######### */ 
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, img, small, strong, ol, ul, li, form, label, 
table, caption, tr, td, footer, header { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 


body { 
    line-height: 1; 
    text-rendering: optimizeLegibility; 
    font-weight: 200; 
    font-family: "Prosto One"; 
    text-transform: uppercase; 
} 

a { 
    color: #666; 
    text-decoration: none; 
} 
a:focus { color:#333; outline:0; text-decoration:none; } 
a:hover { color:#FF6666; text-decoration:none; } 
.salmon-color {color:#C69} 
.clear { clear:both; } 


.header { 
    height:80px; 
    display:block; 
    background:url('imagens/menu-bg.png') repeat; 
} 

#tabela { 
    position:fixed; 
    z-index: 998; 
    width:100%; 
    height:150px; 
    border="0"; 
    background:url(../imagens/menu-bg.png); 
} 

.logo { 
    position: fixed; 
    z-index: 999; 
    height: 100px; 
    left: 400px; 
    top: 20px; 

} 
#menu{ 
    position: fixed; 
    z-index: 999; 
    right: 300px; 
    top: 30px; 
    display: block; 
    text-align: center; 

} 



#menu li { 
    float: left; 
    position: relative; 
    padding-right: 100; 
    display: block; 
    margin-right: 30px; 
    padding: 5px; 
    letter-spacing:1px 
} 

#menu li ul { 
    display:none; 
    position:absolute; 
    padding-top:10px; 
    text-align: center; 
    letter-spacing:0px 
} 

#menu li:hover ul{ 
    display:block; 
    height:2px; 
    width:18em; 
    text-align: center; 
} 

#menu li ul li{ 
    clear:both; 
    border-style:none; 
    padding-top:10px; 
    text-align: center; 
    background-color: #FFF; 
} 

.categorias{ 
    font-size: 12px; 
    text-align: center; 
} 

.span1{ 
    display: block; 

} 

.imagem1 { 
    position: absolute; 
    top: 200px; 
    z-index: -999; 
} 

感謝您的幫助。

+0

剛纔檢查你的代碼,它的工作對我來說很好。檢查你的自我https://dl.dropboxusercontent.com/u/68407113/dev/Paulo-Cesar-Cardoso.html – yaqoob

+0

表內的部分「imprimimos qualidade ...」在我的瀏覽器上沒有apear,anoying ... –

回答

0

這不是要清除你的問題,但是無論哪種方式,你的代碼似乎都能正常工作,正如你在這裏看到的。儘管我不會使用表來構建類似的東西。你可能想研究一下關於少桌面的佈局。

我測試了你的代碼,你可以在這裏看到它。由於我沒有你的背景圖片,我只是使用了一種顏色。

http://jsfiddle.net/vinicius5581/VZ9DS/

<body> 

<!-- header --> 
<table id="tabela"> 
    <tr> 
    <td> 
     <!-- Logo --> 
     <div class="logo"> 
      <img src="imagens/logo.png"> 
     </div> 

     <!-- Menu --> 
     <div id="menu"> 
       <ul> 
        <li><a href="#">home</a></li> 
        <li><a href="#">categorias</a> 
         <ul class="categorias"> 
          <li><a href="#">papel de carta</a></li> 
          <li><a href="#">envelopes</a></li> 
          <li><a href="#">cartoes de visita</a></li> 
          <li><a href="#">flyers</a></li> 
          <li><a href="#">tshirts</a></li> 
          <li><a href="#">brindes</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Portefólio</a></li> 
        <li><a href="#">faqs</a></li> 
        <li><a href="#">contatos</a></li> 
       </ul> 
     </div> 
     </td> 
    </tr> 
</table> 

<!-- Clear --> 
<div class="clear"></div> 

<!-- texto de cima --> 

<table width="100%" border="0"> 
    <tr> 
    <td>imprimimos <span class="salmon-color"><b>QUALIDADE</b></span></td> 
    </tr> 
    <tr> 
    <td>junte-se a nós...</td> 
    </tr> 
</table> 



<!-- imagem topo --> 

<div class="imagem1"> 
    <p><img src="imagens/imagem1.jpg" width="1680" height="656" /></p> 
</div> 



</body> 
+0

我同意表格(當然),特別是在上下文中,因爲它們根本不需要。這裏是一個沒有表格的例子:http://jsfiddle.net/azfBH/ – Anthony

+0

以及我有一張桌子的原因是有beacuase我第一次使用DIV並沒有出現,我改爲TABLE以查看是否會改變... 爲什麼我是唯一一個看不到結果的人? –

相關問題