Question

我正在玩一些东西，并建立了网站的顶部，（徽标和菜单），之后我试图插入一些带有一些文本的表，这个表虽然我在Dreamweaver的CODE和DESIGN选项卡上看到它，它只是不显示在浏览器PREVIEW上。

我确信这对我的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;
}

感谢您的帮助。

Answer 1

不清楚你的问题是什么，但无论哪种方式，你的代码似乎都能正常工作，你可以在这里看到。虽然我不会使用表来构建类似的东西。您可能想要研究一下表格较少的布局。

我测试了你的代码，你可以在这里看到它。由于我没有你的背景图像，我只使用了一种颜色。

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>

Dreamweaver CODE显示在设计页面上，但不显示在浏览器上的实时视图中

1 个答案: