Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link:

It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image:

https://i.stack.imgur.com/VkoEt.png

However, when saving it as an HTML file and opening it again, all of the design is lost, resulting in a completely different look:

https://i.stack.imgur.com/AxvKU.png

As someone not well-versed in HTML/CSS, I would appreciate any insights into why this happens.

htmlcssweb

Answer №1

<!DOCTYPE html>
<html style="font-size: 16px;" lang="en"><head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <meta name="keywords" content="Graph based traceability analysis for the software development process, Connecting to neo4j, User side, Our Team">
    <meta name="description" content="">
    <title>DevTracer</title>
    <link rel="stylesheet" href="https://site117196.nicepage.io/nicepage.css" media="screen">
<link rel="stylesheet" href="https://site117196.nicepage.ioDevTracer.css" media="screen">
    <script class="u-script" type="text/javascript" src="//capp.nicepage.com/assets/jquery-1.9.1.min.js" defer=""></script>
    <script class="u-script" type="text/javascript" src="//capp.nicepage.com/01db292f7dec5dea9f984582599f825173540652/nicepage.js" defer=""></script>
    <meta name="generator" content="Nicepage 4.14.1, nicepage.com">
    <link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i">
    <link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cambay:400,400i,700,700i">
    
    
    
    
    
    
    
    <script type="application/ld+json">{
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": ""
}</script>
    <meta name="theme-color" content="#478ac9">
    <meta property="og:title" content="DevTracer">
    <meta property="og:type" content="website">
  </head>
  <body data-home-page="https://site117196.nicepage.io/DevTracer.html" data-home-page-title="DevTracer" class="u-body u-xxl-mode" data-lang="en"><header class="u-clearfix u-header u-header" id="sec-14ab"><div class="u-clearfix u-sheet u-sheet-1">
        <h3 class="u-custom-font u-font-georgia u-headline u-text u-text-default u-text-palette-1-base u-text-1">
          <a href="/">Can't trace what you can't see</a>
        </h3>
        <h3 class="u-headline u-text u-text-default u-text-2">
          <a href="/"></a>
        </h3>
      </div></header>
    <section class="u-align-center u-clearfix u-white u-section-1" id="carousel_0e7a">
      <div class="u-clearfix u-sheet u-valign-middle-sm u-valign-middle-xs u-sheet-1">
        <img class="u-image u-image-contain u-image-default u-image-1" alt="" data-image-width="1066" data-image-height="512" src="https://images01.nicepage.com/2ff7d872d893fb8e3cb29142/f067b442161c5d4088585819/DevTracerLogo.png">
        <h2 class="u-custom-font u-font-georgia u-text u-text-default-lg u-text-default-md u-text-default-sm u-text-default-xl u-text-1">Graph based traceability analysis for the software development process</h2>
        <p class="u-custom-font u-font-georgia u-large-text u-text u-text-variant u-text-2">
          <span class="u-text-palette-1-base">Made by developers for developers</span>
          <br>
        </p>
      </div>
    </section>... (Continues)

You have to change all of the local files in the code to have them link directly to the site since you aren't hosting them.

Answer №2

Ensure your CSS links are correctly set, and utilize your browser's console to verify the proper loading of CSS files.

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

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

My website incorporates Jump Links to navigate between page elements as part of an interactive User Guide. Everything functions properly on Firefox, IE, and Edge, but Chrome and Opera seem to disregard the 'padding'. Due to a fixed menu bar on t ...

htmlcssgoogle-chrome

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

Tips for incorporating data attributes into <figure> elements and retrieving them using CSS

Can we enhance a <figure> element by adding data attributes and then utilizing them in CSS? For example, I attempted figure { margin: 0 attr(data-margin %); } using <figure data-margin="15">...</figure> but it didn't yield the d ...

htmlcss

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

cssreactjsmaterial-ui

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

htmlcss960.gs

Creating a two-dimensional canvas within a div element using the console

I have some code that currently generates an image in the console when I hit F12. However, I would like to display this image inside a more user-friendly area such as a div on the webpage. I attempted to create a <div class = "mylog"> to place the i ...

javascriptjqueryhtmlcanvas

Choosing from a dropdown menu by pressing keys

When I press the first letter of an option in my dropdown list, it works fine. However, if I try to press two, three, or four letters consecutively, the control vanishes. For example, if the option is 'Jquery' and I press J only, it works but pre ...

jqueryhtmltwitter-bootstrap

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Currently, I am facing a challenge with accessing a function that is defined in the table.js file from within my index.html. Here is a snippet of the code: table.js let table; function set_table(table) { this.table = table; consol ...

javascripthtmljquerynpmwebpack

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...

javascripthtmlarraysjsonknockout.js

Using Angular 4 to retrieve a dynamic array from Firebase

I have a dilemma while creating reviews for the products in my shop. I am facing an issue with the button and click event that is supposed to save the review on the database. Later, when I try to read those reviews and calculate the rating for the product, ...

htmlangulartypescriptfirebase

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

javascriptphpjqueryhtmlcss

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

phphtmlcssajax

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

javascriptjqueryflashhtml

Display an image using a modal window and Ajax XMLHttpRequest

I was tasked with creating a button that can load various types of content (text, images, videos, etc) into a modal popup window using Ajax without any frameworks. So far, I've been successful with text but have run into issues with loading images. De ...

javascripthtmlajax

Managing JSON data retrieval and manipulation techniques

My code is set up to display the image, title, and summary for all entries in a JSON file. However, I only want to display the image, title, and summary for the first entry, and only show the title for the rest of the entries. Please advise. <html> ...

javascriptjqueryhtmlajaxjson

Resizable item within a text box (similar to an HTML editing tool)

After extensive searching online, I have not been able to find a solution. What I need is a draggable input element within a textarea in a text-editable div. The draggable textarea should be integrated seamlessly into the text, and upon submitting, it shou ...

jqueryhtmltextarea

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

cssangularscss-mixinsnebular

Guide to redirecting on click when utilizing an iframe

I needed to prevent the page from reloading before the action was complete by using an iframe. However, I encountered an issue where I needed the page to refresh after the action took place. I attempted two methods to achieve this - refreshing the page and ...

phphtmliframe

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

I am struggling to add an extra class within the div class= "container-fluid" in order to set a background with a fixed position, but it doesn't seem to work. The only way I can add a background-image is directly in the HTML. Why is that? Another is ...

htmlcss