The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

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!

htmlcss

Answer №1

Your issue is not very clear, but your code appears to be working fine as demonstrated here. However, using tables for layout is not recommended. You might want to explore table-less layouts for better design practices.

I tested your code and you can view the results here. As I didn't have your background image, I used a placeholder color instead.

<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>we print with <span class="salmon-color"><b>QUALITY</b></span></td>
  </tr>
  <tr>
    <td>join us...</td>
  </tr>
</table>

<!-- Top Image -->

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

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining Beverage Overall with Loop

I am currently using a function to calculate the total of each drink, with a total of 5 drinks: var totalEstimate = 0; var locoCost = 0; var blackCost = 0; function calcLoco() { totalEstimate -= locoCost; locoCost = docume ...

javascripthtmlloops

Variable Returned by AJAX

I am attempting to send a variable using a select box via POST method, then use AJAX to submit the data and finally leverage that variable on the original page to update SQL queries. Below is the code snippet I currently have: <script type="text/j ...

javascriptphpjqueryajaxhtml

Come up with various transition animations for multiple child elements that activate when the cursor hovers over the parent element

I have a CSS & HTML code snippet that looks like this: .item-video-kami { width: 480px; overflow: hidden; position: relative; } .item-video-kami>.play-icon.full-height>svg { width: 106px; color: #ffffff50; } .item-video-kami img { ...

htmlcss

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

javascriptphphtmljquery

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

javascriptjqueryhtml

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

javascripthtmljsonfilefor-loop

The cube mesh is failing to render inside the designated div

I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried: <div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; "> & ...

javascriptcsshtmlthree.js

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

javascripthtmlcssdarkmode

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

htmlcsstwitter-bootstrap-3

Angular2 - the pipe was not located while organizing records

I've successfully fetched data from an API and displayed it in the view, but I'm struggling to organize the data by date. Whenever I attempt to do so, I encounter this error message: The pipe 'groupBy' could not be found pipe.ts impor ...

htmlangulartypescriptionic-framework

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

javascriptjqueryhtmlcssjquery-ui

Steps for importing selenium web elements:

Can all of these ... tags be extracted simultaneously? I aim to retrieve every ... from that particular webpage! Web address: 'https://school.programmers.co.kr/learn/challenges?order=recent&page=1' ...

pythonhtmlselenium-webdriverweb-scrapingelement

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

cssangularsassmaterial-uiangular-material

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Having trouble with a few sortable tables and here is how I initialized the sortable object: var options = { helper: customHelper, handle: ".moveTargetDeliverables", containment: "#fieldset_deliverables_summary", tolerance: 'pointer&a ...

javascriptjqueryhtmlcssjquery-ui

Angular not executing Jquery script in included HTML files

Underneath is a simple jquery code snippet: $(document).ready(function() { $("h2").click(function(){ alert("Hello world"); }) }); After clicking on any h2 tag in the website, an alert message will display. The code functions properl ...

jqueryhtmlangularjs

KineticJs: Enhancing Rotation with Multitouch Capability

Currently, I have a click event implemented in my code that rotates my puzzle piece by 90 degrees when clicked. However, I would like to change it from a mouse click to a touch event. How can I achieve this? Thank you. piecesArray[i][j].shape.on("mous ...

javascripthtmlrotationkineticjsmulti-touch

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg