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

i want to create an layout using html and css

(https://phpout.com/wp-content/uploads/2024/03/e5l3u-jpg.webp)

I want to create a layout as shown in the image using html and inline css and my motive is that i can put hyperlink in each of the boxes as well as images in each box, i have tried few things but not able to create the script can anyone please help me with it.

Thanks in advance.

I tried simple div creation with inline-block display but not able to perform it.

!! I can only use inline css due to limiting capability of the bi tool i am using this script in. !!

Tags:

2

Answers


  1. 0

    Honestly, I would recommend the use of bootstrap to format the boxes with CSS styling, so that you can put an image and the hyperlink in each and control the layout of the page using them.

    Have a read through this w3schools example of bootstrap grids so that you can get a basic understanding of how to format it.

    Goodluck.

    Login or Signup to reply.
  2. 0

    It’s just an example:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .parent {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 2;
    }
    .div2 {
      grid-area: 2 / 1 / 3 / 2;
    }
    .div3 {
      grid-area: 3 / 1 / 4 / 2;
    }
    .div4 {
      grid-area: 1 / 2 / 4 / 4;
    }
    .div5 {
      grid-area: 4 / 1 / 6 / 4;
    }
    .div6 {
      grid-area: 1 / 4 / 4 / 6;
    }
    .div7 {
      grid-area: 4 / 4 / 6 / 6;
    }

    .parent,
    .div,
    .div1,
    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7 {
      border: 1px solid black;
    }
    .div1 a,
    .div2 a,
    .div3 a,
    .div4 a,
    .div5 a,
    .div6 a,
    .div7 a {
      display: block;
    }
  </style>
  <body>
    <div class="parent">
      <div class="div1">
        <img src="" alt="Image 1" />
        <a href="#">Link 1</a>
      </div>
      <div class="div2">
        <img src="" alt="Image 2" />
        <a href="#">Link 2</a>
      </div>
      <div class="div3">
        <img src="" alt="Image 3" />
        <a href="#">Link 3</a>
      </div>
      <div class="div4">
        <img src="" alt="Image 4" />
        <a href="#">Link 4</a>
      </div>
      <div class="div5">
        <img src="" alt="Image 5" />
        <a href="#">Link 5</a>
      </div>
      <div class="div6">
        <img src="" alt="Image 6" />
        <a href="#">Link 6</a>
      </div>
      <div class="div7">
        <img src="" alt="Image 7" />
        <a href="#">Link 7</a>
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search