Question 236068 in Html Question posted in
Some basic documentation can be found here.

Html – How can I create three sections, make them stack from top to bottom and add space between them?

How can I create three words like say "Information", "Pictures", "Example"?
I want it too be able to stack from top to bottom in the middle of a page and be able to add like Paragraphs, then pictures in the "Picture" section, and add other stuff in the footer of the example sections. I think that part will be my hardest. I also want to be able to make the picture pop up in the screen when you click on it. Yet I have no clue on how to do it. It’s really confusing because i’ve been doing.
I’ve also been trying to add space between them but i can’t figure out how to do that either.

<section class="middle"
<ul>
 <li> information </li>
 <li> pictures </li>
 <li> example </li>
</ul>

and then while styling it

i’ve been doing

.middle ul{
 padding:20px;
 margin:20px;
}

But i can’t seem to understand what’s going on…

Tags:

2

Answers


  1. 0

    1. To achieve stacking from top to bottom, you can use the flex-direction CSS attribute (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). Set the value to "column" to stack your unordered list from top to bottom.

    2. For creating a popup effect for an image using JavaScript, consider using a lightbox. Here’s a step-by-step approach:

    You can also check my working example in this fiddle to see if it meets your desired outcome: https://jsfiddle.net/tnxufod9/1/

    Login or Signup to reply.
  2. 0

    I would recommend you to get into w3schools. There are heaps of tutorials and explanation that are very suitable for beginners. And explains the stuff you are asking for.

    Anyway, I created you a little snippet that does what you wanted:

    function openImage(img) {
  const popupContainer = document.getElementById("popup-container");
  const popupImage = document.getElementById("popup-image");

  popupImage.src = img.src;
  popupContainer.style.display = "flex";
}

function closeImage() {
  const popupContainer = document.getElementById("popup-container");
  popupContainer.style.display = "none";
}
    .middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.section {
  width: 80%;
  padding: 20px;
  margin: 20px;
  border: 1px solid #ccc;
}


.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-container img {
  width: auto;
  max-width: 100%;
  cursor: pointer;
}

#popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}

#popup-image {
  max-width: 80%;
  max-height: 80%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
  <title>Your Page Title</title>
</head>

<body>
  <section class="middle">
    <div class="section" id="information">
      <h2>Information</h2>
      <p>Your paragraphs go here.</p>
    </div>
    <div class="section" id="pictures">
      <h2>Pictures</h2>
      <div class="image-container">
        <img src="https://picsum.photos/id/10/75/150" alt="Image 1" onclick="openImage(this)">
        <img src="https://picsum.photos/id/11/75/150" alt="Image 2" onclick="openImage(this)">
        <img src="https://picsum.photos/id/12/75/150" alt="Image 3" onclick="openImage(this)">
        <img src="https://picsum.photos/id/13/75/150" alt="Image 4" onclick="openImage(this)">
        <img src="https://picsum.photos/id/14/75/150" alt="Image 5" onclick="openImage(this)">
      </div>
    </div>
    <div class="section" id="example">
      <h2>Example</h2>
      <p>Other content goes here.</p>
    </div>
  </section>
  <div id="popup-container" onclick="closeImage()">
    <img id="popup-image" alt="Popup Image">
  </div>
</body>

</html>

    Open it in full view to see everything alligned correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search