Home > Software engineering >  HTML not being displayed properly in Flask, Python
HTML not being displayed properly in Flask, Python

Time：05-07

I am trying to make a website using Flask. I have designed the HTML using TeleportHQ, a drag and drop HTML designer that gives you the HTML and CSS files. I have the website looking how I want it. I downloaded the HTML and CSS. when I open the index.html file, it opens in the browser and works perfectly. I then copy and paste the HTML and CSS into my flask app and it bunches everything in the middle overlapping each other.

I'm not sure what I'm doing wrong.

here is my routing

@main.route("/")
@main.route("/home")
def home():

    return render_template('index.html')

here is the index.html (NOTE: I have changed the links to the style sheet from href="./style.css" to href="{{ url_for('static', filename='style.css') so it can find the css in the static file)

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Alienated Quiet Lark</title>
    <meta property="og:title" content="Alienated Quiet Lark" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <style>
      html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 {  margin: 0;  padding: 0;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}
    </style>
    <style>
      html {
        font-family: Inter;
        font-size: 16px;
      }

      body {
        font-weight: 400;
        font-style:normal;
        text-decoration: none;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.15;
        color: var(--dl-color-gray-black);
        background-color: var(--dl-color-gray-white);

      }
    </style>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
    />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
  </head>
  <body>
    <div>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='home.css') }}">

      <div id="page_holder1" >
        <div id="page_holder" >
          <div id="logo_holder" >
            <img
              src="http://ops-software.com/wp-content/uploads/2021/11/cropped-cropped-1-1.png"
              alt="image"
              id="company_logo"
              
            />
          </div>
          <div id="text_holder" >
            <span id="option_text">Please select an option</span>
          </div>
          <div >
            <div id="whale_flight" >
              <span >Whale Watching Flight</span>
              <span >
                <span>Panaramic Whale Flights and Sceanic</span>
                <br />
                <span>Views - 30 or 40</span>
              </span>
              <button
                id="view_whale"
                name="view_whale"
                
              >
                View
              </button>
            </div>
            <div id="sceanic_flight" >
              <span >Spectacular Scenic Flights</span>
              <span >
                <span>View the Ocean south and mountians north and MORE!!</span>
                <br />
                <span>15 - 25 - 30 Minutes</span>
              </span>
              <button
                id="view_scenic"
                name="vew_scenic"
                
              >
                View
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS style

:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-space-space-threeunits: 48px;
  --dl-space-space-oneandhalfunits: 24px;
}
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
}
.content {
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.heading {
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

css Home

.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}
.home-container1 {
  flex: 0 0 auto;
  width: 100%;
  height: 705px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.home-container2 {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-self: flex-start;
  margin-top: var(--dl-space-space-fourunits);
  align-items: center;
  justify-content: center;
}
.home-image {
  width: 312px;
  height: 108px;
  object-fit: cover;
}
.home-container3 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-container4 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.home-container5 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url('https://images.unsplash.com/photo-1568430462989-44163eb1752f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=500&q=80');
}
.home-container5:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text01 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text02 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button:hover {
  border-color: var(--dl-color-primary-100);
}
.home-container6 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url('https://i0.wp.com/sunsetobsession.com/wp-content/uploads/2018/12/Sunrise-at-Sea.jpg?fit=1800,1200&ssl=1');
}
.home-container6:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text05 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text06 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button1 {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button1:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button1:hover {
  border-color: var(--dl-color-primary-100);
}

Can anyone help?

Thanks

CodePudding user response：

Update of sorts....

I installed flask and went about trying to see if the problem was, and weirdly I didn't get an issue with the code you provided.

Is this on a certain page of the website? I see that you listed app.route('/') and then app.route('/home') and when I cleaned up some of the code you posted, and transferred the style tag over to main.css I don't see an issue. I'll provide a screenshot, and my code if you want it!

Screenshot of how it looks for me!

Here is the code:

--HTML--

    <!DOCTYPE html>

<html lang="en">
  <head>
    <title>Alienated Quiet Lark</title>
    <meta property="og:title" content="Alienated Quiet Lark" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='main.css') }}"
    />
  </head>

  <body>
    <div>
      <div id="page_holder1" >
        <div id="page_holder" >
          <div id="logo_holder" >
            <img
              src="http://ops-software.com/wp-content/uploads/2021/11/cropped-cropped-1-1.png"
              alt="image"
              id="company_logo"
              
            />
          </div>

          <div id="text_holder" >
            <span id="option_text">Please select an option</span>
          </div>

          <div >
            <div id="whale_flight" >
              <span >Whale Watching Flight</span>
              <span >
                <span>Panaramic Whale Flights and Sceanic</span>
                <br />
                <span>Views - 30 or 40</span>
              </span>
              <button
                id="view_whale"
                name="view_whale"
                
              >
                View
              </button>
            </div>

            <div id="sceanic_flight" >
              <span >Spectacular Scenic Flights</span>
              <span >
                <span>View the Ocean south and mountians north and MORE!!</span>
                <br />
                <span>15 - 25 - 30 Minutes</span>
              </span>
              <button
                id="view_scenic"
                name="vew_scenic"
                
              >
                View
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

--CSS--

 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #d9d9d9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #a22020;
  --dl-color-danger-500: #bf2626;
  --dl-color-danger-700: #e14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #ffffff;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003eb3;
  --dl-color-primary-300: #0074f0;
  --dl-color-primary-500: #14a9ff;
  --dl-color-primary-700: #85dcff;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32a94c;
  --dl-color-success-700: #4cc366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-space-space-threeunits: 48px;
  --dl-space-space-oneandhalfunits: 24px;
}
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
}
.content {
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.heading {
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}
.home-container1 {
  flex: 0 0 auto;
  width: 100%;
  height: 705px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.home-container2 {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-self: flex-start;
  margin-top: var(--dl-space-space-fourunits);
  align-items: center;
  justify-content: center;
}
.home-image {
  width: 312px;
  height: 108px;
  object-fit: cover;
}
.home-container3 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-container4 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.home-container5 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url("https://images.unsplash.com/photo-1568430462989-44163eb1752f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=500&q=80");
}
.home-container5:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text01 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text02 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button:hover {
  border-color: var(--dl-color-primary-100);
}
.home-container6 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url("https://i0.wp.com/sunsetobsession.com/wp-content/uploads/2018/12/Sunrise-at-Sea.jpg?fit=1800,1200&ssl=1");
}
.home-container6:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text05 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text06 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button1 {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button1:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button1:hover {
  border-color: var(--dl-color-primary-100);
}

Here is a picture of my directory as well! Directory!

Ignore some of the folders inside of the directory, like imagesforstack (it just holds all of my screenshots for this problem so I stay organized)

I have it in a services folder for organization,

templates is what I believe is the default config for it states for html, at least after 99 errors it worked out.

and static for .css (I named it main.css however, I believe you can get away with having it with any name just make sure to change it in your py file)

app.py holds my flask requirements like routing etc.

Page link：https//www.codepudding.com/Softwareengineering/398647.html

Prev:Align items horizontally in sinblings, without changing html structure
Next:how to prepare segue can't selected pass label text to text string
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding