0

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

我确定那是我的 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;
}

谢谢您的帮助。

4

1 回答 1

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>
于 2013-09-27T11:07:27.323 回答