0

私は何かで遊んでいて、サイトの上部（ロゴとメニュー）を構築しました。その後、テキストを含むテーブルを挿入しようとしました。このテーブルは、dreamweaverのコードおよびデザインタブに表示されますが、そうではありませんブラウザのプレビューに表示します。

私のCSSに問題があると確信していますが、そのテーブルが表示されない原因がわかりません。

言うまでもなく、私は CSS のプロではなく、Web サイトで遊んでいるだけです。

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 に答える