Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

Why is my webpage displaying from left to right? – Artificial Intelligence

When I run my web-page, it displays it with the header on the left and the footer on the right, even though I don’t want it to. I want it to display downwards.

My HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Alan Turing</title>
    <link rel="stylesheet" type="text/css" href="MyStyles.css">
</head>
<body>
    <header>
        <h5>Alan Turing</h5>
    </header>
    <nav>
        <a href="Home.html">Home</a>
        <a href="Biography.html"> Biography</a>
        <a href="Quiz.html"> Quiz</a>
        <a href="About.html"> About</a>
    </nav>
    <article>
        <h2>Alan Turing</h2>
        <p>Welcome to my Alan Turing website. Click on Biography to read about him, quiz to havea test about him. Click about to see about this web page and other useful websites.</p>
        <img alt="Alan turing" src="Assets/alanTuring.jpg">
        <p>Above is a picture of Alan Turing, who is famous for cracking the enigma code in World War 2.</p>
        <h3>An overview on who he was</h3>
        <p>Alan Turing was an English mathematician and pioneer of theoretical computer science and artificial intelligence. During WW2, he was instrumental in breaking the German Enigma code, leading to Allied victory over Nazi Germany.</p>
    </article>
</body>

And my CSS code:

header {
padding: 35px;
text-align: center;
background:darkgreen;
color: darkgray;
font-size: 40px;
}

nav {
padding: 20px;
background: green;
color: darkgrey;
font-size: 20px
}

article {
padding: 100px;
text-align: center;
background: lightgreen;
}

@import url('https://fonts.googleapis.com/css? 
family=Source+Code+Pro&display=swap');

body {
font-family: 'Source Code Pro', monospace;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

I have tried deleting some things, like each section, however it hasn’t worked.

Thanks in advance!

Tags:

2

Answers


  1. 0

    Remove the display: flex and related properties from body

    Login or Signup to reply.
  2. 0

    You have set body to display: flex. The default direction of a flexbox is row. That’s why your page is displaying left to right. To change this, so your flex parent displays its children in a column, add this line to body:

    body {
  …
  flex-direction: column;
}

    Here’s a little demo to help illustrate changing flex-direction from row (the default) to column.

    const container = document.querySelector(".container");
document.querySelector("button").addEventListener("click", () => {
  container.classList.toggle("column");
});
    .container {
  min-height: 100vh;
  display: flex;
}

.container.column {
  flex-direction: column;
}

.container > div {
  flex: 1;
}

.left {
  background-color: gray;
}

.right {
  background-color: yellow;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em 1.5em;
}

html, body { margin: 0; }
    <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<button type="button">Change flex direction</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search