Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver.
I suspect there is an issue with my CSS causing the table not to show up, but I can't pinpoint the exact problem since I'm not a CSS pro; just playing around with website building.
Here's the HTML snippet:
<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>
<!-- Top Text -->
<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>
<!-- Top Image -->
<div class="imagem1">
<p><img src="imagens/imagem1.jpg" width="1680" height="656" /></p>
</div>
</body>
And here's the corresponding CSS:
/* 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;
}
Appreciate any assistance provided. Thank you!