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

Issue with implementing styles on Navbar React component

I'm currently learning Next.js, specifically working with version 10.0.3. In my project, I am using react-bootstrap version 1.4.0 and classnames version 2.2.6. Within my project, I have a component called Navbar that I am trying to style in a certain ...

cssreactjsnext.jsstyled-jsx

Vue.js mobile app may show a loaded DOM that remains invisible until the screen is tapped

I am facing a peculiar issue that has me stumped. On my mobile device, my page initially loads like this homepage However, once I tap the screen, all the components suddenly appear. Is there a way to simulate a click on my mobile? I'm struggling to u ...

javascripthtmlvue.js

Analysis of printing functionality across Chrome, Safari, and Firefox browsers

When utilizing the print function of various browsers to save web content in a PDF file, I have observed that each browser behaves differently. This becomes an issue when the content spans multiple pages. For instance, Chrome prints correctly while Safari ...

htmlcssgoogle-chromefirefoxsafari

The anchor tag seems to be malfunctioning within the div container

<style type="text/css> .xyz { position: absolute; top: 120px; left: 160px; z-index: -1; } #container { position: relative; overflow: visible; opacity: .3; } </style> <body> <div> <video i ...

javascriptjqueryhtmlcss

Is it possible to retrieve JavaScript object properties using HTML elements?

I have fetched an array of objects using jQuery.getJSON(). Each object should be represented by an HTML div element, allowing users to click on the element and access all properties of the corresponding object. What is the most efficient approach for achie ...

javascriptjqueryhtmlobjectarrays

Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...

jquerycssjspstruts2struts-tags

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

htmlcss

What is the trick to displaying Bootstrap 5 dropdown arrows when the button label is lengthy?

Within a fixed-width element, I have a Bootstrap dropdown which causes the arrow to disappear when the button text is too long. Is there a way to trim the text while still displaying the arrow, similar to this image: https://i.sstatic.net/jHp5R.png .ou ...

javascripthtmlcssbootstrap-4bootstrap-5

Setting up multiple base tags in AngularJS for different modules

When working with angularjs, there is a "#" that needs to be removed. This can be achieved by setting: $locationProvider.html5Mode(true); Additionally, adding the base tag ensures normal functionality when the page refreshes. If <base href="http://exa ...

javascripthtmlangularjsbase-tag

Encountered an error while trying to filter markers and list using Knockout and Google Maps - Uncaught TypeError: Unable to locate property 'marker' of undefined

I am looking to enhance user experience by implementing a feature where clicking on a marker or a city name will display the info.window specific to that marker. HTML: <!DOCTYPE html> <html> <head> <title>Exploring Mag ...

javascripthtmlgoogle-mapsknockout.js

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Similar Question: JQuery function doesn't work on Chrome on Mac, but works on Chrome on Win 7 and all other browsers I am encountering an issue with a select-option list <div class="social-option"> <select name="hex_theme_options[soc ...

javascriptjqueryhtmlmacos

How to limit character input in a Div using Angular 2

I need some guidance on Angular 2 with TypeScript. I want to apply a validation rule to a "Div" element where the maximum length should be set to 100 characters. Additionally, even when text is copied and pasted into the Div, it should not exceed 100 chara ...

htmlangularcopy-paste

Only one submenu can be opened at a time & click to close

I am encountering an issue with my list and submenus. When I click on List 1, submenu 1 opens but if I then click on List 2, submenu 2 opens while submenu 1 remains open. However, when I click on List 2 again, instead of just closing submenu 2, it toggles ...

jqueryhtmlcss

Styling the right button of the split button in jQuery Mobile version 1.4.0 using CSS

I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with ...

jquerycssjquery-mobilecustomization

Tips for creating two interchangeable lists and saving the selected items when the selection process is finished

Utilizing jQuery and specifying dual selectors together, I attempt to reference each variable in the following code: UL_HeadersToOmit - represents the list to select from UL_dropedCols - indicates the list to be passed as a reference to the subsequent fu ...

jqueryhtmljquery-uisortingdrag-and-drop

Updating content on a webpage via AJAX request without altering the original source code

Within the body of our document, referred to as "form.php," we have the following components: At the head section, there is a JavaScript code block: <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").i ...

javascriptphphtmlajax

Guide on breaking up a string into separate lines

Can someone help me with separating the strings in this line "Add Problem Report \n Add Maintenance Report \n Add Expenses Report \n Add Contract", into new lines? I have tried using br, pre, and \n but it does not seem to work. HTML ...

htmltwitter-bootstrap

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

htmlcsswordpress

What causes certain properties of html and body elements to behave in this way?

I'm on a quest for understanding some mysteries. First riddle: Why does the body have a mysterious margin-top? html { height: 100%; background-color: red; } body { height: 100%; margin: 0; background-color: yellow; } <h1>Hello P ...

htmlcss